MarkDown 内容网页展示美化方法

用 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风格高亮主题，挺不错的。具体参考上述项目地址。

引用链接

[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