SyntaxHighlighterは、改行なしで行を表示します。長い行が1行に表示され、水平スクロールバーがコンテナに追加されます。
私はそのスクロールバーが欲しくなく、SyntaxHighlighterでいくつかの強制的で単純なCSSルールを使用して改行を強制することができます。
問題は、コンテンツと行番号が同じコンテナに表示されないため、行がそのように分割された場合、行番号が正しい行と一致しないことです。
あまり問題なく動作するチャンスはありますか?どんなアイデアでも大歓迎です。
SyntaxHighlighterは、改行なしで行を表示します。長い行が1行に表示され、水平スクロールバーがコンテナに追加されます。
私はそのスクロールバーが欲しくなく、SyntaxHighlighterでいくつかの強制的で単純なCSSルールを使用して改行を強制することができます。
問題は、コンテンツと行番号が同じコンテナに表示されないため、行がそのように分割された場合、行番号が正しい行と一致しないことです。
あまり問題なく動作するチャンスはありますか?どんなアイデアでも大歓迎です。
これは私が最終的にそれをした方法です:
// return a jQuery object listing all highlighted lines as divs
// sh: SyntaxHighlighter
// alias: brush alias
// content: the code to highlight
getHighlightedLines = function (sh, alias, content) {
var brushes = sh.vars.discoveredBrushes,
Brush, brush;
if (!brushes) {
brushes = {};
_.each(sh.brushes, function (info, brush) {
var aliases = info.aliases;
if (aliases) {
info.brushName = brush.toLowerCase();
for (var i = 0; i < aliases.length; i += 1) {
brushes[aliases[i]] = brush;
}
}
});
sh.vars.discoveredBrushes = brushes;
}
Brush = sh.brushes[brushes[alias || 'plain']];
if (!Brush) {
return $();
}
brush = new Brush();
brush.init({toolbar: false, gutter: false});
return $(brush.getHtml(content)).find('.line');
},
次のように使用します。
var $table = $('<table/>');
getHighlightedLines(sh, settings.types[current.type], content).each(function (i) {
$('<tr/>')
.append($('<td/>').addClass('nr').append(i + 1))
.append($('<td/>').addClass('line').append(this))
.appendTo($table);
});
これで、コードがラップされた場合でも、同じ行に行番号と行の内容が表示されます。それ以外はCSSで実行できます。