用 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 填充。
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
<article class="markdown-body">
<h1>Unicorns</h1>
<p>All the things</p>
</article>
这个仓库中提供了 3 种主题：
github-markdown.css：（默认）通过 @media (prefers-color-scheme) 自动在明暗之间切换。
github-markdown-light.css：浅色主题。
github-markdown-dark.css ：深色主题。
注意：由于该样式都是以
.markdown-body开头，因此在视图中须给外层div加这个类名
<div class="markdown-body">
{!! $article->content !!}
</div>方法二：代码高亮
代码高亮的插件有很多,prismjs是个不错的选择，代码体积也小
在官网选择要支持的语言和展示样式，然后下载相应的js与css到本地，在视图中引用
<link rel="stylesheet" href="/prism/prism.css">
<script src=/prism/prism.js></script>提供一个别人打包好的 prism 项目
Xcnte/Code-Prettify-for-typecho
这是对方用作 typecho 博客程序的，但稍加修改可以在自己项目中使用。该项目提供了多种Mac风格高亮主题，挺不错的。具体参考上述项目地址。
声明：
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。