通过prism.js实现Typecho代码语法高亮
实现方法
进入prism.js官网的下载页面,Compression level一般选Minified version;Themes根据自己喜好选择;Languages选要用的就好了;全选的话js文件有320KB+,比较大;Plugins按需选择,全选的多个50KB左右。
都选好了就可以下载js和css文件了。
可以将下载好的js和css文件上传到Typecho的主题目录,即“usr/themes/主题名”目录下,然后登陆进入Typecho的后台,“控制台" --> “外观” --> "编辑当前外观",编辑header.php
文件,在<head></head>标签内插入如下代码:
<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css');?>" />
<script src="<?php $this->options->themeUrl('prism.js');?>"></script>
保存文件即可生效。在使用Markdown写文章时,只要在代码块标记`标记后面添加你的代码的语言名,如php、html、python等,就可以实现代码高亮展示。
扩展:
还能通过加入如下代码到prism.css中来更改代码框的滚动条样式。
pre::-webkit-scrollbar {
width: 8px;
height: 6px
}
pre::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: silver
}
pre::-webkit-scrollbar-thumb:hover {
background-color: silver
}
code::-webkit-scrollbar {
width: 6px;
height: 6px
}
code::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: silver
}
code::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。