typeecho代码高亮 ColorHighlight

发表于 2019年02月19日 | 作者 M4X | 分类文章互动 | 热度 27566 ℃ 1 条评论
一款比较常用的代码高亮插件，需要JQ支持。为MAC风格，支持全屏。
代码高亮 ColorHighlight.zip
ColorHighlight-for-typecho-master.zip
( 116.5 KB, 下载次数: 3414, 最后修改: 2019-02-20 15:55 )
作者演示：https://www.xcnte.com/archives/377/

项目开发：https://github.com/Xcnte/ColorHighlight-for-typecho

演示：

基于 Highlight的代码语法高亮插件 for Typecho，可显示语言类型、行号，有复制代码到剪切板等功能。本人博客使用的是Handsome主题，如若你在其他主题中使用该插件发现任何问题，可与我联系。

插件最新版本
Typecho代码高亮插件Code Prettify

基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，共提供11种代码高亮风格自由切...
旧版下载地址：

Github：https://github.com/Xcnte/ColorHighlight-for-typecho

码云：https://gitee.com/xcnte/ColorHighlight-for-typecho

起始
本插件是基于 Highlight 插件，改自泽泽https://qqdie.com/archives/typecho-highlightjs-plugin.html

首先名字改成了ColorHighlight

将Highlight.js的js和css都换成最新的了

在原有的功能上新增代码复制功能，Mac风格代码高亮，代码块窗口化

（请勿与其它同类插件同时启用，以免互相影响）

使用方法
以Handsome主题为例
点击开合查看
第 1 步：下载本插件，解压，放到 usr/plugins/ 目录中；

第 2 步：文件夹名改为 ColorHighlight；

第 3 步：登录管理后台，激活插件；

第 4 步：设置：选择主题风格，是否显示行号等。

第 5 步：主题-->外观设置-->代码高亮的风格选择-->自定义

第 6 步：删除/usr/themes/handsome/assets/css/handsome.min.css中所有关于pre、code标签的CSS
（这里直接下载handsome.min.css文件，然后替换一下即可）

用法

\```php
<?php echo 'hello jrotty!'; ?>
\```

删除上边代码中的\
PHPCopy
pjax
如果你的网站有开启Pjax（handsome主题默认开启，开启的情况下必须添加，否则代码复制、窗口化失效）

请把以下代码添加到回调函数的地方，在你使用的主题设置里看看

以Handsome主题为例：

主题 --> 设置外观 --> Pjax --> PJAX回调函数

if (typeof myFunction !== 'undefined'){
      myFunction();
}
 $('pre').on('click', function (e) {
         if (e.target !== this ) return;
        $(this).toggleClass('code-block-fullscreen');
    }
);
var l = $("pre code").find("ul").length;
if(l<=0){
    $("pre code").each(function(){
        $(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
    });
  }

JavaScriptCopy
重要说明
可设置项

选择高亮主题风格 (官方提供的 92 种风格切换（下面列出几种），本人自己添加了一种（Mac风格）)

dark.css
default.css
github.css
customemin.css （默认选中：Mac风格，本人看着最顺眼）
pojoaque.css
tomorrow-night.css
vs2015.css

是否在代码左侧显示行号（默认开启）
兼容模式（默认关闭）

在插件设置中打开兼容模式，即可支持以前没有用Markdown书写的代码高亮

如果你的blog已经全部是Markdown书写，建议你不要打开它以节省资源。

本插件支持常见的一些语言高亮。您可以打开以下链接查看详情：

https://highlightjs.org/download/

与我联系
长期更新该插件，如果有任何意见或发现任何BUG请在该篇文章下留言

提示
由于插件只对了我博客的主题做了兼容性修改

点击代码块标题栏，就可以实现窗口化，再次点击缩小

默认没有加入代码Copy后的提示效果

如果想要和本博客一样的效果

请在模板目录的header.php文件中引入layer资源文件，代码如下

<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>

JavaScriptCopy
然后在主题设置里的自定义javascrit或主题js源文件中加入

document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！', function(){});}; 
JavaScriptCopy

版权属于：Xcnte' s Blog（除特别注明外）

本文链接：https://www.xcnte.com/archives/377/

本站文章采用知识共享署名4.0 国际许可协议进行许可，请在转载时注明出处及本声明！

最后修改：2020 年 01 月 16 日 12 : 50 PM
[代码高亮 ColorHighlight.zip][4]

typeecho代码高亮 ColorHighlight

cfscc • 2020 年 03 月 22 日