markdown文档格式自定义

229 阅读1分钟

markdown样式调整

需要更改markdown的样式,又不想自己写。在网上找到一个别人写好的第三封类库。 30+ 款 Markdown 预览主题,包括 Typo.cssVueBearLark 等风格,适用于 MWeb、Typora 等笔记软件。

在线预览所有主题

image.png

github地址

1 下载并编译

git clone 后

npm install

在线预览
npm run watch src/themes/mweb-default.scss
访问: http://localhost:3000

预览+编辑
npm run typora-watch src/themes/mweb-indigo.scss
预览访问: http://localhost:3005
编译后在文件夹static中找到最终的结果typora.css文件。

2 嵌入自己的项目中

我的项目是less方式,在最外层是根元素 .

其中markdown代表markdown的元素,由marked.js生成。
<div class="out-html">
   <markdown></markdown>
</div> 

.out-html{
// 在这里拷贝上边生成的css文件内容,稍作更改,如.body{} 更改为 {}
}

至此,引入结束。

3 如果第1步中样式没有符合的,也可以自己自定义。具体方法可以参考文档。

自定义主题参考说明