19 基于.NetCore开发博客项目 StarBlog - Markdown渲染方案探索( 二 ) _生活百科

安装后有三个文件

github-markdown.css: (默认) 通过 @media (prefers-color-scheme) 实现自动切换亮色/暗色主题
github-markdown-light.css: 亮色主题
github-markdown-dark.css: 暗色主题

官网还有一句话，但我不知道怎么自己生成，难道要我去github扒css下来？

You may know that now GitHub supports more than 2 themes including dark_dimmed, dark_high_contrast and colorblind variants. If you want to try these themes, you can generate them on your own!

安装yarn add github-markdown-css引入<link rel="stylesheet" href="https://www.huyubaike.com/biancheng/~/lib/github-markdown-css/github-markdown-light.css">使用<div class="markdown-body">@Html.Raw(Model.ContentHtml)</div>效果确实有GitHub内味了，但还没代码高亮

19 基于.NetCore开发博客项目 StarBlog - Markdown渲染方案探索

文章插图
代码高亮目前使用 highlight.js 包，官网： https://www.npmjs.com/package/highlight.js
有很多其他的工具，不展开了，用这个足够了~
下载要在网页上直接用没办法通过安装NPM包的方式，只能通过网址下载： https://highlightjs.org/download/
如果不想下载的话可以用CDN，但就只能支持部分语言高亮。
里面有好多种语言，竟然没全选按钮，一个个选太麻烦了，我写了个全选脚本，复制到浏览器控制台执行就能全选，然后下载。
document.querySelectorAll('input').forEach( item => {if(item.getAttribute('type')==='checkbox') item.checked=true})引入下载后把zip解压放到 wwwroot/lib 下

<link rel="stylesheet" href="https://www.huyubaike.com/biancheng/~/lib/highlight/styles/default.min.css"><script src="https://www.huyubaike.com/biancheng/~/lib/highlight/highlight.min.js"></script><script>hljs.highlightAll();</script>

或者不下载，直接使用 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"><script src="http://shimg.jingyanzongjie.com/230726/233K35303-2.jpg"></script><script>hljs.highlightAll();</script>

效果有了代码高亮，一下就不一样了