Benature
0%

原生 Markdown 高仿 Notion 显示效果（甚至更优）

Posted on Edited on

在 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
3
4
5
6
7
8
9
10
11
12
13
.
├── README.md
├── index.html
├── jsconfig.json
├── node_modules
│   └── ...
├── out
│   └── src
│       ├── extension.js
│       └── server.js
├── package-lock.json
├── package.json
└── vscode-instant-markdown.gif
  1. 新建一个public文件夹，把自己的 css 文件放进去
1
2
3
4
5
6
7
8
.
├── public
│   └── bootstrap
│   │   ├── bootstrap.min.css
│   │   └── ...
│   └── muyi.css
├── ...
...
  1. 在index.html文件内假如对自定义 css 的引用（或者在 md 文件内引用也可以）
1
2
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="muyi.css">

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

  1. 把文件加到 server 里去

out/src/server.js

1
2
3
4
5
6
app.get('/muyi.css', function (req, res) {
    res.sendfile(path.resolve(__dirname, '..', '..', 'public', 'muyi.css'));
});
app.get('/bootstrap.min.css', function (req, res) {
    res.sendfile(path.resolve(__dirname, '..', '..', 'public', 'bootstrap', 'bootstrap.min.css'));
});

混入到其他app.get的代码里去，配置完成。

Usage

多列显示

1
2
3
4
5
6
7
<div class="d-flex flex-row justify-content-between"><div>

第一列
</div><div>

第二列
</div></div>

这里的 class 用的是 bootstrap 的。

Notion 原生对分列显示是比较 limited 的，比如分列后不能再仅针对某一行分列，只能在整一列的基础上右边再加一列。用 html 的不断 div 嵌套可以无限分列分行。

Toggle List

1
2
3
4
5
<b><details open><summary>显示标题</summary></b>

隐藏内容
details 节点内的 open 使得 Toggle List 默认打开
</details>

Callout

选择了 Hexo 内的 note 类装饰来代替

1
2
3
4
5
6
7
<div class="note b-green">

### notion-like callout

- list 1
- list 2
</div>

需要配置相应的 css，或者把插件原生的 css 换了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.note {
    border-top-color: rgb(238, 227, 207);
    border-right-color: rgb(238, 227, 207);
    border-bottom-color: rgb(238, 227, 207);
    border-left-color: rgb(238, 227, 207);

    margin-bottom: 20px;
    padding: 15px;
    position: relative;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;

}
.note p{
    margin-bottom:0;
}
.b-green {
    border-left-color: #5cb85c;
}
.b-blue {
    border-left-color: #428bca;
}

还有一种方法是用 Mardown Preview Enhanced 和 Live Server两个插件组合使用，配置 css 的引用会方便些，但是相对 Instance Markdown 的劣势在于不能实时 preview，需要保存先。因为目前的 MPE 的 open in browser 不是 live 的。