夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色
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();

评论

  1. GodGameMod
    Windows Chrome

    来看看

    3天前
    2020-5-28 1:34:20
  2. Ongsaki
    Windows Chrome

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

    1月前
    2020-4-30 0:46:32
    • solstice23 博主
      Android Chrome

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

      1月前
      2020-4-30 1:14:21
      • Ongsaki
        Windows Chrome

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

        1月前
        2020-4-30 2:01:16
  3. sinon
    Windows Chrome

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

    1月前
    2020-4-23 18:24:52
  4. 呵呵君
    Windows Chrome

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

    2月前
    2020-4-08 1:45:29
    • solstice23 博主
      Windows Chrome

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

      2月前
      2020-4-09 1:30:39
  5. ma4ter
    Windows Chrome

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

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

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

        2月前
        2020-4-02 10:35:51
  6. ma4ter
    Windows Chrome

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

    2月前
    2020-4-02 9:34:31
    • ma4ter
      Windows Chrome

      代码块样式在哪添加..

      2月前
      2020-4-02 9:41:43
  7. ruixingzhe
    Windows Chrome

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

    2月前
    2020-3-31 20:23:42
    • ruixingzhe
      Windows Chrome

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

      2月前
      2020-4-01 0:04:12
      • solstice23 博主
        Android Chrome

        添加到任意地方即可

        2月前
        2020-4-01 9:00:06
  8. laowu
    Windows Chrome

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

    4月前
    2020-2-08 16:05:21
    • solstice23 博主
      Windows Chrome

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

      window.pjaxLoaded = function(){
      	crayon_syntax_load_after_pjax_loaded();
      	addCrayonControl();
      }
      4月前
      2020-2-09 18:02:26

发送评论 编辑评论


				
上一篇
下一篇