vscodemarkdown預覽

一、vscodemarkdown預覽不對其

vscodemarkdown預覽功能可以方便地在 vscode 編輯器中查看 markdown 文件的效果，並且具有實時更新的特點。但是在使用中，由於不同的編譯器解析 markdown 文件的方式不同，有時候預覽的效果與實際情況可能存在偏差。如何解決這個問題呢？

可以使用視圖的右上角的“打開預覽”按鈕，切換預覽的方式進行比較，如果你使用的是 vscode 內置的 markdown 渲染器，則可以嘗試使用第三方的 markdown 渲染器替代它。

{
    "markdown.preview.sideBySide": true,
    "markdown.preview.scrollEditorWithPreview": true,
    "markdown.preview.scrollPreviewWithEditor": true
}

二、vscodemarkdown實時預覽

vscodemarkdown 的實時預覽是非常強大的，無需保存就可以看到 markdown 文檔的效果，這對我們的編寫和調試都非常方便。同時，也降低了閱讀和理解 markdown 的難度。

在 vscode 編輯器的默認設置中，實時預覽可以通過從視圖菜單中的“切換實時預覽”或使用 vscode 命令面板中的“markdown: 切換實時預覽”來啟用。當打開實時預覽時，你可以直接編輯 markdown 文件，預覽窗口中將自動更新顯示你所做的更改。

{
    "markdown.preview.autoshowPreviewToSide": true,
    "markdown.preview.autoReveal": false,
    "markdown.preview.breaks": true
}

三、vscodemarkdown插件

vscodemarkdown 插件可以極大地擴展 vscode 的 markdown 功能，例如語法高亮、目錄構建、圖表繪製、數學公式渲染等等。這些插件可以幫助程序員們更高效和舒適地編寫 markdown 文件。

下面是一些常用的 vscodemarkdown 插件：

• Markdown All in One
• Markdown Preview Enhanced
• Markdown Mermaid
• Markdown TOC
• Markdown PDF

四、vscodemarkdown轉pdf

vscodemarkdown 轉 pdf 可以幫助我們將 markdown 文件轉換為 pdf 文件，使之更好的輸出或分享。不過，有時候在進行轉換的時候可能會遇到麻煩，需要使用特定的編寫和渲染方法。

下面是一個示例，使用以下yaml部分配置文件可以使 markdown-pdf 插件更準確地渲染 pdf：

{
    “markdown-pdf”:{
        “preferredDPI”:72,
        “preProcessMd”:false,
        “paperBorder”: “1cm”,
        “paperWidth”: “8.27in”,
        “paperHeight”: “11.69in”,
        “chromePath”: null,
        “configPath”: null,
        “timeout”: 10000,
        ...
    }
}

五、vscodemarkdown粘貼圖片

在 markdown 文件中添加圖片時，我們可以使用網址鏈接，也可以直接拖放圖片到 markdown 文件中，還可以使用剪貼板中的圖片。

vscodemarkdown 對於使用剪貼板的方式提供了支持。只需複製圖像，然後在 markdown 文件中使用 Ctrl+v 粘貼即可。你可以在資源管理器中查找剪貼板上的圖像並將其添加到 markdown 文件中，也可以在編輯器中插入剪貼板上的圖像。

![cut_image.png](data:image/png;base64,iVBORw0KG...)

六、vscodemarkdown轉pdf報錯

當我們使用 vscodemarkdown 插件將 markdown 文件轉換為 pdf 時，有時會因為不同的環境、插件和設置出現報錯。對於報錯信息，我們可以通過查看 vscode 控制台、系統日誌和 markdown-pdf 日誌等信息中來確定問題所在。

下面是一個解決報錯的示例，我們可以使用以下配置文件讓兩個模塊之間的版本匹配，從而解決 pdf 轉換的兼容性問題：

{
    “markdown-pdf”:{
        “remarkable”: {
            “html”: true,
            “typographer”: true,
            “quotes”: “”””””
        },
        ...
    }
}

七、vscodemarkdown流程圖

流程圖可以使得文檔更易於閱讀和理解。使用 vscodemarkdown，我們可以使用以下代碼，在 markdown 文件中嵌入流程圖：

```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```