Crayon 代码高亮插件的一点美化
|
7,678
|
25
|
前端,杂谈

959 字
|
4 分钟
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 协议
CSSWordpress前端杂谈

评论

  1. 吴基岩
    Windows Edge
    已编辑
    11月前
    2022-12-23 20:12:18

    博主您好，请问wordpress上的argon主题内置如何进行代码高亮？
    我使用了<.pre><.code>标签，却没有预览。

  4. daoker
    Windows Chrome
    12月前
    2022-11-25 20:09:59

    博主，内置的代码高亮能不能设置代码多余多少行的时候折叠，有时候代码太多，浏览体验不太好，把代码块加入折叠区块貌似不生效

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

    ￣﹃￣

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

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

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

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

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

      kkk

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

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

	

		
颜文字
Emoji
AmashiroNatsukiEars
Telegram Emojis
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
在 React 中使用 View Transition 更新 State

							
							

							
WordPress Gutenberg 编辑器区块开发笔记

							
							

							
在 Dev-C++ 运行结果中显示占用内存大小 & 将 Windows Terminal 作为 Dev-C++ 的默认终端

							
							

							
钉钉云课堂实现倍速播放 & 提取视频文件 & 提取直播回放

							
							

							
Argon – 轻盈、简洁、美观的 WordPress / Hexo 主题

							
							

							
一个 倒计时/正计时 的图片调用 API

							
							

							
一个在线 Latex 公式可视化编辑器

							
							

							
联考前停课集训随笔