原生 Markdown 高仿 Notion 显示效果(甚至更优)

在 VS Code 中给 Markdown 增加排版自由度

VS Code 插件选择Instant Markdown,在浏览器 preview,因为 vscode 的侧栏显示 style 有限制。

Install & Configuration

如果你想偷懒:https://github.com/Benature/vscode-instant-markdown

为了加入自己的 css,对插件做点加工(手脚)

  1. 前往插件所在文件夹
    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
  1. 新建一个public文件夹,把自己的 css 文件放进去
1
.
2
├── public
3
│   └── bootstrap
4
│   │   ├── bootstrap.min.css
5
│   │   └── ...
6
│   └── muyi.css
7
├── ...
8
...
  1. index.html文件内假如对自定义 css 的引用(或者在 md 文件内引用也可以)
1
<link rel="stylesheet" href="bootstrap.min.css">
2
<link rel="stylesheet" href="muyi.css">

到这里还不够,否则在网页打开 console 会看到自定义的 css 是 404 的

  1. 把文件加到 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 EnhancedLive Server两个插件组合使用,配置 css 的引用会方便些,但是相对 Instance Markdown 的劣势在于不能实时 preview,需要保存先。因为目前的 MPE 的 open in browser 不是 live 的。