网站首页 » CMS » WordPress » wordpress 代码高亮插件 highlightjs 使用教程
上一篇:
下一篇:

wordpress 代码高亮插件 highlightjs 使用教程

前言

对于做前端的朋友,一般都会有自己的博客,或者网站。而网站的主题一般都离不开代码分享,而代码高亮就可以说是不能少的了。它不仅可以提高用户的阅读体验,还能让你的文章排版看起来美美哒!

介绍

官方的介绍也是非常地简单粗暴:
支持155种编程语言有73种不同的样式可供选择
自动检测语言,并做出相应的样式处理
多编程语言代码高亮
支持node.js
对任何标记语言起作用
兼容各种 js 框架

基本用法

文件引入

在你的页面中使用 highlight.js 来让页面代码高亮方法也非常地简单。在页面中引入以下文件,一个CSS样式文件,一个js文件

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

配合标签

用<pre><code>你的代码……</code></pre> 把需要高亮的代码包裹起来,然后,然后,然后就可以看到效果了。

运行原理

如果页面已经启用 highlight.js ,那么它就会在页面中找到<pre><code></code></pre>标签,并会尝试去判断标签里的代码是何种语言,如果检测失败,你可以手动给标签加上一个类如:

<pre><code class="html">...</code></pre>

而如果你想不启用 highlight.js 功能,那么你可以像下面这样书写

<pre><code class="nohighlight">...</code></pre>

自定义初始化

当你想获取更多的控制权时,你可以使用 highlightBlock 和 configure 函数。可以实现何时启用以及控制什么代码。下面就是通过 jQuery 调用 initHighlightingOnLoad() 的等价方法

$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});

除了<pre><code></code></pre> 里,你还可以使用任何标签来包裹你的代码。如果你不使用一个容器来作为换行标识,那么你需要配置下 highlight.js 使用br 标签来进行换行,就像下面这样

hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});

想了解更多的配置方法可以参考这里:http://highlightjs.readthedocs.io/en/latest/api.html#configure-options

页面监听器

当你需要给大量的代码添加 highlighting 时,你可以通过监听器来启用 highlightjs ,从而不会因为处理大量的代码而影响了页面的打开速度。你可以像下面这样写:

addEventListener('load', function() {
var code = document.querySelector('#code');
var worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})

对应的worder.js 里的代码为

onmessage = function(event) {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}

拓展

如果你想更换代码高亮主题,要怎么做呢?一开始我也弄了很久,找了很久,都不知道怎么换主题,然后看了看下载下来的文件里,有很多样式文件,看起来样式文件的命名与官方主题名是一致的,于是我就直接替换CSS样式表链接,结果高亮主题真的换了个样式。例如:把官方默认的样式表更新自己喜欢的


<link rel="stylesheet" href="/path/to/styles/default.css">
<!--改成 -->
<link rel="stylesheet" href="/path/to/styles/github.css">

注意,有些主题有背景图片,记得也把图片拷贝到你的目录中。

相关资料

highlightjs 官方:https://highlightjs.org/

highlight.js Library API:highlight.js Library API http://highlightjs.readthedocs.io/en/latest/api.html#configure-options

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/wp-code-syntax-highlighting-plugin-highlightjs-tutorial/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END