dux 主题默认使用 Google Code Prettify 实现代码高亮
下载
在 highlight 官网下载 js 和 css 文件
可以使用官网提供的 CDN 链接，也可以根据需要定制自己需要的语言
选择自己喜欢的主题，在这里进行下载
将 highlight.main.js 文件放到主题的 /js/libs/ 文件夹中
编辑主题文件
编辑 /js/loader.js 文件，将 highlight.min.js 引入
tbquire.config({
baseUrl: jsui.uri + '/js',
urlArgs: 'ver=' + jsui.ver,
paths: {
'swiper' : 'libs/swiper.min',
'jquery.cookie' : 'libs/jquery.cookie.min',
'jsrender' : 'libs/jsrender.min',
'router' : 'libs/router.min',
'lazyload' : 'libs/lazyload.min',
'prettyprint' : 'libs/prettyprint',
+ 'highlight' : 'libs/highlight.min',
'ias' : 'libs/ias.min',
'main' : 'main',
'comment' : 'comment',
'user' : 'user'
}
})
|
编辑 /js/main.js 注释掉 prettyprint 部分
/*
* prettyprint
*
*/
-$('pre').each(function(){
- if( !$(this).attr('style') ) $(this).addClass('prettyprint')
-})
-if( $('.prettyprint').length ){
- tbquire(['prettyprint'], function(prettyprint) {
- prettyPrint()
- })
-}
+/*
+ * highlight
+ * ====================================================
+*/
+
+$('pre code').forEach((block) => {
+ tbquire(['highlight'], function() {
+ hljs.highlightBlock(block)
+})
|
此时 highlight 脚本已经生效，接下来就是应用 highlight 样式
应用 highlight 样式
你可以选择将下载好的 css 文件打开，将样式拷贝到 /libs/css/main.css 文件中
也可以在 wordpress后台-外观-自定义-添加额外css 中为主题定义样式