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,覆盖为一下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"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项,以下是我的配置:

1
2
3
4
5
6
7
8
9
10
11
{
//
"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,修改其内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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;
}

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

作者

Yida

发布于

2022-01-23

更新于

2022-02-11

许可协议

评论