为网站添加代码高亮!

[ApliNi]

参考资料

marked.js 异步高亮: https://marked.js.org/using_advanced#highlight
highlight.js API: https://www.fenxianglu.cn/highlightjs/docs/api
highlight.js 主题: https://highlightjs.org/static/demo/

代码高亮

在引入 11.x 版本的 highlight.js, 使用 jsdelivr CDN.

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>

importScripts('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js');

1. 在网页渲染完成后运行代码高亮

// 代码高亮
hljs.highlightAll();

2. 配合 marked.js 使用

在 marked.parse 之前添加此设置, 即可开启异步高亮. 使用 hljs.highlightAuto 渲染和自动判断语言.

marked.setOptions({
	highlight: function(code, lang){
		return hljs.highlightAuto(code, [lang, hljs.highlightAuto(code)?.language]).value;
	},
});

为代码高亮选择主题

打开 highlight.js 的主题页面: https://highlightjs.org/static/demo/
在左侧选择主题, 然后在开发者工具中将代码复制下来. 我选择的是 A11Y-Light 和 A11Y-Dark.

在网站的CSS中添加这两个主题

/* 代码高亮 */
pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em
}

code.hljs {
	padding: 3px 5px
}

@media (prefers-color-scheme: dark) {
	/*!
	Theme: a11y-dark
	Author: @ericwbailey
	Maintainer: @ericwbailey

	Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
	*/
	.hljs {
		background: #2b2b2b;
		color: #f8f8f2
	}

	.hljs-comment,.hljs-quote {
		color: #d4d0ab
	}

	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable {
		color: #ffa07a
	}

	.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type {
		color: #f5ab35
	}

	.hljs-attribute {
		color: gold
	}

	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol {
		color: #abe338
	}

	.hljs-section,.hljs-title {
		color: #00e0e0
	}

	.hljs-keyword,.hljs-selector-tag {
		color: #dcc6e0
	}

	.hljs-emphasis {
		font-style: italic
	}

	.hljs-strong {
		font-weight: 700
	}
}

/*浅色*/
@media (prefers-color-scheme: light) {
	/*!
		Theme: a11y-light
		Author: @ericwbailey
		Maintainer: @ericwbailey

		Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
	*/
	.hljs {
		background: #fefefe;
		color: #545454
	}

	.hljs-comment,.hljs-quote {
		color: #696969
	}

	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable {
		color: #d91e18
	}

	.hljs-attribute,.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type {
		color: #aa5d00
	}

	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol {
		color: green
	}

	.hljs-section,.hljs-title {
		color: #007faa
	}

	.hljs-keyword,.hljs-selector-tag {
		color: #7928a1
	}
}

@media screen and (-ms-high-contrast:active) {
	.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type {
		color: highlight
	}

	.hljs-keyword,.hljs-selector-tag {
		font-weight: 700
	}
}