通过prism.js实现Typecho代码语法高亮

通过prism.js实现Typecho代码语法高亮

Laoyao
2020-07-14 / 0 评论 / 620 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年10月03日,已超过600天没有更新,若内容或图片失效,请留言反馈。

实现方法
  进入prism.js官网的下载页面,Compression level一般选Minified version;Themes根据自己喜好选择;Languages选要用的就好了;全选的话js文件有320KB+,比较大;Plugins按需选择,全选的多个50KB左右。
2020-07-14T02:29:31.png
都选好了就可以下载js和css文件了。
2020-07-14T02:30:56.png
可以将下载好的js和css文件上传到Typecho的主题目录,即“usr/themes/主题名”目录下,然后登陆进入Typecho的后台,“控制台" --> “外观” --> "编辑当前外观",编辑header.php文件,在标签内插入如下代码:

<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css');?>" />
<script src="<?php $this->options->themeUrl('prism.js');?>"></script>

2020-07-14T02:32:09.png
保存文件即可生效。在使用Markdown写文章时,只要在代码块标记`标记后面添加你的代码的语言名,如php、html、python等,就可以实现代码高亮展示。

1

评论

博主关闭了所有页面的评论