Highlight.js语法突出显示

2021-11-28 00:14:01

正如我在这个博客开始之前所说的最小可行产品，因此我在几个小时内就开始运行了。这种方法在初始推动之后会减慢你的速度。最新的例子是要提供语法高亮的代码片段。

规格由于使用静态网站生成器，我的狩猎的开始立即产生了一些障碍。首先，我认为不用说，服务器端编程是一个很明显的总不停。第二，像课程或ids这样的具体标记将会非常棘手，因为使用markdown来创建我的文章。

Gripes当看到我真正臭名昭着的是，它的血腥难以找到一个简单的解决方案！这些产品通常是非常全面的，而且在个人看来，超过我将花更多的时间来修剪脂肪，而不是从头开始编码。说如果我的需要是一个完整的花式裤子，那么你不能错过其中的一些。

SyntaxHighlighter的
GeSHi - 通用语法荧光笔
Google Code Prettify
Lighter.js（用MooTools编写）
如果你知道任何一个真的应该提到让我知道。

Highlight.js在刚刚（约20分钟）的硬核谷歌之后，我发现了highlight.js。这个图书馆会高兴地浏览页面，寻找任何pre>code页面元素，并且在应用相关的格式之前，不用担心会尝试检测编程语言（可以处理它的是54！）。更好的是，着色和突出显示完全是css驱动的，它们共有26个主要功能，包括与Google Code，Github和XCode的风格相匹配的选择。将脚本初始化为一个班轮。

hljs.initHighlightingOnLoad();
行号这个图书馆的一个遗漏是行编号，尽管这是一个贡献者努力添加它们所发现的事情。我喜欢行号，也许只是眼睛糖果，但我可以看到一天，我想要你们指向第33行，没有’em’填充。那么我该怎么做，但是要快速点击jQuery来做我的出价。下面显示的行号使用非常的脚本（如何非常元！）是我的快速的n代码来完成工作。

//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’)。然后，通过将内容分成新行，\n我们可以得到总行数。最后，我们通过建立与列表项的列表contianing号1 lines和结束标记之间添加它和。用适当的css干预来填充几个类，使列表与代码的左边缘一致。

pre {

position: relative;

margin-bottom: 24px;

border-radius: 3px;

border: 1px solid #C3CCD0;

background: #FFF;

overflow: hidden;

}

code {

display: block;

padding: 12px 24px;

overflow-y: auto;

font-weight: 300;

font-family: Menlo, monospace;

font-size: 0.8em;

}

code.has-numbering {

margin-left: 21px;

}

.pre-numbering {

position: absolute;

top: 0;

left: 0;

width: 20px;

padding: 12px 2px 12px 0;

border-right: 1px solid #C3CCD0;

border-radius: 3px 0 0 3px;

background-color: #EEE;

text-align: right;

font-family: Menlo, monospace;

font-size: 0.8em;

color: #AAA;

}

工作很好！毫无疑问，需要改进，这些东西有不断发展的习惯！如果这对您有任何用处或您有任何建议，请在下面的评论中通知我。

http://idodev.co.uk/2013/03/syntax-highlighting-with-highlightjs/

小文注：

可能根据每个人使用的高度风格上面的样式可能需要调整。

码农公寓

相关文章