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

高亮效果展示

请输入图片描述
请输入图片描述

基于 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.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文件,然后替换一下即可)
button type="round" color="success"3
建议大家在主题的自定义javascript中加入

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

这样代码块中单击复制按钮,会出现已复制提示(参考本博客),如若不喜欢这效果,也可以自己添加一个js单击事件

用法

\```php
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

代码块可全屏,你发现了吗?

pjax
如果你的网站有开启Pjax

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

以Handsome主题为例:

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

$.getScript("https://www.xcnte.com/usr/plugins/ColorHighlight/guess.js");
 $('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>");
    });
  }
$(document).ready(editormdSupport);

重要说明

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

atom-one-dark.css
dark.css
default.css
github.css
customemin.css (默认选中:Mac风格,本人看着最顺眼)
pojoaque.css
tomorrow-night.css
vs2015.css
xcode.css
2. 是否在代码左侧显示行号 (默认开启)

3. 兼容模式(默认关闭)

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

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

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

https://highlightjs.org/download/

最后修改:2019 年 02 月 22 日 07 : 04 PM
南来北往的大爷们,可怜可怜我吧,赏几两碎银子吧!

1 条评论

  1. 萧小七

发表评论