highlight.js使你的代码高亮

前端之家收集整理的这篇文章主要介绍了highlight.js使你的代码高亮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

官网:https://highlightjs.org/

1.使用

其实官网已经有说明,这里简单说明下,调用方式:

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

默认高亮<pre><code></code></pre>块包裹的代码initHighlightingOnLoad是在页面加载时执行。

2. 定制

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

自定义高亮<pre><code></code></pre>块包裹的代码

但是我的博客园中代码查看了没有code标签,所有定制的时候是这样:

$(document).ready(@H_404_14@() {
  $('pre').each(3. 自动高亮代码
hljs.highlightAuto(code).value;

code代码字符串,不能包含 html 代码,执行返回值为高亮 html 代码

4. 手动高亮

hljs.initHighlighting.called = @H_404_14@false@H_404_14@;
hljs.initHighlighting();

如果我们不想页面加载后代码高亮,而是 ajax 读取 html 代码后,对此进行高亮,需要执行上面的代码

参考地址:

轻量级代码语法高亮插件Highlight.js:http://www.mojidong.com/html/css/js/2013/04/03/code-highlight/

如何自定义博客园代码高亮主题,同时分享自己使用的黑色主题:http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html

猜你在找的程序笔记相关文章