Code Prettify
基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,提供11种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能
最新更新时间:2019-11-18
起始
最初基于 Highlight 插件,开发一款名为ColorHighlight
插件
但因为插件本身存在不少BUG,自己又不想重写结构,于是便重新基于CodeHighlighter开发了一款
依旧在原有的代码高亮样式上新增了Mac风格,修改了部分JS代码
激活
第 1 步:下载本插件,解压,放到 usr/plugins/
目录中;
第 2 步:文件夹名改为 CodePrettify
;
第 3 步:登录管理后台,激活插件 (请勿与其它同类插件同时启用,以免互相影响)
第 4 步:设置:选择主题风格,是否显示行号等。
用法
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
Pjax
如果你的网站有开启Pjax
请把以下代码添加到回调函数的地方,在你使用的主题设置里看看
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
说明
可设置项
选择高亮主题风格 (官方提供的 8 种风格切换,本人自己新增了三种(Mac风格))
- coy.css
- dark.css
- BlackMac.css(黑色Mac风格)
- GrayMac.css (默认选中:Mac风格(灰色))
- WhiteMac.css(白色Mac风格)
- twilight.css
- tomorrow-night.css
- 是否在代码左侧显示行号 (默认开启)
插件默认没有加入代码Copy后的提示效果
如果想要和本博客一样的效果
请在模板目录的header.php文件中引入layer资源文件,代码如下
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
然后在主题设置里的自定义javascrit或主题js源文件中加入
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){});};
大佬,我发现,这个我在我的网站使用,如果不写语言类型,它不会引用插件里设置的样式,而且我网站原本的代码块样式
嗯,必须要语言类型,不然不生效
你先在用代码高亮还是这品文章的吗?
<?php echo 'hello jrotty!'; ?> 放到什么位置