ColorHighlight插件实现Mac风格代码高亮

请注意，本文编写于 1054 天前，最后修改于 697 天前，其中某些信息可能已经过时。

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

插件最新版本

Typecho代码高亮插件Code Prettify

起始最初基于 Highlight 插件，写一款名为 ColorHighlight插件但因为插件本身存在不少BUG，...

旧版下载地址：

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!'; ?>
\```
删除上边代码中的\

pjax

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

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

以Handsome主题为例：

1. 主题 --> 设置外观 --> 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>");
    });
  }

重要说明

可设置项

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

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

2. 是否在代码左侧显示行号 （默认开启）

3. 兼容模式（默认关闭）

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

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

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

https://highlightjs.org/download/

与我联系

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

提示

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

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

默认没有加入代码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(){});}; 

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

本文链接：https://cloud.tencent.com/developer/article/1918322

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