一次多來源調查範本的執行生成了一份關於投資工具的優質報告,然後把它排版得很糟糕。九十五個形如[^1]的標記散布在正文中,九行形如[^1]:的內容堆積在下方。無論是網頁端還是手機端都是如此。
原因在於註腳不是Markdown的一部分。它是一個延伸功能,而我們提供的兩套Markdown渲染引擎——一套用於網頁,另一套用於行動裝置——都沒有實作它。我們要求模型生成的正是這種格式,然後又把它當作字面文字渲染出來。
一個重寫器,兩套引擎
與其讓兩套渲染器分別學會同一個延伸功能,不如在任何一套引擎看到標記之前就先重寫它們,變成一個兩者都已經能一致渲染的簡單連結。定義被擷取出來並單獨傳回,原本跟在它們後面的內容則保留為文件的尾部。方括號留在連結文字內,因此疊加的引用會讀作[1][2],而不是12。
在網頁端,引用會以上標形式繪製,定義以帶有真實錨點的清單形式渲染,點選其中一個會捲動到它並讓該行閃爍,清單中的編號也會跳回到它第一次被引用的位置。滑鼠懸停會顯示定義而不移動位置。在手機端,同樣的標記會以強調色繪製,點選其中一個會讓面板捲動到對應的行。不是引用的連結依舊像以前一樣在瀏覽器中開啟。
報告下方的來源卡片從未受到影響——它們來自另一處,一直都是正常的。
下載檔案中也是如此
你以.docx、.pdf或.md格式下載的報告,會經過另一個轉換器,它會把原始標記直接印進文件。文件規範沒有上標,因此引用會被印為[3],每條定義會以[3]開頭開啟自己獨立的一行。帶縮排的續行會銜接到對應的定義。檔案中的編號就是螢幕上的編號。
第一次嘗試出錯的方式,我們其實早有防護
第一個版本把註腳編號做成了普通的片段連結——href="#fn-3"。在單頁應用程式所需的<base href="/">之下,一個裸片段會相對於網站根路徑解析,因此該連結會指向首頁。點選處理程序取消了導航,所以它能正常運作——而且會一直正常運作,直到有人動了這個處理程序。
我們此前已經專門針對這種模式設定過一項檢查,它在推送前的本機執行中亮了紅燈。現在編號是按鈕;它們會捲動、移動焦點,並尊重讀者對減少動效的偏好設定。