用 VSCode 编写 Markdown

用 VSCode 编写 Markdown

1. 环境配置

1.1. 安装 VSCode 插件

在 VSCode 中依次搜索并安装以下插件：

  1. Markdown All in One - 实现一些基础的 Markdown 编写体验，比如快捷键、列表编辑、自动生成目录等等
  2. Markdown Preview Enhanced - 实现 github 风格的预览、支持导出为 HTML、PDF 等
  3. markdownlint - Markdown 语法提示、智能纠错等
  4. Markdown Image - Markdown 图床插件

1.2. 安装 node.js

直接上 Node.js 官网 下载安装即可，安装过程也非常简单，直接无脑一直下一步就行。

1.3. 下载 mdimguploader 脚本

下载 mdimguploader.js 文件，并将其保存到 C:\Users\你的用户名\AppData\Roaming\Code\User 目录下。

打开 mdimguploader.js 文件，修改全局变量 evn 的值：

图 15

1.4. 配置 VSCode

  1. 打开 VSCode，Ctrl + Shift + P 打开 VSCode 的命令搜索框，在搜索框中输入 打开设置 (json)，回车

    图 14

  2. 将以下设置，添加/更新到现有的设置当中（其中 markdown-image.DIY.path 这一项的配置需要注意保持和 mdimguploader.js 文件的路径一致）

    {
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "markdown-image.base.codeType": "HTML",
    "markdown-image.base.imageWidth": 768,
    "markdown-image.base.uploadMethod": "自定义",
    "markdown-image.DIY.path": "C:\\Users\\你的用户名\\AppData\\Roaming\\Code\\User\\mdimguploader.js",
    "markdown-preview-enhanced.automaticallyShowPreviewOfMarkdownBeingEdited": true,
    "markdown-preview-enhanced.previewTheme": "github-light.css",
    "markdownlint.config": {
        "MD033": false,
        "MD041": false,
        "MD045": false
    }
}

2. 用 VSCode 编写 Markdown

在完成以上安装、配置之后，就可以愉快地在 VSCode 中编写 Markdown 文档啦 ~

2.1. Tips

2.1.1. 查看所有快捷键

Ctrl + K Ctrl + S 打开 键盘快捷方式 页面，在搜索框中输入 markdown 关键字，就可以看到所有跟 markdown 相关的快捷键啦。可以看到在 markdown 中插入图片的默认快捷方式是 Shift + Alt + V

图 16

此外 Markdown Image 插件，支持直接从粘贴板中复制图片，也可以从本地资源管理器中复制图片或 Gif 再粘贴到 Markdown 文档中

2.1.2. 更丰富的文档格式

想要来个 高亮？或者想要写个 旁注？

除 Markdown 的标准语法外，目前所有其它允许在 Markdown 中使用的 HTML 标签如下：

  • <mark>高亮</mark> - 高亮
  • <small>旁注</small> - 旁注
  • <sub>下标</sub> - 下标
  • <sup>上标</sup> - 上标
  • <h1>大标题</h1> - 只允许用于文档顶部作为文档标题
  • <img src="xxx"/> - Markdown Image 自动生成的图片标签
  • $ 数学公式 $ 写法

为了便于后续文档维护，不建议过多的使用 HTML 标签，包括在顶部定义 style 标签等等
Markdown 本身应该更专注于文档内容的编写……

https://www.bilibili.com/read/cv6632291/ 插件使用方法

  1. 有序列表：采用 1. 2. 3.的形式
    • 无序列表：采用前面加* - +的形式
    • 无序列表：采用前面加* - +的形式
  • PS：符号与符号之间，文字与符号之间必须有空格

插件 Foam 球型形狀

CS样式设置，markdown

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview {
    font-family: '等距更纱黑体 SC';
}

html body code {
    font-family: '等距更纱黑体 SC' !important;
}

html body a code {
    color: #08c;
}

html body blockquote code {
    background-color: #d6d6d6;
}

html body mark code {
    background-color: #cccc00;
}

img {
    filter: drop-shadow(1px 2px 4px gray);
}

插入片段方法

{
    // Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //   "console.log('$1');",
    //   "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "HTML element": {
        "prefix": "htmlel",
        "body": [
            "<${1:mark}>$2</${1:mark}>$0"
        ],
        "description": "HTML element"
    },
    "fenced codeblock": {
        "prefix": "codeblock",
        "body": [
            "```${1|ASP.NET,aspx,aspx-vb,bash,bat,batch,Batchfile,C#,C++,CMake,Containerfile,cpp,csharp,CSS,CSV,Dockerfile,dosbatch,Erlang,F#,fsharp,Git Config,gitconfig,Go,golang,Groovy,HTML,Java,JavaScript,js,JSON,Kotlin,Less,less-css,Markdown,Maven POM,node,NPM Config,obj-c,obj-c++,objc,objc++,Objective-C,Objective-C++,PHP,plain text,PowerShell,pwsh,Python,regex,regexp,Regular Expression,Ruby,SCSS,sh,Shell,shell-script,SQL,SVG,Swift,Text,ts,TSQL,TypeScript,vb .net,vb.net,VBA,VBScript,visual basic,Visual Basic .NET,Vue,winbatch,xhtml,XML,YAML,yml|}",
            "$0",
            "```"
        ],
        "description": "fenced codeblock"
    }
}

{
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one",
        "editor.quickSuggestions": {
            "comments": "off",
            "other": "on",
            "strings": "off"
        }
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.fontFamily": "'等距更纱黑体 SC', 'Segoe UI Emoji'",
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "boundary",
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "explorer.confirmDelete": false,
    "extensions.ignoreRecommendations": true,
    "files.autoGuessEncoding": true,
    "git.allowForcePush": true,
    "git.enabled": false,
    "git.enableSmartCommit": true,
    "markdown-preview-enhanced.previewTheme": "github-light.css",
    "markdownlint.config": {
        "MD033": false,
        "MD041": false,
        "MD045": false
    },
    "security.workspace.trust.enabled": false,
    "workbench.colorTheme": "Default Light+",
    "workbench.editor.untitled.hint": "hidden",
    "workbench.editor.untitled.labelFormat": "name"
}
posted @ 2024-04-22 17:28  SDdemon  阅读(12)  评论(0)  编辑  收藏  举报