Highlight.js语法突出显示
Posted tags: 篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highlight.js语法突出显示相关的知识,希望对你有一定的参考价值。 正如我在这个博客开始之前所说的最小可行产品,因此我在几个小时内就开始运行了。这种方法在初始推动之后会减慢你的速度。最新的例子是要提供语法高亮的代码片段。 规格由于使用静态网站生成器,我的狩猎的开始立即产生了一些障碍。首先,我认为不用说,服务器端编程是一个很明显的总不停。第二,像课程或ids这样的具体标记将会非常棘手,因为使用markdown来创建我的文章。 Gripes当看到我真正臭名昭着的是,它的血腥难以找到一个简单的解决方案!这些产品通常是非常全面的,而且在个人看来,超过我将花更多的时间来修剪脂肪,而不是从头开始编码。说如果我的需要是一个完整的花式裤子,那么你不能错过其中的一些。 SyntaxHighlighter的 Highlight.js在刚刚(约20分钟)的硬核谷歌之后,我发现了highlight.js。这个图书馆会高兴地浏览页面,寻找任何pre>code页面元素,并且在应用相关的格式之前,不用担心会尝试检测编程语言(可以处理它的是54!)。更好的是,着色和突出显示完全是css驱动的,它们共有26个主要功能,包括与Google Code,Github和XCode的风格相匹配的选择。将脚本初始化为一个班轮。 hljs.initHighlightingOnLoad(); 这真的很简单,它是通过搜索代码块开始的$(‘pre code’)。然后,通过将内容分成新行,\\n我们可以得到总行数。最后,我们通过建立与列表项的列表contianing号1 lines和结束标记之间添加它和。用适当的css干预来填充几个类,使列表与代码的左边缘一致。 工作很好!毫无疑问,需要改进,这些东西有不断发展的习惯!如果这对您有任何用处或您有任何建议,请在下面的评论中通知我。 http://idodev.co.uk/2013/03/syntax-highlighting-with-highlightjs/ 小文注: 可能根据每个人使用的高度风格上面的样式可能需要调整。 以上是关于Highlight.js语法突出显示的主要内容,如果未能解决你的问题,请参考以下文章
GeSHi - 通用语法荧光笔
Google Code Prettify
Lighter.js(用MooTools编写)
如果你知道任何一个真的应该提到让我知道。
行号这个图书馆的一个遗漏是行编号,尽管这是一个贡献者努力添加它们所发现的事情。我喜欢行号,也许只是眼睛糖果,但我可以看到一天,我想要你们指向第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 {
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;
}