在 VS Code 中给 Markdown 增加排版自由度
VS Code 插件选择Instant Markdown，在浏览器 preview，因为 vscode 的侧栏显示 style 有限制。
Install & Configuration
如果你想偷懒：https://github.com/Benature/vscode-instant-markdown
为了加入自己的 css，对插件做点加工（手脚）：
- 前往插件所在文件夹
eg: mac 下路径：/Users/benature/.vscode/extensions/dbankier.vscode-instant-markdown-1.4.4
原本的结构目录是
1 | . |
2 | ├── README.md |
3 | ├── index.html |
4 | ├── jsconfig.json |
5 | ├── node_modules |
6 | │ └── ... |
7 | ├── out |
8 | │ └── src |
9 | │ ├── extension.js |
10 | │ └── server.js |
11 | ├── package-lock.json |
12 | ├── package.json |
13 | └── vscode-instant-markdown.gif |
- 新建一个
public文件夹，把自己的 css 文件放进去
1 | . |
2 | ├── public |
3 | │ └── bootstrap |
4 | │ │ ├── bootstrap.min.css |
5 | │ │ └── ... |
6 | │ └── muyi.css |
7 | ├── ... |
8 | ... |
- 在
index.html文件内假如对自定义 css 的引用（或者在 md 文件内引用也可以）
1 | <link rel="stylesheet" href="bootstrap.min.css"> |
2 | <link rel="stylesheet" href="muyi.css"> |
到这里还不够，否则在网页打开 console 会看到自定义的 css 是 404 的
- 把文件加到 server 里去
out/src/server.js
1 | app.get('/muyi.css', function (req, res) { |
2 | res.sendfile(path.resolve(__dirname, '..', '..', 'public', 'muyi.css')); |
3 | }); |
4 | app.get('/bootstrap.min.css', function (req, res) { |
5 | res.sendfile(path.resolve(__dirname, '..', '..', 'public', 'bootstrap', 'bootstrap.min.css')); |
6 | }); |
混入到其他app.get的代码里去，配置完成。
Usage
多列显示
1 | <div class="d-flex flex-row justify-content-between"><div> |
2 | |
3 | 第一列 |
4 | </div><div> |
5 | |
6 | 第二列 |
7 | </div></div> |
这里的 class 用的是 bootstrap 的。
Notion 原生对分列显示是比较 limited 的，比如分列后不能再仅针对某一行分列，只能在整一列的基础上右边再加一列。用 html 的不断 div 嵌套可以无限分列分行。
Toggle List
1 | <b><details open><summary>显示标题</summary></b> |
2 | |
3 | 隐藏内容 |
4 | details 节点内的 open 使得 Toggle List 默认打开 |
5 | </details> |
Callout
选择了 Hexo 内的 note 类装饰来代替
1 | <div class="note b-green"> |
2 | |
3 | ### notion-like callout |
4 | |
5 | - list 1 |
6 | - list 2 |
7 | </div> |
需要配置相应的 css，或者把插件原生的 css 换了
1 | .note { |
2 | border-top-color: rgb(238, 227, 207); |
3 | border-right-color: rgb(238, 227, 207); |
4 | border-bottom-color: rgb(238, 227, 207); |
5 | border-left-color: rgb(238, 227, 207); |
6 | |
7 | margin-bottom: 20px; |
8 | padding: 15px; |
9 | position: relative; |
10 | border: 1px solid #eee; |
11 | border-left-width: 5px; |
12 | border-radius: 3px; |
13 | |
14 | } |
15 | .note p{ |
16 | margin-bottom:0; |
17 | } |
18 | .b-green { |
19 | border-left-color: #5cb85c; |
20 | } |
21 | .b-blue { |
22 | border-left-color: #428bca; |
23 | } |
还有一种方法是用 Mardown Preview Enhanced 和 Live Server两个插件组合使用，配置 css 的引用会方便些，但是相对 Instance Markdown 的劣势在于不能实时 preview，需要保存先。因为目前的 MPE 的 open in browser 不是 live 的。