0

先前提過我打算用 Markdown 寫技術文件，當時的研究以 VSCode + Hugo 為主，配合 VSCode Paste Image 套件，可以複製貼上畫面擷圖，Hugo 還能自動產生文章清單及章節目錄，要應付結構稍複雜的文件也行。(有不少書籍作者已改用 Markdown 寫作，應不用太擔心其彈性及效率。)

隨著情景推移到工作專案，開發工具以 Visual Studio 為主，花了點時間研究在 Visual Studio 編輯 Markdown 的做法，原以為又要陷入選擇困難症，輸入關鍵字看到排名第一是 Mads Kristensen 的作品，這下就沒什麼好猶豫了，選 Markdown Editor v2 就對了。
(我部落格平台的核心 - Miniblog.Core 便是出自 Kristensen 之手，而 Visual Studio 神級外掛 WebEssentials 也是他的作品。排第二的 Markdown Editor 為舊版，支援 VS2015 ~ VS2019；V2 大幅重寫過，修掉一堆 Bug 並改善了效能，不過只適用 VS2022。)

在 Github 專案首頁有 Markdown Editor v2 完整介紹，看了一下，筆記我較會用到的功能。

Markdown Editor 支援從剪貼簿貼上圖檔，自動另存新檔並插入![](filename.png)標記，另外將檔案拖到到文件編輯區也行，這是寫操作圖文說明最重要的功能：

支援程式語法顯示 Syntax Highlighting，程式區塊可以收合展開：

自動識別標題，提供導覽清單：

在同目錄或上層目錄放入 md-styles.css 及 md-template.html 可自訂預覽顯示樣式：

例如以下是個超簡單的 md-template.html，依一般方式編譯 HTML，在要呈現 Markdown 內容的地方插入[content]：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Markdown 顯示樣版
    <div class="content">
        [content]
    </div>
</body>
</html>

md-styles.css 則簡單將 body 設成白底突顯變化：

body {
    background-color: white;
}

右側預覽畫面便會套用自訂版面及樣式：

另外，右側預覽畫面會隨著左側 Markdown 內容捲動到對映位置，即時還不錯。

初步試用，編輯及預覽都頗流暢，如果想在 Visual Studio 直接寫 Markdown，它會是首選。

Introduction to VS extension - Markdown Editor.


Comments

Be the first to post a comment

Post a comment