Crayon 代码高亮插件的一点美化
Crayon 插件已经过时,不推荐使用

前言

博客建好后尝试过一些代码高亮插件,因为 Crayon (Crayon Syntax Highlighter) 的功能比较齐全就选了这个。

写好 Argon 主题 的初代版本后,因为 Crayon 插件的默认样式太丑,就对它稍微进行了一些美化,一直想发出来,现在终于写好这篇博客了。

修改了哪些地方

高亮

对默认的高亮效果都不太满意,所以用 Seti 主题的配色为 Crayon 做了一个高亮配色方案。

代码块

默认的代码块很丑,于是写了一段 CSS 来美化它,样式是仿(chao) 照(xi) Carbon 的。

字体

使用 CSS 引入了 “Hack” 字体。

操作栏

默认的操作栏也不好看,于是顺带重写了下操作栏,另外增加了复制代码的功能。

效果

效果如下

const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}
// Line 7 is marked
#include <bits/stdc++.h>
using namespace std;
int main(){
    int a,b;
    cin>>a>>b;
    cout<<a+b<<endl;
    return 0;
}
//without line numbers
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}
console.log("a very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line");
// 点击右上角 "自动折行" 按钮来切换折行状态

配色方案

Crayon 插件支持用户创建和导入自定义的配色方案。

配色方案是一个 CSS 文件,需要将它放入 /wp-content/uploads/crayon-syntax-highlighter/themes/主题名/主题名.css 中来导入。

你也可以在 Crayon 后台添加自己的配色方案,插件会自动帮你创建 CSS。

如果你不喜欢 Seti 配色方案,请跳过这一段。

下载并导入配色

  1. 下载 Seti CSS 配色文件(在该页面按 Ctrl + S),并将其放入 /wp-content/uploads/crayon-syntax-highlighter/themes/seti/seti.css 文件中。
  2. 在 Crayon 插件设置页面中选择 Seti 主题。

字体

如果你不喜欢 Hack 字体,请跳过这一段。

将以下 CSS 插入页面,来将代码块字体替换为 Hack。

html div.crayon-syntax , html div.crayon-syntax *{
    font-family: hack,consolas,sans-serif,monospace !important;
}
@font-face{font-family:'Hack';font-display:swap;src:url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020') format('woff2'), url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020') format('woff');font-weight:400;font-style:normal;}

代码块样式

只是改变了配色方案的代码块还是很丑,写了一段 CSS 来进一步美化代码块。

在这之前,在 Crayon 插件设置页面中关闭 “显示工具栏” 等选项可以获得更好的效果。

将这段 CSS 插入页面来美化代码块,你也可以修改该段 CSS 来更改效果。

html div.crayon-syntax , html div.crayon-syntax *{
    text-rendering: optimizeLegibility;
    letter-spacing: 0.5px;
}
.crayon-syntax:not(.crayon-syntax-inline){
    padding: 22px 20px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}
.crayon-syntax:not(.crayon-syntax-inline):before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat;
    background-position-y: center;
    height: 14px;
    width: 54px;
    margin-bottom: 25px;
    margin-left: 5px;
    display: block;
}
.crayon-main:not(.crayon-syntax-inline){
    padding-bottom: 10px !important;
}
.crayon-main::-webkit-scrollbar-track, .crayon-plain::-webkit-scrollbar-track {
    border: none;
    background: transparent !important;
}
.crayon-main::-webkit-scrollbar-thumb , .crayon-plain::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px;
    transition: background .3s ease;
}
.crayon-main::-webkit-scrollbar-thumb:hover , .crayon-plain::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .5) !important;
}
.crayon-main::-webkit-scrollbar , .crayon-plain::-webkit-scrollbar {
    background: transparent;
    height: 6px;
}
.crayon-table .crayon-nums-content {
    padding-right: 5px !important;
}
.crayon-syntax *::selection {
    background-color: rgba(204, 226, 255, 0.2) !important;
}

控制按钮

如果你不想要添加控制按钮,请跳过这一段。

控制按钮位于代码块右上角,分别可以 切换行号显示,切换自动折行,复制代码。

需要注意的是如果你的博客是 Pjax 加载的(如 Argon 主题),请特别阅读最后的 “对 Pjax 的额外处理” 这一段。

