javascript - 行番号を壊さずにSyntaxHighlighterで改行を有効にする

Question

SyntaxHighlighterは、改行なしで行を表示します。長い行が1行に表示され、水平スクロールバーがコンテナに追加されます。

私はそのスクロールバーが欲しくなく、SyntaxHighlighterでいくつかの強制的で単純なCSSルールを使用して改行を強制することができます。

問題は、コンテンツと行番号が同じコンテナに表示されないため、行がそのように分割された場合、行番号が正しい行と一致しないことです。

あまり問題なく動作するチャンスはありますか？どんなアイデアでも大歓迎です。

Answer 1

これは私が最終的にそれをした方法です：

    // 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で実行できます。