JavaScriptを使用してコードブロックの行番号を表示する方法は？

Question

ここが問題です。私は 'Highlight.js'（javascriptベースの自動構文ハイライター）を使用して、私のウェブサイトのシンタックスハイライトコードにします。ただし、行番号やゼブラストライピング（代替コード行の場合）はサポートされていません。

私のコード・ブロックは、このような<pre><code>ブロックに包まれて：今、私は動的コードブロックの行番号を表示したい

：

<pre><code> 
&lt;script type=&quot;text/javascript&quot;&gt; 
// Say hello world until the user starts questioning 
// the meaningfulness of their existence. 
function helloWorld(world) { 
for (var i = 42; --i &gt;= 0;) { 
alert(&#39;Hello &#39; + String(world)); 
} 
} 
&lt;/script&gt; 
&lt;style&gt; 
p { color: pink } 
b { color: blue } 
u { color: &quot;umber&quot; } 
&lt;/style&gt; 
</code></pre> 

、出力は次のようになりますJavaScriptを使用します。それ、どうやったら出来るの？ （可能であれば、ゼブラストライピングを表示するにはどうすればいいですか）

ありがとうございました。

PS： JavaScriptは分かりませんので、可能な限り明確にしてください。私は理解するために全力を尽くします。ありがとう。

Answer 1

あなたは、このようなhttp://alexgorbatchev.com/SyntaxHighlighter/

として代替フレームワークを使用するか、ここを見て、そのスイートに何かを見つけることができます。 http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/

Answer 2

基本的な手順は次のようになります。

1. 要素内のHTMLを取ります。
2. 改行文字（\n）で分割します。
3. 各文字列について、その前に数字とドットを追加します。
4. 文字列を改行文字で再結合します。
5. 文字列を要素のHTMLとして設定します。

ただし、ハイライト表示の構文がハイライト表示されてしまうことがあります。これは、コードの前に行番号があることを認識しない可能性が高いためです。したがって、シンタックスハイライターは、行番号の機能を提供する必要があります。

Answer 3

古い質問に新しい回答を追加する。

ace.jsのやり方と同じように、左の余白に行番号を表示したかったのです。

私のソリューションにはいくつかのハッキーな詳細がありますが、相対位置付けスパン内の絶対位置スパンがこれでうまく機能することがわかったので、私はそれをとにかく共有したかったのです。上記の回答とthis answer about relative positioning without taking up spaceに励まされ

は、私が使用：

var line = 1; 
code = code.replace(/^/gm, function() { 
    return '<span class="line-number-position">&#x200b;<span class="line-number">' + line++ + '</span></span>'; 
}); 

を正規表現/^/gmは、スパン内のスパンで各行の先頭を「置き換え」。

​は、幅がゼロのスペースです。明らかに、Firefoxは文字の上端または下端にゼロ高さのスパンを配置するかどうかを決定するのが難しいようです。

line-number-positionとline-numberは、これらのようなCSSクラスです：

.line-number-position { 
    position: relative; 
    top: 0; 
} 

.line-number { 
    position: absolute; 
    text-align: right; 
    right: 17px; 
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; 
    font-size: 12px; 
} 

はい、そこにエースの書式と一致するには、いくつかのマジックナンバーがありますが、ポイントはで相対位置サイズがゼロのスパンを置くことです各マージンの先頭に絶対配置されたスパンを追加する基準点として使用します。

現在のChrome、Safari、Firefox、Operaで動作します。