1. 将这段 CSS 加入页面来设置控制按钮的样式,你也可以修改该段 CSS 来更改效果。

注意:需要页面引入 Font Awesome 来正常显示控制按钮的图标。

.crayon-syntax .crayon-control{
	width: max-content;
	width: -moz-max-content;
	position: absolute;
	top: 20px;
	right: 30px;
	user-select: none;
	opacity: 0;
	transition: all .2s ease;
}
.crayon-syntax:hover .crayon-control{
	opacity: .4;
}
.crayon-syntax:hover .crayon-control:hover{
	opacity: 1;
}
.crayon-syntax .crayon-control i.fa{
	font: normal normal normal 14px/1 FontAwesome !important;
}
.crayon-control .crayon-control-btn {
	display: inline-block;
	opacity: .8;
	transition: all .2s ease;
	cursor: pointer;
	margin-left: 15px;
	width: 12px;
	position: relative;
}
.crayon-control .crayon-control-btn:hover {
	opacity: .5;
}
.crayon-control-btn:before {
	position: absolute;
	top: 22px;
	left: -40px;
	width: 97.5px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: all .2s ease;
	font-size: 12px;
	font-family: sans-serif;
}
.crayon-control-btn:hover:before {
	opacity: 1;
	top: 25px;
}
.crayon-control-togglelinenumber:before {
	content: "显示行号";
}
.crayon-control-togglebreakline:before {
	content: "自动折行";
}
.crayon-control-copy:before {
	content: "复制";
}

2. 将这段 JS 加入页面来给控制按钮添加功能。

代码使用了 JQuery(因为懒),如果你不想使用 JQuery 可以将其改为无 JQuery 版本。

注意:请自行将代码注释处的 alert 替换为自己的提示框代码(不替换也没问题,只是不太好看,我在这里用的是 Argon 主题中使用的 iziToast 库来提示)

function addCrayonControl(){
	$(".crayon-syntax:not(.crayon-syntax-inline):not(.crayon-control-added)").each(function(){
		$(this).append("<div class='crayon-control'><div class='crayon-control-btn crayon-control-togglelinenumber' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-list'></i></div><div class='crayon-control-btn crayon-control-togglebreakline' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-align-left'></i></div><div class='crayon-control-btn crayon-control-copy' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-clipboard'></i></div></div>").addClass("crayon-control-added");
	});
};
addCrayonControl();
$(document).on("click" , ".crayon-syntax .crayon-control .crayon-control-btn" , function(){
		let $this = $(this);
		if ($this.hasClass("crayon-control-togglelinenumber")){
			CrayonSyntax.toggleNums($this.attr("data-target-id"));
		}
		if ($this.hasClass("crayon-control-togglebreakline")){
			CrayonSyntax.toggleWrap($this.attr("data-target-id"));
		}
		if ($this.hasClass("crayon-control-copy")){
			let input = document.createElement('textarea');
		        document.body.appendChild(input);
        		$(input).val($("#" + $this.attr("data-target-id") + " .crayon-code")[0].innerText);
        		input.setAttribute("readonly", "readonly");
		        input.setAttribute("style", "opacity: 0;mouse-events:none;");
		        input.select();
		        if (document.execCommand('copy')) {
		            //提示复制成功
		            alert("复制成功");
		        } else {
		            //提示复制失败
		            alert("复制失败");
		        }
		document.body.removeChild(input);
	}
});

对 Pjax 的额外处理

如果你的博客是 Pjax 加载的(如 Argon 主题),请按照这一段添加对 Pjax 的特别处理。

1. 将 /wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js 替换为这些 JS 代码

2. 在主题的 Pjax 加载完成后的回调函数中添加如下 JS 代码

crayon_syntax_load_after_pjax_loaded();
addCrayonControl();

 

作者: solstice23
本文采用 CC BY-NC-SA 4.0 协议

