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

2023-10-19 生活百科

效果确实有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://img.zhejianglong.com/231019/024Q263V-2.jpg"></script><script>hljs.highlightAll();</script>

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

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

文章插图
还有很多其他主题，styles 目录下很多，引入css的时候自行选择即可
我来换个深色的主题看看

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

文章插图
系列文章

基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？
基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目
基于.NetCore开发博客项目 StarBlog - (3) 模型设计
基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示
基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入
基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计
基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能
基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
基于.NetCore开发博客项目 StarBlog - (15) 生成随机尺寸图片
基于.NetCore开发博客项目 StarBlog - (16) 一些新功能 (监控/统计/配置/初始化)
基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片
基于.NetCore开发博客项目 StarBlog - (18) 实现本地Typora文章打包上传
基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索

参考资料

JavaScript解析和渲染Markdown - https://www.cnblogs.com/makalochen/p/14464519.html#5117019

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

推荐阅读

上一篇：原神啊哈什么上钩了成就怎么达成

下一篇：golang中的锁竞争问题