用 editor.md 做markdown 内容展示时,根据官方文档需要引入多个js、css文件,但展示效果挺丑的,可以用以下方法进行美化。
使用下面方法,editor.md的js、css文件可以都删除。
如果你喜欢 GitHub Markdown 的展示效果,可以参考仓库 github-markdown-css 进行美化。
这个仓库是复制的 GitHub Markdown 的样式的精简的 CSS 代码。
从上面仓库中下载并导入 github-markdown.css
文件并将 `.markdown-body
类添加到呈现的 Markdown 的容器中并为其设置宽度。 GitHub 使用 980px 宽度和 45px 填充,移动设备使用 15px 填充。
这个仓库中提供了 3 种主题:
github-markdown.css
:(默认)通过 @media (prefers-color-scheme)
自动在明暗之间切换。
github-markdown-light.css
:浅色主题。
github-markdown-dark.css
:深色主题。
注意:由于该样式都是以
.markdown-body
开头,因此在视图中须给外层div加这个类名
代码高亮的插件有很多,prismjs是个不错的选择,代码体积也小
在官网选择要支持的语言和展示样式,然后下载相应的js与css到本地,在视图中引用
提供一个别人打包好的 prism 项目
Xcnte/Code-Prettify-for-typecho
这是对方用作 typecho 博客程序的,但稍加修改可以在自己项目中使用。该项目提供了多种Mac风格高亮主题,挺不错的。具体参考上述项目地址。
[1]
github-markdown-css: https://github.com/sindresorhus/github-markdown-css[2]
prismjs: https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript[3]
Xcnte/Code-Prettify-for-typecho: https://github.com/Xcnte/Code-Prettify-for-typecho