夜间模式
字体
阴影
滤镜
圆角
主题色
Crayon 代码高亮插件的一点美化

前言

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

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

修改了哪些地方

高亮

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

代码块

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

字体

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

操作栏

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

效果

效果如下

配色方案

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。

代码块样式

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

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

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

控制按钮

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

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

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

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

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

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

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

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

对 Pjax 的额外处理

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

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

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

评论

  1. laowu

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

    2周前
    2020-2-08 16:05:21
    • solstice23 博主

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

      2周前
      2020-2-09 18:02:26

发送评论


				
上一篇
下一篇