Typecho代码高亮插件有很多,作者不喜欢用很多插件,找到把代码高亮集成到主题里的方法,而且方法比较简单。具体的方法是通过prism.js而不是PHP代码来实现语法高亮。

进入prism.js的官网,进入下载页面。在下载页面中选中你想要实现语法高亮的语言。

2019-07-29 21.50.36 prismjs.com 40041289ca5f.png

下载js文件(prism.js)和css文件(prism.css)

2019-07-29 21.51.00 prismjs.com 3827478a92f8.png

将下载的js和css文件上传到主题文件夹内

在主题文件中引用加载js和Css文件

一般是在header.php或者footer.php中适当位置,添加以下代码:

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

在使用Markdown写文章时,只要在代码块标记`标记后面添加你的代码的语言名,如php, javascript等,就可以实现代码高亮展示。

2019-07-29 21.55.04 wusail.com 707ae28eefcf.png

标签: typecho, 代码高亮, 非插件

添加新评论