评论

  1. 匿名
    Windows Chrome
    已编辑
    2月前
    2022-3-19 22:37:49

     ̄﹃ ̄

  2. Ryan
    Windows Firefox
    2年前
    2020-7-13 19:30:56

    “注意:需要页面引入 Font Awesome 来正常显示控制按钮的图标。” 需要进行什么操作吗?

    • 博主
      Ryan
      Windows Chrome
      2年前
      2020-7-13 19:38:26

      如果主题没 FA 要手动引入下,多数主题包括 Argon 都自带 FA

    • qq3
      Ryan
      Macintosh Firefox
      1年前
      2021-4-22 0:11:40

      kkk

  3. GodGameMod
    Windows Chrome
    2年前
    2020-5-28 1:34:20

    来看看

  4. Windows Chrome
    2年前
    2020-4-30 0:46:32

    大佬~我们的代码高亮都没问题,但是你自己的好像挂了。
    2020-4-30,凌晨一点左右

    • 博主
      Ongsaki
      Android Chrome
      2年前
      2020-4-30 1:14:21

      本站最近移除了 Crayon 高亮插件,因为有些过时,现在使用的是 Argon 内置的 highlightjs,本文没有应用

      • solstice23
        Windows Chrome
        2年前
        2020-4-30 2:01:16

        这样啊,还以为你自己调试的时候忘了设置了233333

  5. sinon
    Windows Chrome
    2年前
    2020-4-23 18:24:52

    博主您好,如果看那三个颜色的点不爽想去掉改如何操作呢?

  6. 呵呵君
    Windows Chrome
    2年前
    2020-4-08 1:45:29

    博主这个插件严重报错怎么回事

    • 博主
      呵呵君
      Windows Chrome
      2年前
      2020-4-09 1:30:39

      这个插件比较早了,可以自己修改一下错误代码,不过不推荐使用这个插件。近期会更新其他代码高亮插件的文章。Argon 主题也有计划内置代码高亮。

  7. ma4ter
    Windows Chrome
    2年前
    2020-4-02 10:23:25

    老哥你这个复制成功的代码是啥

    • 博主
      ma4ter
      Windows Chrome
      2年前
      2020-4-02 10:31:32
      iziToast.show({
          title: '复制成功',
          message: "代码已复制到剪贴板",
          class: 'shadow',
          position: 'topRight',
          backgroundColor: '#2dce89',
          titleColor: '#ffffff',
          messageColor: '#ffffff',
          iconColor: '#ffffff',
          progressBarColor: '#ffffff',
          icon: 'fa fa-check',
          timeout: 5000
      });
      • ma4ter
        solstice23
        Windows Chrome
        2年前
        2020-4-02 10:35:51

        灰常感谢 还有一点就是我不知道那个PJAX回调函数代码加在哪里了

  8. ma4ter
    Windows Chrome
    2年前
    2020-4-02 9:34:31

    不会前端,,这咋添加的呀- –

    • ma4ter
      ma4ter
      Windows Chrome
      2年前
      2020-4-02 9:41:43

      代码块样式在哪添加..

  9. ruixingzhe
    Windows Chrome
    2年前
    2020-3-31 20:23:42

    你好!前端方面小白一只QAQ我试了半天,还是不清楚“控制按钮”第2个步骤function addCrayonControl()这段js代码加入到哪个文件?以及我使用的是你的主题(感谢,主题很棒!),你在前面的回复里说的window.pjaxLoaded = function()函数是添加到argontheme.js文件中吗?谢谢!

    • ruixingzhe
      ruixingzhe
      Windows Chrome
      2年前
      2020-4-01 0:04:12

      终于试出来了QAQfunction addCrayonControl()window.pjaxLoaded = function()这两段js代码都是添加到argontheme.js文件中的

      • 博主
        ruixingzhe
        Android Chrome
        2年前
        2020-4-01 9:00:06

        添加到任意地方即可

  10. laowu
    Windows Chrome
    2年前
    2020-2-08 16:05:21

    只有这个不知道加在哪里???
    crayon_syntax_load_after_pjax_loaded();
    addCrayonControl();

    • 博主
      laowu
      Windows Chrome
      2年前
      2020-2-09 18:02:26

      如果主题有 Pjax 加载功能的话,就加入在主题 Pjax 加载完成的回调函数中(不同主题的回调函数不同)。如果主题没有 Pjax 就不需要加入。
      以 Argon 主题为例:

      window.pjaxLoaded = function(){
      	crayon_syntax_load_after_pjax_loaded();
      	addCrayonControl();
      }

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: Telegram Animated Emojis
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
AmashiroNatsukiEars
Telegram Emojis
小恐龙
花!
上一篇
下一篇