July's Blog - length
type: channel
link: https://yangwenqing.com/tag/length/
items: Typecho 代码高亮插件Code Prettify

Typecho 代码高亮插件Code Prettify
type: item
date: 2020-02-10T14:16:00+08:00
description: Code Prettify基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，提供11种代码高亮风格自由切换，支持显示代码语言类型、行号，以及支持复制代码到剪切板功能[button color="black" icon="glyphicon glyphicon-star" url="https://github.com/Xcnte/Code-Prettify-for-typecho" type=""]Github项目[/button]最新更新时间：2019-11-18起始最初基于 Highlight 插件，开发一款名为ColorHighlight插件但因为插件本身存在不少BUG，自己又不想重写结构，于是便重新基于CodeHighlighter开发了一款依旧在原有的代码高亮样式上新增了Mac风格，修改了部分JS代码激活[button color="success" icon="glyphicon glyphicon-save" url="https://github.com/Xcnte/Code-Prettify-for-typecho/archive/master.zip" type=""]Download[/button]第 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);}说明可设置项[scode type="share"]选择高亮主题风格 (官方提供的 8 种风格切换，本人自己新增了三种（Mac风格）)coy.cssdark.cssBlackMac.css（黑色Mac风格）GrayMac.css （默认选中：Mac风格（灰色））WhiteMac.css（白色Mac风格）twilight.csstomorrow-night.css是否在代码左侧显示行号 （默认开启）[/scode]插件默认没有加入代码Copy后的提示效果如果想要和本博客一样的效果请在模板目录的header.php文件中引入layer资源文件，代码如下 然后在主题设置里的自定义javascrit或主题js源文件中加入document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！', function(){});};