簡(jiǎn)介面向需要在Notepad中高效編寫Markdown文檔的IT從業(yè)者與內(nèi)容創(chuàng)作者這份插件包提供了一套完整的Markdown編輯與實(shí)時(shí)預(yù)覽解決方案。資源共包含兩個(gè)文件壓縮后體積僅228KB一個(gè)DLL動(dòng)態(tài)鏈接庫(kù)承擔(dān)Markdown語(yǔ)法解析與渲染的核心功能拷貝至Notepad的plugins目錄并重啟后即可在“插件”菜單中啟用Markdown預(yù)覽另一個(gè)XML文件是Zenburn暗色主題對(duì)應(yīng)的用戶自定義語(yǔ)言配置將標(biāo)題、列表、代碼塊、引用等元素映射為高對(duì)比度配色在深色背景下優(yōu)雅且護(hù)眼。目前已有1827人學(xué)習(xí)下載。借助這套配置用戶可以一邊編寫Markdown原文一邊同步查看渲染后的HTML效果省去頻繁切換瀏覽器的麻煩同時(shí)保留Notepad啟動(dòng)快、可高度自定義的優(yōu)勢(shì)。適用場(chǎng)景涵蓋技術(shù)文檔、博客草稿、README寫作與日常筆記暗色主題愛好者更可獲得舒適的長(zhǎng)時(shí)間編輯體驗(yàn)整體提升了寫作效率與視覺觀感。1. 用 Notepad 寫 MarkDown 的人多半在預(yù)覽這一步卡過殼用 Notepad 寫 MarkDown 的人第一印象往往是失望下載完安裝包裝上插件點(diǎn)開預(yù)覽窗口里還是井號(hào)和星號(hào)堆成的源碼。原因不復(fù)雜——Notepad 的立足點(diǎn)是輕量文本編輯器MarkDown 的渲染能力必須由插件補(bǔ)上而插件選型、安裝位置、渲染內(nèi)核和編碼設(shè)置任何一環(huán)出錯(cuò)預(yù)覽就是空白、亂碼或直接報(bào)錯(cuò)。這篇就聊 Notepad MarkDown 插件及預(yù)覽這條路怎么走通先拆清楚三類預(yù)覽方案的取舍再給一條能落地的最小路徑最后把高頻翻車點(diǎn)列成排查清單。適合想用輕量編輯器寫技術(shù)文檔、不想為看渲染效果專門開瀏覽器的人。至少在只改幾行文檔的場(chǎng)景里它比來回切換編輯器舒服得多。2. 先想清楚再裝三類 MarkDown 預(yù)覽方案的取舍Notepad 的插件生態(tài)里MarkDown 預(yù)覽方案大致分三類專用 Markdown 預(yù)覽插件、通用 HTML 預(yù)覽插件、以及帶自定渲染管線的硬核插件。三者的區(qū)別不在按鈕位置而在渲染引擎和后續(xù)維護(hù)上——選錯(cuò)方向后面全是玄學(xué)。以我的經(jīng)驗(yàn)大多數(shù)人不需要折騰最復(fù)雜的那種先按下面的順序判斷。2.1 MarkdownViewer最老牌的選擇大多數(shù)人從這里入門MarkdownViewer 是很多人在 Notepad 里第一次見到的 Markdown 預(yù)覽方案。它的交互形式很直白編輯器左側(cè)是源碼右側(cè)彈出一個(gè)獨(dú)立預(yù)覽窗口你寫的每一個(gè)標(biāo)題、列表、引用渲染結(jié)果同步出現(xiàn)在右邊。解析行為接近標(biāo)準(zhǔn) Markdown表格、代碼塊、引用這些常用語(yǔ)法都覆蓋了寫 README、技術(shù)筆記、接口文檔基本夠用。它的優(yōu)勢(shì)是安裝成本低Plugin Manager 里直接搜就能裝配置項(xiàng)也不算多。缺點(diǎn)是更新節(jié)奏慢對(duì) Mermaid 流程圖、腳注、數(shù)學(xué)公式這類擴(kuò)展語(yǔ)法支持很弱你如果在文檔里塞一堆$公式$它多半只會(huì)原樣輸出。所以它適合的場(chǎng)景很明確日常寫筆記、寫博客 Markdown 源碼、給項(xiàng)目補(bǔ) README不指望在預(yù)覽里看到復(fù)雜圖表和 LaTeX 公式。我一般建議新手先用它跑通完整流程因?yàn)樗哪J(rèn)設(shè)置最接近“裝上就能用”。如果你在它身上遇到問題再去換下面這個(gè)方案也不太遲。2.2 Markdown Panel配置更細(xì)預(yù)覽效果更接近 GitHub 風(fēng)格Markdown Panel 是另一種常見選擇和 MarkdownViewer 最大的區(qū)別是設(shè)置項(xiàng)更細(xì)渲染結(jié)果更接近 GitHub 的樣式——代碼塊帶底色、表格邊框分明、引用塊有左側(cè)豎線。它支持加載外部 CSS你可以把預(yù)覽樣式完全替換成自己的主題這點(diǎn)對(duì)于想把預(yù)覽顏色和公司文檔風(fēng)格對(duì)齊的人來說很關(guān)鍵。它同樣支持同步滾動(dòng)但實(shí)現(xiàn)方式略有不同左右分欄的布局在寬屏顯示器上觀感更好。缺點(diǎn)是安裝完之后要重啟 Notepad而且新手容易漏掉“啟用渲染”這一步——裝上插件后默認(rèn)可能不渲染你得先打開一次預(yù)覽面板它才會(huì)開始工作。如果你糾結(jié)“預(yù)覽效果為什么不那么像 GitHub”Markdown Panel 往往能解決這個(gè)疙瘩。它和 MarkdownViewer 并不沖突兩個(gè)都裝也不會(huì)打架只是快捷鍵入口需要自己分清。2.3 不推薦的路線HTML 預(yù)覽插件和自渲染方案還有一類路線是用通用 HTML 預(yù)覽插件比如把 Markdown 源碼手動(dòng)轉(zhuǎn)成一段 HTML再用 Notepad 的 HTML 預(yù)覽插件去渲染。這條路的問題在于你每次改文檔都得重新做一次轉(zhuǎn)換中間多了一步已經(jīng)違背了“用輕量編輯器快速預(yù)覽”的初衷。除非你手頭已經(jīng)有成熟的構(gòu)建腳本否則我不建議常規(guī)使用者走這條路。真正的硬核方案是 NppMarkdown 這類需要自己編譯、依賴 Python Script 插件的路子。它能做到的事很多比如自定義渲染進(jìn)程、對(duì)接外部處理器但代價(jià)是安裝步驟長(zhǎng)、出問題不好排查。我的判斷是如果你只是想寫 Markdown 并看到渲染結(jié)果先別碰它等 MarkdownViewer 和 Markdown Panel 都滿足不了你再考慮這種高度定制的方案。工具是服務(wù)于寫作的不是讓你花一晚上去調(diào)插件的。3. 跑通最小預(yù)覽安裝、配置到第一次渲染選型定了剩下的就是安裝和配置。我一般把過程分成三步把插件放對(duì)目錄、打開預(yù)覽面板、再把同步滾動(dòng)和延遲渲染調(diào)好。下面以 MarkdownViewer 為例順帶把 Markdown Panel 的差異標(biāo)出來。3.1 把插件放對(duì)目錄64 位與 32 位版本的安裝路徑安裝插件有兩條路。第一條是在 Plugin Manager 里搜“MarkdownViewer”點(diǎn)安裝后重啟 Notepad適合懶人第二條是手動(dòng)下載插件包解壓到 plugins 目錄適合用綠色版 zip 或者對(duì)插件目錄有潔癖的人。無論哪條都要先確認(rèn)一件事你的 Notepad 是 64 位還是 32 位插件包的位數(shù)必須和它一致否則插件菜單里死活不出現(xiàn)入口。以手動(dòng)安裝為例完整流程是退出 Notepad把解壓得到的 .dll 放對(duì)位置再重啟# 以手動(dòng)安裝為例先把 Notepad 完全退出再操作 # 這里的 zip 路徑換成你實(shí)際下載到的插件包 $pluginZip D:\downloads\MarkdownViewer.zip $targetDir C:\Program Files\Notepad\plugins # 強(qiáng)制解壓到 plugins 目錄-Force 可以覆蓋舊版本文件 Expand-Archive -Path $pluginZip -DestinationPath $targetDir -Force # 重啟 Notepad在“插件”菜單里應(yīng)能看到 MarkdownViewer 子菜單確認(rèn)插件目錄時(shí)有個(gè)容易踩的坑新版本 Notepad 支持用戶級(jí)插件目錄%APPDATA%\Notepad\plugins很多綠色版和便攜版用戶默認(rèn)看不到這個(gè)目錄。我一般先在安裝目錄下找 plugins 文件夾如果里面是空的或者不存在就去%APPDATA%\Notepad\plugins找。兩個(gè)目錄都能放插件但以實(shí)際存在的那一個(gè)為準(zhǔn)別想當(dāng)然。3.2 打開預(yù)覽面板入口、布局與第一次渲染插件裝好后打開一個(gè).md文件點(diǎn)擊菜單欄“插件”在子菜單里找到 MarkdownViewer點(diǎn)擊它提供的預(yù)覽入口。常見入口有兩個(gè)一個(gè)是 “Preview in a new window”彈出一個(gè)獨(dú)立窗口另一個(gè)是 “Show preview panel”在 Notepad 內(nèi)部開一個(gè)側(cè)欄面板。我習(xí)慣用獨(dú)立窗口因?yàn)橥蟿?dòng)到副屏上左邊寫右邊看屏幕空間更充裕。第一次打開預(yù)覽面板時(shí)右側(cè)不會(huì)自動(dòng)渲染任何內(nèi)容。你得先讓編輯器里的 Markdown 內(nèi)容變化一次——比如隨便敲一個(gè)空格再刪掉——預(yù)覽才會(huì)跟上。這一步看起來像 bug其實(shí)是插件默認(rèn)的刷新策略它監(jiān)聽文件內(nèi)容變化但打開面板這個(gè)動(dòng)作本身不算變化。有經(jīng)驗(yàn)的用戶不會(huì)慌新手往往會(huì)以為是沒裝好。要驗(yàn)證渲染是否正常最簡(jiǎn)單的方法是寫一段包含標(biāo)題、代碼塊、表格的測(cè)試文本保存后看右側(cè)是否出現(xiàn)對(duì)應(yīng)的 HTML 效果。如果右側(cè)還是純文本或者顯示的是帶標(biāo)簽的源碼說明插件沒有真正接管渲染問題大概率出在位數(shù)或安裝目錄上回到上一節(jié)排查。3.3 同步滾動(dòng)與延遲渲染兩個(gè)必調(diào)參數(shù)預(yù)覽能用之后第一步要調(diào)整的是同步滾動(dòng)。默認(rèn)情況下左側(cè)源碼滾動(dòng)到第 100 行右側(cè)預(yù)覽可能還停在頂部你根本不知道當(dāng)前渲染的是哪一段。打開插件設(shè)置找到 Synchronize Scrolling 選項(xiàng)勾上左右兩側(cè)就能大致保持同一位置。注意這里的同步不是像素級(jí)對(duì)齊而是段落級(jí)對(duì)齊因?yàn)樵创a行數(shù)和渲染后的行高本來就不一樣能讓你知道“當(dāng)前位置渲染到哪了”就夠用了。第二個(gè)參數(shù)是延遲渲染。預(yù)覽組件默認(rèn)在每次按鍵后都觸發(fā)渲染對(duì)于幾百行的短文檔沒問題一旦到了上萬字的文檔每一次輸入都觸發(fā)全量重渲染CPU 占用會(huì)瞬間拉高卡頓明顯。我一般把它調(diào)到 300 到 500 毫秒也就是停止輸入半秒后才重新渲染既不打斷寫作節(jié)奏又避免掉幀。具體推薦值看下表參數(shù)推薦值適用場(chǎng)景同步滾動(dòng)開啟所有文檔關(guān)閉后無法定位當(dāng)前渲染位置延遲渲染200ms 以下短文檔、筆記追求即輸即見延遲渲染300~500ms長(zhǎng)文檔、技術(shù)手冊(cè)降低 CPU 占用保存時(shí)自動(dòng)刷新開啟頻繁用外部工具修改 .md 文件時(shí)參數(shù)單位是毫秒200ms 在長(zhǎng)文檔下基本感覺不到卡頓但和 500ms 相比 CPU 占用會(huì)高一截。如果你寫的是幾萬字的接口文檔建議直接 500ms如果只是半小時(shí)內(nèi)的隨手筆記200ms 更跟手。設(shè)置完記得保存不然重啟后恢復(fù)默認(rèn)。3.4 深色主題下的樣式切換最后花一分鐘處理顯示樣式。Notepad 本身可以切深色主題但預(yù)覽面板不會(huì)跟著變默認(rèn)白底在深色編輯器旁邊顯得特別刺眼。MarkdownViewer 這類插件一般都會(huì)提供幾套內(nèi)置主題在設(shè)置里找 Styles 或 Theme 選項(xiàng)選一個(gè)深色背景的預(yù)設(shè)比如基于 GitHub Dark 風(fēng)格的主題即可。如果內(nèi)置主題都不滿意許多插件支持自定義 CSS具體怎么接我們下一章講。這里只需記住預(yù)覽樣式的目標(biāo)是讓你連續(xù)寫兩個(gè)小時(shí)不疲勞淺色背景在強(qiáng)光下看久了眼睛會(huì)難受深色主題在夜間寫文檔時(shí)是剛需。4. 把預(yù)覽做成成品樣式、公式、表格與導(dǎo)出預(yù)覽跑通只是開始。真正寫著寫著你會(huì)發(fā)現(xiàn)默認(rèn)樣式不適合長(zhǎng)時(shí)間閱讀公式?jīng)]法顯示表格一復(fù)雜就看不下去。這章把這些進(jìn)階需求逐個(gè)解決掉。4.1 自定義 CSS讓預(yù)覽從“能用”變成“好看”如果你用的是 Markdown Panel 這類支持外部 CSS 的插件強(qiáng)烈建議把預(yù)覽樣式換成自己的。內(nèi)置主題再怎么調(diào)都有限自己寫一份 CSS 才能真正貼合你的閱讀習(xí)慣。以下是一份我常用的基礎(chǔ)樣式重點(diǎn)處理了字體、行寬、代碼塊和表格/* 適用于 Markdown Panel 這類支持外部 CSS 的預(yù)覽插件 */ body { font-family: Segoe UI, Microsoft YaHei, sans-serif; line-height: 1.75; max-width: 860px; margin: 0 auto; padding: 24px; color: #333; } pre { background: #f6f8fa; border-radius: 6px; padding: 12px; overflow-x: auto; } code { background: #f0f0f0; padding: 2px 4px; border-radius: 4px; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; }max-width: 860px是為了防止行太長(zhǎng)導(dǎo)致閱讀視線漂移這是排版上最常見也最有效的調(diào)整。line-height: 1.75對(duì)中文文檔尤其重要太緊湊的行距會(huì)讓大段文字糊在一起。表格的border: 1px solid #ddd是讓每一格邊框清晰可見很多內(nèi)置主題的表格線太淺對(duì)比度不夠。注意這份 CSS 需要保存成獨(dú)立文件然后在插件設(shè)置里指定路徑不是寫在 Markdown 源文件里。每次啟動(dòng)預(yù)覽時(shí)它會(huì)重新加載改完 CSS 刷新一下預(yù)覽就能看到效果。4.2 數(shù)學(xué)公式與高級(jí)語(yǔ)法能顯示到什么程度熱搜里“markdown數(shù)學(xué)公式插件”經(jīng)常出現(xiàn)說明很多人都想在 Notepad 里寫帶 LaTeX 公式的文檔。但說實(shí)話Notepad 的這幾個(gè)老牌 Markdown 預(yù)覽插件對(duì)數(shù)學(xué)公式支持普遍偏弱你寫$Emc^2$它很可能原樣顯示成美元符號(hào)。想徹底解決公式問題常見的做法不是折騰插件而是分兩步走先用 Notepad 寫好源碼再導(dǎo)出成 HTML讓瀏覽器里的 MathJax 去渲染公式。先給一份可復(fù)用的 HTML 模板片段把這段放進(jìn)導(dǎo)出后 HTML 文件的head里即可!-- 導(dǎo)出后臨時(shí)調(diào)用 MathJax只用于預(yù)覽不影響原始 .md 文件 -- !-- 這段腳本會(huì)識(shí)別 $...$ 和 \(...\) 兩種行內(nèi)公式寫法 -- script MathJax { tex: { inlineMath: [[$, $], [\\(, \\)]], displayMath: [[$$, $$], [\\[, \\]]] } }; /script script srchttps://cdn.jsdelivr.net/npm/mathjax3/es5/tex-mml-chtml.js/scriptinlineMath指定的是行內(nèi)公式的分隔符displayMath指定的是獨(dú)立成行的公式分隔符。這里的配置讓$x^2$和$$x^2$$都能被正確渲染兩種最常見的書寫習(xí)慣都覆蓋到了。如果你在預(yù)覽插件里看到公式原樣顯示不用懷疑自己語(yǔ)法錯(cuò)了是渲染內(nèi)核不支持把源碼導(dǎo)出后用瀏覽器打開才是正解。4.3 表格、換行和圖片路徑最容易出問題的三個(gè)語(yǔ)法細(xì)節(jié)這三個(gè)問題幾乎每周都有人在網(wǎng)上問。第一個(gè)是表格標(biāo)準(zhǔn) Markdown 表格必須有表頭、分隔行和內(nèi)容行。很多人寫了一行表格就期望它渲染成表格結(jié)果預(yù)覽里只有一行豎線。正確的寫法是分隔行里至少三個(gè)短橫線對(duì)齊方式靠冒號(hào)控制| 參數(shù) | 類型 | 默認(rèn)值 | 說明 | | :-- | :--: | ---: | --- | | name | string | npp | 名字 | | count | number | 0 | 次數(shù) |:--表示左對(duì)齊:--:表示居中---:表示右對(duì)齊。這里有個(gè)很容易被忽略的點(diǎn)分隔行的短橫線數(shù)量不需要和表頭字?jǐn)?shù)對(duì)應(yīng)三個(gè)以上就行但很多渲染器對(duì)缺少分隔行的表格直接拒絕渲染。所以遇到表格不顯示先檢查是不是漏了第二行。第二個(gè)是換行。很多人發(fā)現(xiàn)回車換行在預(yù)覽里不生效兩行文字合成一段。這不是插件 bug是 Markdown 標(biāo)準(zhǔn)規(guī)則想在段落內(nèi)換行必須在行尾加兩個(gè)空格再回車單獨(dú)一個(gè)回車是開啟新段落而連續(xù)兩行之間沒有空行時(shí)會(huì)被合并成同一個(gè)段落。如果你不習(xí)慣這個(gè)規(guī)則可以看看插件設(shè)置里有沒有“軟換行”選項(xiàng)有些插件提供了讓單回車也顯示為換行的開關(guān)打開后更符合中文書寫習(xí)慣。第三個(gè)是圖片路徑。Notepad 里插入圖片時(shí)相對(duì)路徑是相對(duì)于.md文件所在目錄解析的不是相對(duì)于 Notepad 當(dāng)前打開的工作目錄。比如你的文檔在docs/readme.md圖片在docs/images/a.png正確寫法是而不是。很多人圖片不顯示十有八九是路徑起點(diǎn)搞錯(cuò)了。4.4 從預(yù)覽到成品HTML 與 PDF 的導(dǎo)出路線預(yù)覽終究是看效果最終交付還是得靠導(dǎo)出。大多數(shù) Markdown 預(yù)覽插件都提供“Export as HTML”之類的功能在預(yù)覽窗口里右鍵就能找到導(dǎo)出結(jié)果是帶基礎(chǔ)樣式的完整 HTML 文件。得到 HTML 之后你可以直接用瀏覽器打開按 CtrlP 打印成 PDF這樣得到的 PDF 樣式基本和預(yù)覽一致比某些笨重的編輯器強(qiáng)得多。如果需要生成 Word 文檔我一般不會(huì)直接從 Markdown 轉(zhuǎn) docx而是先導(dǎo)出 HTML再用 Pandoc 從 HTML 轉(zhuǎn) docx格式還原度更高表格不容易散掉。注意一點(diǎn)導(dǎo)出 HTML 是靜態(tài)快照你改完 Markdown 源碼后必須重新導(dǎo)出一次不會(huì)自動(dòng)更新。如果你需要頻繁交付成品文檔可以考慮用一個(gè)簡(jiǎn)單的構(gòu)建腳本把這步自動(dòng)化省得每次手工操作。5. Notepad MarkDown 預(yù)覽避坑五個(gè)高頻問題與排查路徑下面五條都是實(shí)際使用中反復(fù)出現(xiàn)的問題按“現(xiàn)象 → 原因 → 解決”的順序?qū)?。我自己排過這個(gè)坑的順序按這個(gè)順序排查能省掉大半冤枉時(shí)間。5.1 插件裝了菜單里找不到入口現(xiàn)象從官網(wǎng)下載了插件包按說明解壓到 plugins 目錄重啟 Notepad 后“插件”菜單里什么都沒有。原因八成是插件 dll 的位數(shù)和 Notepad 位數(shù)不一致。64 位程序加載不了 32 位動(dòng)態(tài)庫(kù)操作系統(tǒng)直接忽略它反過來也一樣。還有一部分情況是插件放錯(cuò)了目錄新版本 Notepad 的插件目錄可能在%APPDATA%\Notepad\plugins不在安裝目錄下。解決先打開 Notepad“幫助→關(guān)于”看是 64 位還是 32 位再去下載對(duì)應(yīng)位數(shù)的插件包。然后檢查兩個(gè) plugins 目錄把 dll 放到實(shí)際存在且被程序讀取的那一個(gè)。如果兩個(gè)目錄都有建議只保留一個(gè)避免加載沖突。5.2 預(yù)覽窗口空白或一直停在 loading現(xiàn)象預(yù)覽面板能打開但右側(cè)一片白或者一直顯示加載中的轉(zhuǎn)圈狀態(tài)等多久都沒反應(yīng)。原因預(yù)覽組件依賴系統(tǒng)渲染環(huán)境。有些插件依賴舊版 IE 控件有些需要 WebView2 運(yùn)行時(shí)如果系統(tǒng)里缺少對(duì)應(yīng)組件渲染進(jìn)程起不來。中文目錄或中文文件名也可能導(dǎo)致加載失敗這是很多人忽略的一個(gè)點(diǎn)。解決先把.md文件另存到一個(gè)純英文路徑比如D:\temp\test.md重新預(yù)覽如果恢復(fù)正常說明是路徑問題。如果還是空白就去檢查 WebView2 Runtime 是否安裝或者看插件設(shè)置里有沒有“使用 Chrome 內(nèi)核/使用 IE 內(nèi)核”的切換項(xiàng)。最后還可以用“導(dǎo)出 HTML”功能驗(yàn)證能導(dǎo)出 HTML說明 Markdown 解析正常空白就出在渲染層。5.3 Windows 提示“你嘗試預(yù)覽的文件可能對(duì)你的計(jì)算機(jī)有害”現(xiàn)象下載的插件 zip 解壓后雙擊 dll 或運(yùn)行安裝程序時(shí)系統(tǒng)彈出灰色彈窗寫著“你嘗試預(yù)覽的文件可能對(duì)你的計(jì)算機(jī)有害。如果你信任此文件以及其來源請(qǐng)打開此文”。原因這是 Windows 的文件安全機(jī)制在起作用。從網(wǎng)上下載的文件會(huì)被打上“來自網(wǎng)絡(luò)”標(biāo)記也就是 Mark of the Web系統(tǒng)對(duì)這類文件默認(rèn)不信任。這不是 Notepad 或插件本身的問題很多綠色版 zip 都會(huì)觸發(fā)它。解決在文件上右鍵打開屬性如果底部有“解除鎖定”復(fù)選框勾上并點(diǎn)擊確定再次打開就不會(huì)報(bào)這個(gè)提示。前提是你確認(rèn)下載來源可靠——插件這類東西盡量從官方渠道拿不要從陌生論壇隨意下載。5.4 源碼正常預(yù)覽里中文亂碼現(xiàn)象Notepad 源碼里中文顯示完全正常但預(yù)覽面板里變成方塊、問號(hào)或“錕斤拷”一類的亂碼。原因文件編碼和插件期望的編碼不一致。常見情況是文件以 GBK 編碼保存而渲染器按 UTF-8 去解碼解碼結(jié)果自然是一堆亂碼。很多歷史遺留的配置文件都保存在 GBK 下拷進(jìn) Markdown 后問題就暴露了。解決在 Notepad 里點(diǎn)擊“編碼”菜單選擇“轉(zhuǎn)為 UTF-8”保存后再刷新預(yù)覽。注意是“轉(zhuǎn)為”不是“以 UTF-8 編碼”前者會(huì)改寫文件本身。我個(gè)人的習(xí)慣是新建 Markdown 文件后第一件事就確認(rèn)右下角狀態(tài)欄顯示 UTF-8讓編碼問題在一開始就不存在。5.5 換行不生效、表格不渲染現(xiàn)象源碼里明明按了回車預(yù)覽里兩行文字還是連在一起表格寫了兩行預(yù)覽里變成一行帶豎線的純文本。原因標(biāo)準(zhǔn) Markdown 對(duì)這兩個(gè)場(chǎng)景有嚴(yán)格語(yǔ)法要求。換行必須在行尾加兩個(gè)空格表格必須有表頭分隔行且分隔行要寫完整。國(guó)內(nèi)用戶習(xí)慣“回車即換行”的寫作方式遇到這個(gè)規(guī)則很容易以為是插件壞了。解決先按標(biāo)準(zhǔn)語(yǔ)法改寫行尾補(bǔ)兩個(gè)空格表格補(bǔ)全分隔行。如果實(shí)在不習(xí)慣看插件設(shè)置里有沒有“忽略標(biāo)準(zhǔn)換行規(guī)則”的選項(xiàng)部分插件提供這種寬松模式。但要注意寬松模式導(dǎo)出的 HTML 在其他平臺(tái)比如 GitHub上渲染結(jié)果可能不同如果文檔以后要發(fā)布到這些平臺(tái)還是老老實(shí)實(shí)按標(biāo)準(zhǔn)寫。6. 最后一道驗(yàn)收三分鐘檢查清單和一個(gè)刷新技巧6.1 三分鐘驗(yàn)收清單換插件、調(diào)樣式、踩坑之后我每次在新環(huán)境搭好預(yù)覽方案都會(huì)跑一遍下面的檢查清單全部通過才認(rèn)為這套環(huán)境是干凈的檢查項(xiàng)操作預(yù)期結(jié)果編碼看右下角狀態(tài)欄UTF-8 或 UTF-8-BOM插件入口點(diǎn)擊插件菜單能看到 MarkdownViewer 或?qū)?yīng)子菜單基礎(chǔ)渲染寫一段帶標(biāo)題、代碼塊、表格的測(cè)試文本預(yù)覽面板出現(xiàn)對(duì)應(yīng)的 HTML 效果同步滾動(dòng)滾動(dòng)左側(cè)源碼右側(cè)大致跟隨不會(huì)停在頂部圖片路徑插入一張相對(duì)路徑圖片預(yù)覽里能正常顯示導(dǎo)出用預(yù)覽窗口導(dǎo)出 HTML生成的 HTML 在瀏覽器中打開樣式和預(yù)覽一致這套清單覆蓋了我遇到過的大部分問題場(chǎng)景。尤其是編碼和圖片路徑兩項(xiàng)看起來簡(jiǎn)單實(shí)際翻車率最高。6.2 順手的小技巧把預(yù)覽快捷鍵綁死最后分享一個(gè)提高效率的小技巧。預(yù)覽面板的開關(guān)動(dòng)作可以綁定到快捷鍵上不用每次去菜單里點(diǎn)。在 Notepad 里打開“設(shè)置→快捷方式映射”在插件命令分類下找到 MarkdownViewer 的預(yù)覽命令給它綁定一個(gè)順手的組合鍵比如CtrlAltM。之后按一下開預(yù)覽再按一下關(guān)掉編輯體驗(yàn)會(huì)順滑很多。如果你經(jīng)常在外部工具里修改 Markdown 文件比如用另一個(gè)腳本生成內(nèi)容注意預(yù)覽面板不會(huì)自動(dòng)感知外部修改。常見的做法有兩種一是把“保存時(shí)自動(dòng)刷新預(yù)覽”打開保存源文件后預(yù)覽聯(lián)動(dòng)更新二是干脆養(yǎng)成修改后重新點(diǎn)擊預(yù)覽面板刷新的習(xí)慣。我的教訓(xùn)是別太依賴自動(dòng)刷新尤其是大文件保存后手動(dòng)刷新一次反而比盯著面板等它反應(yīng)更快。希望這套從選型到避坑的路徑能幫你少走幾趟彎路早點(diǎn)把 Notepad 變成真正順手的 Markdown 寫作臺(tái)。本文還有配套的精品資源點(diǎn)擊獲取