寫(xiě) Markdown 的時(shí)候我猜你遲早會(huì)遇到這個(gè)場(chǎng)景辛辛苦苦寫(xiě)了兩千字的文檔插了七八張截圖然后你把.md文件單獨(dú)拷給同事對(duì)方打開(kāi)一看——圖片全裂了只剩一堆破圖標(biāo)和錯(cuò)誤提示。你說(shuō)“圖片就在文件夾里啊”結(jié)果發(fā)現(xiàn)圖片還留在你電腦上一個(gè)叫assets或者img的目錄里根本不在你發(fā)出去的那堆文件里。這就是我用 Typora 編輯 Markdown 文件時(shí)踩得最深的一個(gè)坑。后來(lái)我花了不少時(shí)間把“把圖片固定到文件中形成單一文件”這套流程徹底捋順了今天這篇文章就專門(mén)講這件事圖片為什么會(huì)丟、Typora 里有哪些圖片處理模式、如何把圖片內(nèi)嵌進(jìn).md源文件、以及什么時(shí)候適合用導(dǎo)出單文件 HTML 代替。1. 圖片為什么會(huì)“丟”先搞懂 Markdown 的圖片引用機(jī)制1.1 Markdown 圖片的本質(zhì)是“地址”不是圖片本身很多人第一次用 Typora 時(shí)會(huì)覺(jué)得它“所見(jiàn)即所得”好像圖片真的被存在了文檔里。但實(shí)際上 Markdown 是一種純文本標(biāo)記語(yǔ)言圖片那一行寫(xiě)的是這一行并沒(méi)有把圖片的數(shù)據(jù)存進(jìn).md文件它只存了一個(gè)“圖片地址”。Typora 打開(kāi)文件時(shí)會(huì)按這個(gè)路徑去硬盤(pán)上找圖片文件找到了就顯示找不到就是裂圖。也就是說(shuō)你寫(xiě)的 Markdown 在物理層面是一個(gè)“引用了若干外部資源”的純文本文件。一旦引用的圖片文件沒(méi)有跟著走或者路徑結(jié)構(gòu)變了文檔瞬間變殘。1.2 路徑類型決定了你的文檔“腿腳有多長(zhǎng)”Markdown 里的圖片路徑主要有這么幾類我把它們的特點(diǎn)列一下類型示例能不能獨(dú)立傳播典型問(wèn)題絕對(duì)路徑C:\Users\me\Desktop\notes\img\a.png否換電腦、換目錄就失效相對(duì)路徑./img/a.png否需要連同圖片文件一起拷貝文件夾層級(jí)一變就容易壞網(wǎng)絡(luò) URLhttps://example.com/a.png看似能獨(dú)立斷網(wǎng)、圖床失效就沒(méi)了Base64 內(nèi)嵌data:image/png;base64,iVBORw0KGgo...是文件體積變大用生活里的例子解釋就是Markdown 文檔好比一張寫(xiě)著“我家書(shū)房第二排書(shū)架第三本”的紙條圖片是書(shū)架上那本真正的書(shū)。你把紙條遞給別人人家按地址去找就能看到書(shū)但如果你只說(shuō)“書(shū)就在我這兒”或者地址寫(xiě)成了“客廳茶幾下面”對(duì)方當(dāng)然找不到。1.3 實(shí)戰(zhàn)中圖片最常見(jiàn)的幾種“死法”我自己實(shí)際踩過(guò)的坑基本可以歸成三類第一類是相對(duì)路徑失效。我在項(xiàng)目文件夾里寫(xiě)文檔圖片放在./docs/圖片/下Markdown 里寫(xiě)的也是相對(duì)路徑。結(jié)果某天我把整個(gè)docs目錄單獨(dú)復(fù)制出來(lái)圖片目錄層級(jí)動(dòng)了一下所有圖片全部失聯(lián)。第二類是絕對(duì)路徑帶來(lái)的“假正?！?。Typora 里直接插入本地圖片時(shí)如果設(shè)置不當(dāng)它會(huì)寫(xiě)入C:/Users/...這樣一串完整的路徑。在自己電腦上打開(kāi)當(dāng)然一切正常但文件一發(fā)出去對(duì)方電腦根本沒(méi)有這個(gè)路徑圖必炸。第三類是網(wǎng)絡(luò)圖片的突然消失。你在某平臺(tái)上復(fù)制了一段帶圖的內(nèi)容圖片鏈接來(lái)自那個(gè)平臺(tái)的圖床過(guò)半年人家清理存儲(chǔ)鏈接失效你的文檔里就留下一串空白占位符。所以“把圖片固定到文件里形成單一文件”這件事本質(zhì)上就是要改變 Markdown 的這種“引用外部資源”的行為讓圖片數(shù)據(jù)直接跟著文檔走。2. 先想清楚你到底是需要“單文件 Markdown”還是“單文件成品文檔”2.1 兩種“單一文件”的路徑選擇很多人在搜“圖片固定到文件中”這句話時(shí)心里的需求其實(shí)不完全一樣。我把它拆成兩種一種是希望.md源文件本身自帶圖片復(fù)制這一個(gè)文件到任何機(jī)器上用 Typora 打開(kāi)圖片照樣完整顯示。這是“純 Markdown 層面的單文件”。另一種是希望最終交付出去的是一個(gè)“不會(huì)碎”的文檔可以是.html也可以是.pdf。這種情況其實(shí)不需要?jiǎng)?Markdown 源文件直接導(dǎo)出時(shí)把圖片打包進(jìn)去就行。這兩條路我都走過(guò)也都在用因?yàn)樗鼈冞m用場(chǎng)景完全不同。如果你要把內(nèi)容繼續(xù)編輯、繼續(xù)迭代選第一種讓 Markdown 源文件永遠(yuǎn)不依賴外部圖片目錄。如果你只是要把最終成果發(fā)給別人看選第二種導(dǎo)入 HTML 或 PDF 是最穩(wěn)的。2.2 Typora 的圖片處理能力剛好覆蓋這兩條路Typora 本質(zhì)上是一款 Markdown 編輯器但它很聰明地把圖片處理做成了三層第一層是“插入時(shí)自動(dòng)管理”。你在 Typora 里拖一張圖片進(jìn)去或者從剪貼板粘貼截圖它會(huì)按你的偏好設(shè)置把圖片復(fù)制到某個(gè)磁盤(pán)目錄并在文檔里寫(xiě)入對(duì)應(yīng)的相對(duì)路徑。這是 Typora 默認(rèn)做得最多的一件事。第二層是“手動(dòng)內(nèi)嵌”。Typora 可以把一張圖片從外鏈轉(zhuǎn)換成 Base64 字符串直接以data:協(xié)議寫(xiě)進(jìn).md文件。這個(gè)操作是解決“單一 Markdown 文件”的核心。第三層是“導(dǎo)出時(shí)打包”。Typora 的文件菜單里提供導(dǎo)出 HTML、PDF、Word 等格式。這里的 HTML 導(dǎo)出有一個(gè)關(guān)鍵選項(xiàng)可以把圖片一并嵌入生成一個(gè)完全自包含的.html文件。這三層并不是互相孤立的關(guān)系。你把圖片內(nèi)嵌進(jìn).md以后導(dǎo)出的 HTML 自然也就包含圖片你選擇不內(nèi)嵌導(dǎo)出時(shí)只要勾對(duì)了選項(xiàng)HTML 也可以完成自動(dòng)打包。2.3 我的選型建議別盲目追求“單文件”在動(dòng)手之前我想先給一個(gè)基于實(shí)際經(jīng)驗(yàn)的判斷單文件并不是什么時(shí)候都值得追求。如果你的文檔只有幾百 KB配圖幾個(gè)截圖內(nèi)嵌完全沒(méi)有問(wèn)題文件體積增加不了多少換來(lái)的是極致的便攜性。但如果你的文檔動(dòng)不動(dòng)就有幾十張高分辨率截圖每個(gè)圖三五兆那內(nèi)嵌之后.md文件可能直接變成幾十上百兆Typora 打開(kāi)會(huì)卡源碼視圖里會(huì)滾出來(lái)一眼望不到頭的字符。更麻煩的是Git 這類版本管理工具對(duì)這種超大文件非常不友好每次改動(dòng)都會(huì)讓倉(cāng)庫(kù)體積膨脹。所以正確的做法不是“一律內(nèi)嵌”而是按場(chǎng)景選擇。我自己定了一個(gè)簡(jiǎn)單的標(biāo)準(zhǔn)文檔是給別人閱讀、或要長(zhǎng)期保存、或不允許有任何外部依賴的選擇內(nèi)嵌文檔是自己在項(xiàng)目中隨寫(xiě)隨改、還要提交到 Git 倉(cāng)庫(kù)的保留相對(duì)路徑加文件夾的方案不要強(qiáng)行內(nèi)嵌。3. 實(shí)操核心用 Typora 把圖片內(nèi)嵌進(jìn).md源文件3.1 原理先行Base64 到底是怎么把圖片“變”進(jìn)文本的要弄明白 Typora 內(nèi)嵌圖片是怎么做到的得先花兩分鐘認(rèn)識(shí)一下 Base64。圖片文件本質(zhì)上是二進(jìn)制數(shù)據(jù)是一串字節(jié)。Base64 是一種編碼方式它可以把二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成由英文字母、數(shù)字和一些符號(hào)組成的純文本。轉(zhuǎn)換后的文本可以直接拼在 URL 里格式是Typora 看到data:開(kāi)頭的地址就知道這是一張內(nèi)嵌圖片不需要去磁盤(pán)上找文件直接把這段字符串解碼渲染成圖片。這樣一來(lái)圖片數(shù)據(jù)就真真切切地住在 Markdown 文件內(nèi)部了。代價(jià)是文件變大。Base64 編碼會(huì)把 3 個(gè)字節(jié)變成 4 個(gè)字符加上各種開(kāi)銷整體體積大約膨脹三分之一。一張 1MB 的 PNG嵌入后大概會(huì)變成 1.37MB 左右的文本。3.2 得到內(nèi)嵌圖片的三個(gè)不同時(shí)機(jī)在 Typora 里我至少用過(guò)三種方式來(lái)達(dá)成內(nèi)嵌效果它們對(duì)應(yīng)不同的操作時(shí)機(jī)。方式一修改全局配置插入時(shí)直接內(nèi)嵌。在 Typora 的偏好設(shè)置里有一個(gè)“圖像”面板里面有“插入圖片時(shí)”的選項(xiàng)。如果把它設(shè)置成直接以 Base64 形式插入那么你拖進(jìn)去的每一張圖從一開(kāi)始就是以data:文本寫(xiě)在文檔里的。這個(gè)方式最省事但要注意它處理的是“以后新插入的圖片”已經(jīng)存在文檔里的外鏈圖片不會(huì)自動(dòng)轉(zhuǎn)換。而且全局設(shè)置會(huì)讓所有文檔都默認(rèn)內(nèi)嵌圖片如果你有大量文檔要走 Git 版本管理這種全局默認(rèn)未必合適。方式二選中圖片后手動(dòng)內(nèi)嵌。在編輯區(qū)域?qū)χ呀?jīng)插入的圖片點(diǎn)右鍵或者從菜單欄找到圖片相關(guān)的處理菜單一般會(huì)有“嵌入圖片”“將圖片轉(zhuǎn)為 Base64”之類的操作入口。執(zhí)行之后Typora 會(huì)把這張圖片從磁盤(pán)文件讀取出來(lái)轉(zhuǎn)成data:text覆蓋原來(lái)的外鏈引用。這個(gè)方式靈活只對(duì)你選中的圖片生效其他圖片保持原樣。方式三粘貼時(shí)直接以 Base64 形式粘貼。如果你手頭本來(lái)就是剪貼板里的截圖粘貼進(jìn) Typora 時(shí)可以在粘貼行為上做設(shè)置讓它直接把剪貼板里的圖像數(shù)據(jù)轉(zhuǎn)成 Base64而不是先存成磁盤(pán)文件再引用。適合頻繁插入截圖的筆記場(chǎng)景比如寫(xiě)操作手冊(cè)、記錄 Bug 復(fù)現(xiàn)步驟這類內(nèi)容。3.3 完整步驟從“帶文件夾的文檔”變成“真單文件”我舉一個(gè)完整的操作例子用我自己習(xí)慣的流程來(lái)說(shuō)。假設(shè)我寫(xiě)了一篇關(guān)于“某跨平臺(tái)系統(tǒng)的部署筆記”的 Markdown里面插了網(wǎng)絡(luò)拓?fù)鋱D、安裝界面截圖、命令行輸出截圖還從網(wǎng)上粘了一張參考圖。我現(xiàn)在的目標(biāo)是把所有圖片全部?jī)?nèi)嵌最終只交付一個(gè).md文件。第一步先檢查現(xiàn)有圖片的情況。打開(kāi) Typora 的偏好設(shè)置確認(rèn)“插入圖片時(shí)”的選項(xiàng)我通常選擇“復(fù)制圖片到當(dāng)前目錄下的 assets 文件夾”并且使用相對(duì)路徑。這樣做的原因是我保留該文件夾作為“未內(nèi)嵌狀態(tài)”的備份和恢復(fù)源同時(shí)也方便我反悔。第二步在文檔里逐張檢查圖片是否都能正常顯示。如果發(fā)現(xiàn)某張外鏈圖加載失敗先另存到本地重新拖進(jìn)文檔。千萬(wàn)不能在一堆裂圖的狀態(tài)下做內(nèi)嵌因?yàn)?Typora 對(duì)一張“加載不出來(lái)”的外部圖片很可能不會(huì)讀取到數(shù)據(jù)。第三步執(zhí)行內(nèi)嵌。選中要內(nèi)嵌的圖片我一般直接 CtrlA 全選文檔內(nèi)容然后在圖片菜單里選擇嵌入操作。Typora 會(huì)逐個(gè)把圖片轉(zhuǎn)成 Base64。這時(shí)候你如果切到源碼模式會(huì)看到原本./assets/xx.png的短路徑變成了一長(zhǎng)串data:image/png;base64,....的文本。第四步驗(yàn)證是否真正形成了單一文件。保存文檔然后在文件管理器里找一個(gè)新的空目錄只把這個(gè).md文件復(fù)制進(jìn)去斷網(wǎng)打開(kāi)圖片如果依然全部顯示說(shuō)明內(nèi)嵌成功。我習(xí)慣再用一個(gè)沒(méi)有 Typora 的環(huán)境做一次測(cè)試用其他 Markdown 閱讀器打開(kāi)比如某些 Web 端的 Markdown 解析器看能否顯示圖片。有一種情況要注意Typora 支持內(nèi)嵌圖片但并不是所有 Markdown 渲染器都會(huì)解析data:協(xié)議同一個(gè)文件在不同工具里表現(xiàn)未必一致這屬于工具差異不是你的操作問(wèn)題。第五步處理備份。Typora 內(nèi)嵌圖片時(shí)不會(huì)自動(dòng)刪除原來(lái)的 assets 文件夾里的源圖。我的習(xí)慣是確認(rèn)內(nèi)嵌成功并驗(yàn)證無(wú)問(wèn)題后如果確定后面不再需要單獨(dú)編輯圖片可以刪掉 assets 目錄但如果你還想著“以后要把圖片再?gòu)奈募锓蛛x出來(lái)”就先留著。這里我給一個(gè)勸告一旦源圖被刪想從內(nèi)嵌的 Base64 里把原始圖片精確地恢復(fù)出來(lái)非常折騰后面第三節(jié)我再詳細(xì)說(shuō)。3.4 操作中的細(xì)節(jié)與禁忌內(nèi)嵌操作本身很簡(jiǎn)單但我復(fù)盤(pán)后覺(jué)得有四個(gè)坑值得單獨(dú)拿出來(lái)說(shuō)。第一個(gè)坑是“忘了保存就直接關(guān)”。Typora 的內(nèi)嵌是在緩沖區(qū)里改文檔內(nèi)容如果你沒(méi)有保存.md文件操作不會(huì)落盤(pán)。我在早期經(jīng)常內(nèi)嵌完切出去干別的結(jié)果軟件閃退又重新打開(kāi)一次圖片還是老樣子白干。第二個(gè)坑是“全選內(nèi)嵌時(shí)把網(wǎng)絡(luò)圖片也選進(jìn)去了”。文檔里如果還掛著線上 URL 的圖片某些版本處理時(shí)可能會(huì)失敗或留下異常長(zhǎng)的空行。穩(wěn)妥的辦法是先檢查所有圖片都能正常顯示再統(tǒng)一內(nèi)嵌。第三個(gè)坑是“超級(jí)大的截圖直接往里塞”。系統(tǒng)里截一張 4K 屏幕的圖可能直接五六兆內(nèi)嵌之后文本體積爆炸。我處理這類圖的方法是先壓縮。用系統(tǒng)自帶的畫(huà)圖工具或者命令行工具把大圖壓到 1600px 左右寬度、PNG 轉(zhuǎn) JPG體積能減少 70% 以上再拖進(jìn) Typora。內(nèi)容清晰度和文件大小之間要自己拿捏。第四個(gè)坑是“對(duì)只讀文件做內(nèi)嵌”。如果.md文件被標(biāo)記為只讀或者放在某些有同步鎖的目錄里Typora 的內(nèi)嵌操作可能失敗提示沒(méi)有寫(xiě)入權(quán)限。先檢查文件屬性。4. 另一個(gè)出路導(dǎo)出為單一 HTML而不是一直糾結(jié) Markdown 源文件4.1 為什么導(dǎo)出 HTML 往往是最省心的交付方式先說(shuō)實(shí)話我做過(guò)很多次“把圖片內(nèi)嵌到 Markdown”之后最終發(fā)給別人的其實(shí)是一個(gè)導(dǎo)出的 HTML 文件。原因很簡(jiǎn)單Markdown 是給寫(xiě)作者用的格式但對(duì)于閱讀者而言HTML 才是真正通用的。只要對(duì)方有瀏覽器雙擊就能打開(kāi)排版、圖片、代碼高亮全都保留。Typora 的導(dǎo)出 HTML 功能里最重要的一個(gè)勾選項(xiàng)就是“將圖片嵌入 HTML”。勾選之后導(dǎo)出的 HTML 會(huì)把文檔里的所有本地圖片、剪貼板圖片統(tǒng)統(tǒng)轉(zhuǎn)換為 Base64 內(nèi)嵌進(jìn) HTML 文件。最終產(chǎn)物就是一個(gè)名副其實(shí)的單文件而且這個(gè)文件不依賴 Typora 環(huán)境任何設(shè)備用瀏覽器打開(kāi)都是完整的。4.2 導(dǎo)出的誤區(qū)其實(shí)你不需要先內(nèi)嵌 Markdown很多人以為要做 HTML 單文件就得先在 Markdown 里把圖片內(nèi)嵌其實(shí)不是。Typora 導(dǎo)出 HTML 時(shí)可以獨(dú)立處理圖片打包就算你的 Markdown 還是引用./assets/xxx.png導(dǎo)出時(shí)只要你勾選嵌入圖片的選項(xiàng)生成的 HTML 照樣會(huì)把圖片內(nèi)嵌進(jìn)去。也就是說(shuō)你完全可以保持 Markdown 源文件清爽的文件夾結(jié)構(gòu)只在導(dǎo)出環(huán)節(jié)生成一個(gè)“重裝版”的單文件成品。我實(shí)際工作里經(jīng)常這樣安排源文件放在項(xiàng)目里圖片用相對(duì)路徑管理方便維護(hù)和版本控制每次要發(fā)出去的版本用 Typora 導(dǎo)出一個(gè)內(nèi)嵌圖片的 HTML。源文件和交付物互不干擾。4.3 有哪些格式適合做“單一文件”交付Typora 的導(dǎo)出能力很全面。我篩選過(guò)一輪適合拿來(lái)做單一成品的有這么幾類格式圖片打包方式適合場(chǎng)景HTML勾選嵌入圖片后所有圖轉(zhuǎn) Base64 寫(xiě)進(jìn)一張 HTML跨平臺(tái)閱讀、發(fā)送鏈接、直接打開(kāi)PDF圖片直接繪制進(jìn)頁(yè)面打印、存檔、正式交付Worddocx圖片嵌入到 Word 內(nèi)部資源包對(duì)方需要二次編輯時(shí)PDF 和 Word 不涉及 Base64它們是把圖片作為內(nèi)嵌對(duì)象寫(xiě)進(jìn)文檔自身的封裝格式里所以天然就是單文件。如果你只是要“把圖片固定進(jìn)文件”選 PDF 其實(shí)比 HTML 更穩(wěn)因?yàn)檫B字體、排版都一起鎖死了。4.4 HTML 單文件的實(shí)際體驗(yàn)我做過(guò)一個(gè)內(nèi)部培訓(xùn)記錄大概三萬(wàn)字的 Markdown里面配了四十多張流程圖和截圖。直接內(nèi)嵌 Markdown 源文件之后文件到了 8MB 多Typora 打開(kāi)時(shí)偶爾有卡頓。后來(lái)我改用“源文件保持相對(duì)路徑導(dǎo)出 HTML 時(shí)內(nèi)嵌圖片”的做法導(dǎo)出的 HTML 也有 8MB但瀏覽器打開(kāi)非常流暢滾動(dòng)查看毫無(wú)壓力還支持搜索。發(fā)給同事以后不需要裝任何軟件也沒(méi)有出現(xiàn)圖片丟失。所以說(shuō)如果目標(biāo)只是“給別人一個(gè)完整的、不會(huì)裂圖的文檔”導(dǎo)出 HTML 單文件通常比“讓 Markdown 源文件自帶圖片”更合適也更輕量。兩者不沖突關(guān)鍵看你想把哪一側(cè)做成單文件是源頭還是交付物。5. 內(nèi)嵌之后的問(wèn)題體積、還原、版本管理的沖突5.1 體積膨脹Base64 不是免費(fèi)的內(nèi)嵌圖片最大的代價(jià)就是體積。估算方法并不復(fù)雜原始圖片大小 × 4/3再加上data:image/png;base64,這段前綴字符基本就是增加的字?jǐn)?shù)。換算到文件層面一個(gè)原本 500KB 的圖片內(nèi)嵌進(jìn).md后文件會(huì)增加 650KB 以上。我見(jiàn)過(guò)一個(gè)反面案例某開(kāi)發(fā)者把產(chǎn)品截圖直接貼在 Markdown 里十張截圖全是手機(jī)拍攝的幾 MB 照片內(nèi)嵌之后整個(gè).md文件沖到了 132MBTypora 打開(kāi)要十幾秒隨便敲一個(gè)字都要等一會(huì)。這種時(shí)候直接把圖片壓縮到合理尺寸再內(nèi)嵌效果要好很多。我的經(jīng)驗(yàn)閾值是整個(gè).md文件超過(guò) 20MB 就要認(rèn)真考慮是否值得超過(guò) 50MB基本不應(yīng)該用 Markdown 承載。5.2 內(nèi)嵌容易還原難有一件很多人沒(méi)意識(shí)到的事Typora 可以把磁盤(pán)圖片“嵌入”進(jìn)文檔但它并沒(méi)有提供一個(gè)對(duì)稱的、一鍵把內(nèi)嵌圖片重新還原成磁盤(pán)文件的按鈕。如果你想從已內(nèi)嵌的 Markdown 里把原始圖片摳出來(lái)一般的方法是復(fù)制data:開(kāi)頭的整段字符串然后手動(dòng)用工具解碼還原成二進(jìn)制文件。如果文檔里圖片很多這個(gè)過(guò)程是一場(chǎng)體力活。所以我總在兩個(gè)時(shí)間點(diǎn)做一個(gè)備份內(nèi)嵌之前保留原始的資產(chǎn)文件夾哪怕已經(jīng)內(nèi)嵌成功也不刪。萬(wàn)一后來(lái)發(fā)現(xiàn)某張圖需要交給設(shè)計(jì)師處理或者要拿原始大圖放到別的項(xiàng)目里還能找到源。5.3 Git 與版本管理單文件在這里不香如果你的文檔是放在 Git 倉(cāng)庫(kù)里的我強(qiáng)烈建議不要默認(rèn)內(nèi)嵌圖片至少不要內(nèi)嵌高頻變動(dòng)的圖片。原因很簡(jiǎn)單Markdown 是文本文件Git 可以精確到行做差異但 Base64 圖片是一整段無(wú)語(yǔ)義的長(zhǎng)字符哪怕你只把圖片縮了 1 個(gè)像素整段字符串都會(huì)大幅度變化Git 會(huì)把一整張圖的文本標(biāo)記為“全部改動(dòng)”。這意味著每一次改圖倉(cāng)庫(kù)歷史里就多塞一張圖片的完整文本倉(cāng)庫(kù)體積飛速膨脹diff 也幾乎失去可讀性。對(duì)這種情況我的建議很明確倉(cāng)庫(kù)里的 Markdown 用相對(duì)路徑加圖片文件夾管理發(fā)布出去的單文件文檔用導(dǎo)出 HTML 來(lái)做。兩頭各干各的不沖突。5.4 什么時(shí)候用內(nèi)嵌什么時(shí)候別用我整理了一張決策表基本可以覆蓋絕大多數(shù)情況場(chǎng)景推薦方案?jìng)€(gè)人知識(shí)庫(kù)筆記要長(zhǎng)期保存內(nèi)嵌成單一.md文件省去文件夾丟失的顧慮發(fā)給同事一條備忘錄帶幾張截圖內(nèi)嵌或?qū)С?HTML推薦 HTML項(xiàng)目倉(cāng)庫(kù)里的技術(shù)文檔相對(duì)路徑加資產(chǎn)文件夾不內(nèi)嵌文檔要正式對(duì)外發(fā)版導(dǎo)出 PDF文檔要?jiǎng)e人繼續(xù)編輯導(dǎo)出 Word圖片內(nèi)嵌大圖多、圖片質(zhì)量要求高先壓縮再?zèng)Q定是否內(nèi)嵌不推薦硬內(nèi)嵌大圖6. 常見(jiàn)問(wèn)題與排查技巧速查6.1 怎么判斷一張圖片到底是不是內(nèi)嵌的最直接的方法切到源碼模式看圖片代碼。開(kāi)頭是./xxx或/xxx就是外鏈開(kāi)頭是data:image/就是內(nèi)嵌。另外把.md文件用純文本工具打開(kāi)搜索data:image出現(xiàn)的位置也能定位。6.2 右鍵菜單里“嵌入圖片”是灰的怎么辦這個(gè)一般有兩種原因。一種是當(dāng)前圖片來(lái)自網(wǎng)絡(luò) URLTypora 無(wú)法讀取源文件數(shù)據(jù)嵌入功能自然不可用需要先把圖片下載到本地再重新拖進(jìn)文檔。另一種是當(dāng)前光標(biāo)不在圖片上先單擊選中圖片讓圖片周圍出現(xiàn)選區(qū)再喚起菜單。6.3 內(nèi)嵌后打開(kāi)文檔圖片變成一張空白圖大概率是你反復(fù)內(nèi)嵌過(guò)一張本來(lái)就內(nèi)嵌的圖片導(dǎo)致出現(xiàn)了嵌套的 Base64 文本或者文檔里存在損壞的剪貼板數(shù)據(jù)。處理方法是找到那一段損壞的data:地址刪掉整行圖片引用重新從磁盤(pán)插入原始圖片再做一次內(nèi)嵌。6.4 文檔里的圖當(dāng)時(shí)能顯示過(guò)幾天打開(kāi)裂了如果你確定沒(méi)有刪除任何文件先確認(rèn)是否移動(dòng)過(guò)整個(gè)文件夾或者從云盤(pán)拉了舊的.md回來(lái)。只要圖片是外鏈引用路徑變了就必裂。解決辦法要么把文件夾恢復(fù)原結(jié)構(gòu)要么干脆一不做二不休把圖片全內(nèi)嵌進(jìn)去一勞永逸。6.5 內(nèi)嵌后的文檔發(fā)給別人別人打開(kāi)還是裂圖先問(wèn)一句你發(fā)的是.md文件本身還是發(fā)到某些在線 Markdown 平臺(tái)部分平臺(tái)的 Markdown 渲染器出于安全原因不會(huì)執(zhí)行data:協(xié)議所以圖顯示不出來(lái)。這種情況優(yōu)先導(dǎo)出 PDF 或 HTML 再發(fā)不要在格式上死磕。6.6 Typora 打開(kāi)超大的內(nèi)嵌文件卡頓怎么辦建議先減小圖片或者把大文件拆成多個(gè)小文檔。如果你已經(jīng)內(nèi)嵌完了才發(fā)現(xiàn)卡頓不想重新折騰可以把該data:圖片段剪切出來(lái)臨時(shí)另存為.txt等要用時(shí)再貼回去——雖然治標(biāo)不治本但能救急。6.7 內(nèi)嵌文件在手機(jī)上能用 Typora 打開(kāi)嗎Typora 在移動(dòng)端體驗(yàn)有限而且內(nèi)嵌大文件時(shí)手機(jī)端解碼更慢。真要在手機(jī)上讀這類單文件導(dǎo)出一個(gè) HTML 放進(jìn)云端或本地閱讀器里體驗(yàn)穩(wěn)定得多。7. 最后說(shuō)點(diǎn)我個(gè)人的操作習(xí)慣說(shuō)了這么多回到“Typora 編輯 Markdown 文件將圖片固定到文件中形成單一文件”這個(gè)標(biāo)題本身。我目前的固定動(dòng)作是日常寫(xiě)本地筆記插入圖片時(shí)把 Typora 設(shè)置為復(fù)制到本地資產(chǎn)文件夾并寫(xiě)相對(duì)路徑保存成普通結(jié)構(gòu)等一篇內(nèi)容定稿后再全選圖片批量?jī)?nèi)嵌驗(yàn)證無(wú)裂圖后收尾。遇到需要發(fā)送的文檔我不直接發(fā).md除非對(duì)方也是 Typora 重度用戶否則一律導(dǎo)出一個(gè)內(nèi)嵌圖片的 HTML。這套流程兼顧了編輯期的輕量、版本管理的干凈和交付期的穩(wěn)定。有一個(gè)小技巧值得推薦無(wú)論最終走內(nèi)嵌還是導(dǎo)出 HTML我建議你在文檔頂部寫(xiě)一行“本文檔圖片已內(nèi)嵌/未內(nèi)嵌”的標(biāo)記。聽(tīng)起來(lái)傻但半年后你自己回來(lái)看都會(huì)感謝這句標(biāo)注。文件管理和內(nèi)容維護(hù)拼的就是這種細(xì)節(jié)。