标签归档：highlightjs

RSS feed of highlightjs

Highlightjs 添加代码行号
作者是 发布于 在 JavaScript.

Highlightjs是一款优秀的代码高亮Js组件，可以很方便地对各种语言编写的代码添加语法高亮样式。

然而，Highlightjs默认是不包括显示代码行号（Line Number）这一特性的，不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能。

参考博文链接：syntax-highlighting-with-highlightjs

Javascript代码：


//numbering for pre>code blocks
$(function(){
    $('pre code').each(function(){
        var lines = $(this).text().split('\n').length - 1;
        var $numbering = $('<ul/>').addClass('pre-numbering');
        $(this)
            .addClass('has-numbering')
            .parent()
            .append($numbering);
        for(i=1;i<=lines;i++){
            $numbering.append($('<li/>').text(i));
        }
    });
});

实际上很简单，首先找到代码块$('pre code')。然后取得内容并按照换行符split，我们可以得到代码块的行数。最后，我们构建一个包含从数字1到行数n的行号列表，然后把这个列表追加到</pre>和</code>的闭合标签之间。

此外通过添加适当的css样式将行号列表渲染到代码的左手边缘。使用时请结合页面样式对下面的css做出相应修改。


pre {
    position: relative;
    margin-bottom: ...

继续阅读

Highlightjs 8.0新特性
作者是 发布于 .

Highlightjs（下载地址：http://highlightjs.org/download/）是一款简单易用的语法高亮插件

它具有如下特征：

  • 支持71种语言和44种样式
  • 自动化语言侦测判别
  • 多语言代码高亮
  • node.js可用
  • 可以与markup一同使用
  • 兼容所有的js框架

Highlightjs于2014-01-08发布了8.0版。这个发行版提供了一些崭新特性的同时，将不再向后兼容某些旧版本中存在的特征。
不过，大多数用户应当不会受到这些向后不兼容特性的影响：自述文件中描述的基本使用场景依旧保持不变。

不再向后兼容的特性：

现在默认对CSS类引用中的所有类加上了hjls前缀，因为其中的一些类名可能会与其它的样式表发生冲突。
如果你使用的是highlightjs的老版本，也许想要升级highlight的同时依旧保留其原来的行为。
为了抑制这些新的特性，你可能需要这样进行初始化：

<script type="text/javascript">
  hljs.configure({classPrefix: ''});
  hljs.initHighlightingOnLoad();
</script>

曾经在不同位置使用的TabReplace与useBR现在统一放在了global options对象中，使用configure(options)方法进行配置，这个函数已在API文档中列出。
同时需要注意的是，这些参数从highlightBlock与fixMarkup中移除，现在也依赖于configure进行配置。

我们移除了public-facing对象（尽管没有在文档中列出）hljs.LANGUAGES，它曾经被用来注册语言，取而代之的是两个新方法：registerLanguage和getLanguage。
它们都已经在API文档中列出。

从highlight和highlightAuto返回的结果不在包含两个单独的属性relevance和keyword_count来计算相关性评分，它们现在统一被relevance所取代。

一个技术上兼容的变更可能也值得注意一下：

NPM包的结构已经被重构，因此如果你已经在本地安装了这个包，你将不得不更新你的路径。require(‘highlight.js’)像以前一样工作。这归功于Dmitry Smolin。

新特性：

编程语言现在可以通过同种名称进行识别，如”js”代表Javascript，”html”代表HTML（早些时候坚持称其为”xml”）。这些别名既可以在HTML代码容器的类属性指定，也可以使用各类API调用进行指定。虽然现在只有一些非常通用的别名，但是我们会在将来对它们进行扩展。这些别名均在[class reference][]中列出。

语言定义语法精简为variants和beginKeywords。

新的语言和样式：

继续阅读