vscode打造笔记系统

foam + markdown all in one为核心的双链笔记

安装插件

---

• foam.foam-vscode
• yzhang.markdown all in one
• telesoho.vscode-markdown-paste-image
• goessner.mdmath
• DavidAnson.vscode-markdownlint (optional)
• Spades.vs-picgo (optional)

首先按照foam 的教程创建一个工作区。
注意 foam 里面推荐的 ban.spellright 建议不装，不适合中文用户。mushan.vscode-paste-image 也不装，换一个 telesoho.vscode-markdown-paste-image 个人感觉更好用。

• markdown all in one - 不多介绍。
• foam - 提供类似双链笔记，日记管理等更多用法
• paste image - 主要功能：粘贴图片到markdown。在 mushan.vscode-paste-image 的基础上扩展了许多功能。
• mdmath - 更棒的数学支持，需关闭 markdown all in one 中原有的数学支持
• markdownlint - 这个是 markdown 的语法检查，规则见markdownlint rule，但是里面有几条个人觉得过于严格，后面章节会介绍关闭小部分规则。
• picgo - 图床，不多介绍。

插件设置

---

首先修改工作区的设置，打开 .vscode/settings.json，覆盖为一下内容。

{
  "editor.minimap.enabled": false,
  "editor.wrappingIndent": "indent",
  "editor.overviewRulerBorder": false,
  "editor.lineHeight": 24,
  "[markdown]": {
    "editor.quickSuggestions": true
  },
  "files.exclude": {
    "**/node_modules": true
  },
  "files.watcherExclude": {
    "**/node_modules": true
  },
  "foam.edit.linkReferenceDefinitions": "off",
  "foam.openDailyNote.directory": "journal",
  "foam.openDailyNote.titleFormat": "fullDate",
  "git.enableSmartCommit": true,
  "git.postCommitCommand": "sync",
  "markdown.preview.breaks": true,
  "markdown.styles": ["assets/css/style.css"],
  "MarkdownPaste.path": "${workspaceRoot}/attachments"
}

然后全局设置ctrl+','里面打开markdown all in one，关闭 basic math support。
打开markdownlint中的config项，以下是我的配置:

{
    // 
    "markdownlint.config": {
        "siblings_only": true, // heading duplication is allowed for non-sibling headings 
        "MD012": false, // allow multiple consecutive blank lines
        "MD013": false, // allow Line length > 80 characters
        "MD033": {
            "allowed_elements": ["span", "div"]
        }
    },
}

markdown样式

---

foam里面附的assets/css/style.scss是markdown样式，可以自己改改。但是注意scss不能直接用，所以复制一份改名为style.css，修改其内容为：

.markdown-body {
  max-width: 800px;
  font-size: 16px;
}

.markdown-body h2 {
  color: #ffb666;  
}

.markdown-body h3 {
  color: #6495ed;
}

.markdown-body h4 {
  color: #ff8a9d
}

.markdown-body p {
  font-size: 16px;
  line-height: 1.9em;
  margin-bottom: 1.2em;
}

.markdown-body li {
  line-height: 1.9em;
}

input.task-list-item-checkbox {
  margin-right: 4px;
}

效果为个人喜欢，读者可根据自己喜好修改。上面样式的效果为：