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

插件最新版本

旧版下载地址:

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.jsjscss都换成最新的了

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

(请勿与其它同类插件同时启用,以免互相影响)

使用方法

以Handsome主题为例

点击开合查看

第 1 步:下载本插件,解压,放到 usr/plugins/ 目录中;

第 2 步:文件夹名改为 ColorHighlight

第 3 步:登录管理后台,激活插件;

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

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

第 6 步: 删除/usr/themes/handsome/assets/css/handsome.min.css中所有关于precode标签的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(){});}; 
Last modification:January 16th, 2020 at 12:50 pm
如果觉得我的文章对你有所帮助,请随意赞赏