我正在使用http://alexgorbatchev.com/SyntaxHighlighter/
中的js SyntaxHighlighter 3.0.83我现在一直在谷歌搜索整个世界,但似乎无法真正找到如何启用换行符。 Instad我得到一个水平滚动条,这有时很好但不在我的场景中。
在示例中
有谁知道这方面的方法吗?
答案 0 :(得分:9)
我实际上并没有使用SyntaxHighlight,但似乎可以将white-space: pre-wrap
CSS样式附加到SyntaxHighlight使用的<pre>
或<script>
标记。
HTML(使用<pre>
):
<pre class="brush: js" class="syntaxhighlight">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>
HTML(使用<script>
):
<script type="syntaxhighlighter" class="syntaxhighlight brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>
CSS:
.syntaxhighlight {
white-space: pre-wrap;
}
答案 1 :(得分:9)
换行不再是一个选项,但您可以轻松添加功能。
将此添加到css以打破行
body .syntaxhighlighter .line {
white-space: pre-wrap !important; /* make code wrap */
}
要修复行号,请使用以下脚本。
function lineWrap(){
var wrap = function () {
var elems = document.getElementsByClassName('syntaxhighlighter');
for (var j = 0; j < elems.length; ++j) {
var sh = elems[j];
var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
var stand = 15;
for (var i = 0; i < gLines.length; ++i) {
var h = $(cLines[i]).height();
if (h != stand) {
console.log(i);
gLines[i].setAttribute('style', 'height: ' + h + 'px !important;');
}
}
}
};
var whenReady = function () {
if ($('.syntaxhighlighter').length === 0) {
setTimeout(whenReady, 800);
} else {
wrap();
}
};
whenReady();
};
lineWrap();
$(window).resize(function(){lineWrap()});