為什麼只在游標所在的詞彙中顯示 Markdown 符號

在即時模式中，游標的位置就是畫面。Markdown 符號平時應該隱藏，只有在修改時才出現。

那麼，要怎麼知道什麼時候是「修改時」呢？

mote 一開始以整個段落為基準。只要游標進入段落，就會顯示該段落的所有符號。

實作很簡單，但畫面很吵雜。明明只是為了修改一個粗體詞語而放置游標，連三行之後的連結和程式碼都變回了原始文字。視線明明只看著一處，整個段落卻都動了起來。

看的是語法結構，而不是段落

現在 mote 只會顯示與游標接觸的語法結構。

只有當游標位於起始符號與結束符號之間時，原始文字才會出現。符號正前方與正後方也包含在範圍內。因為把游標放在那裡，同樣也是想修改語法結構的動作。

游標只要移開一格，就會恢復為算繪後的樣子。出現與消失時會使用 120 ms 的不透明度轉場。這是有起點與終點的轉場，因此結束後不會留下任何東西。

即使段落中同時有粗體、連結與行內程式碼，其餘部分也不會移動。只有游標碰觸到的語法結構會改變，重新繪製的範圍也僅限該行。不會重新解析整份文件。

斜體、粗體、刪除線、螢光標記、下標、上標、程式碼、數學式、連結、圖片與註腳引用都套用相同的原則。

行首符號稍有不同。由於 # 和 > 決定整行的性質，因此無論游標位於行中的哪個位置，都會以相同的樣子顯示。相較之下，清單的 - 只會在游標位於符號上時顯示。越過空格移到本文後，就會立即恢復成項目符號。

選取文字時，也只有與選取範圍重疊的語法結構會變回原始文字。因為如果只選了三個字，整行卻都變成原始碼，反而會更難看出究竟選取了什麼。

符號也會跟隨文字的樣式

顯示出來的符號會完整套用語法結構的樣式。

粗體文字的 ** 會以粗體顯示，斜體的 * 則會以傾斜的樣子出現。刪除線的 ~~ 也會被畫上刪除線。

以前所有符號都以灰色顯示。這使得游標一放到粗體文字上，詞語看起來就像被關進灰色括號裡。正在修改的文字是粗體這項資訊，也會暫時消失。

讓符號套用文字的樣式後，含義就變得清楚了。詞語會繼續以粗體顯示，而星號只作為標示其範圍的記號留下。

灰色只用於 #、>、項目符號等區塊符號。因為這些符號描述的是行的性質，而不是文字本身。

原則很簡單。附著於文字的符號要像文字的一部分，決定行性質的符號則要像背景一樣顯示。

只有星號會自動成對

輸入一個星號時，結尾的星號會一起出現。再輸入一個星號，就會擴展成粗體所需的一對符號。

寫完內容後輸入結尾星號時，不會建立新符號，而是直接越過既有符號。星號一次出現四個的問題，也透過這項規則解決了。

不過，在文字或星號正後方輸入的星號，會被視為使用者正在自行關閉語法結構。此時不會建立成對符號。

底線與波浪號不會自動成對。因為這可能會干擾 snake_case、__init__、~/路徑 等日常輸入的文字。只有包覆所選文字時才會成對運作。

插入游標應該比文字更不顯眼

一開始，插入游標是作為強調色的藍色。現在則使用與本文相同的墨色。

藍色直條很適合簡短的輸入欄位。但在文件中，文字才是主角。插入游標只要告知已經寫到哪裡就足夠了。強調色只保留給選取範圍與搜尋結果。

寬度的決定方式，是將插入游標高度除以本文墨色字形的高度，再四捨五入為整數。本文中會得到 1 px，只有在大型標題中才會增加到 2 px。如果直接使用小數寬度，它會分散到兩個像素欄中，結果不是變細，而是變得粗厚且模糊。

高度依循的是文字高度，而不是行距。本文是 18 px，h3 是 24 px，h2 是 29 px，h1 是 36 px。只看插入游標，就能知道游標位於本文還是標題中。

閃爍被記錄為「閒置狀態下不保留重複來源」這項規則的唯一例外。視窗失去焦點時會停止閃爍，選取範圍也會淡化至 45 % 的 alpha。

位移保留了下來

符號出現時，後方的文字會稍微位移。我們決定不消除這項動作。

我們也測試過持續以淡灰色顯示隱藏符號，藉此預留空間的方法。但粗體文字會留下灰色殘影，刪除線則會突出到詞語之外。結果成了既不是算繪畫面，也不是原始文字的尷尬狀態。

相較之下，像項目符號與待辦方框這類帶有繪製方框的行首符號，會根據原始文字與算繪結果的寬度差來移動整行，因此即使符號顯示出來，本文文字也不會移動。標題的 # 與引用的 > 則保留為推動本文的方式。這是基於使用者已習慣這類編輯器所做的決定。

連結的網址可能很長，因此畫面變化也可能更大。所以平時只會顯示連結文字，並在末尾附上一個小箭頭。這樣能知道它是連結，但網址只會在修改時出現。

如果需要準確確認原始文字，可以使用原始碼模式。即時模式不是顯示所有符號的地方，而是只開啟目前要修改之處的地方。

mote 不會猜測使用者的意圖。游標位於語法結構內時就顯示符號，位於外部時就隱藏。猜測正確時很方便，但猜錯時往往難以理解原因。只使用位置這一項標準，就能隨時預料結果。

決定何時顯示符號，歸根究柢就是決定要讓使用者的視線停留在哪裡。