给hexo的jsimple主题添加代码高亮
周末在家无所事事,想起来博客代码块的高亮支持不是很好,于是根据作者推荐的hipaper去get。
对比了Hipaper和Jsimple老半天有几点发现。
- Jsimple使用ejs模板
- Hipaper使用ejs模板,css采用stylus框架。<之前只听说过less和sass,又涨姿势了
~>
在浏览器端f12审核元素发现两个模板生成的html元素有些区别。然后就花了大量时间去找hexo是怎么把代码块自动解析成对应的html代码的。
后来在hexo群里求助得知由hexo自带highlight插件生成。这位热心的大神顺手帮我搞了高亮的css代码,之后也在jsimple仓库pr了代码。
得到css后依据自己的博客进行些小改动,添加了night版。然后愉快的给博客添加了代码高亮。
注意配置文件这里:
1 | highlight: |
修改之后生效需要执行
1 | //清除缓存文件 (db.json) 和已生成的静态文件 (public)。 |
这里贴出代码仅供参考:自己改了些东西,不知道适不适用
1 | .markdown-body code,.markdown-body tt |
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号
hexo折腾-系列文章:
给博客添加个人域名
给hexo的jsimple主题添加代码高亮
给博客添加网易云跟帖评论
给博客添加https支持
博客添加gitment评论
给博客添加APlayer音乐播放器^-^
hexo 使用说明
Lozad.js学习使用
snowfall.jquery.js实现樱花飘落效果
Hexo博客备份—妈妈再也不用担心你使用hexo写博客
github博客迁移至coding并提交百度收录
博客小人
live2d-看板娘小埋
使用disqus评论
anime.js实现logo动画
OwO-可爱的js表情符号插件
给博客添加图集展示
评论系统之来必力
添加系列文章功能
给Hexo博客添加Mathjax数学公式支持
给博客添加上一篇下一篇功能
给博客添加文章目录
hexo评论系统之valine快速使用
快速开发属于自己的APP-FusionApp
miccall主题及html5up站点推荐
CSS+SVG路径描边特效
网页看板娘-Live2d蕾姆
还没好图床的小伙伴看过来,微博是个好图床!