こんにちは､びしょ〜じょです｡ 明日は院試です｡内容はタイトルの通り1｡

Markdownでコードブロックといえば```で囲んで色々やると､エンジンが

example
<code>
    <span>...</span>
    <span>...</span>
    ......
</code>

みたいなものを履いてくれると予想する｡そしてこれはCSSのカウンターと:beforeなどで簡単に行番号が付けられると予想する｡

残念ながらRedcarpetではそうならないようだ｡

HTMLified example
<span class="nt">&lt;code&gt;</span>
    <span class="nt">&lt;span&gt;</span>...<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span&gt;</span>...<span class="nt">&lt;/span&gt;</span>
    ......
<span class="nt">&lt;/code&gt;</span>

ではどうするか｡パワーで解決｡ Rubyプラグインを書いた｡ _plugins/ordered_md_filters/09-lineno.rb

markdownファイルを1行ずつ見ていって､<!--linenumber-->というコメントがあったらその直後のコードブロックに行番号をつける､というもの｡ 対象コードブロックを配列に突っ込んでいき､行数を<pre>に突っ込んでいき､<div>で囲んでfloat: leftで完成や､という非常に原始的な作りになっている｡

1
2
3
4
5
linenumbered example
<code>
    <span>...</span>
    <span>...</span>
    ......
</code>
HTMLified linenumbered example
<!-- どうやらRedcarpetはcode block内でもdivタグを認識してくれてしまうのでヤバイ-->
<(div) class="codeline with_caption"><pre>1
2
3
4
5</pre></div>
<div class="highlight">
<span class="listing-name">linenumbered example</span><pre><code class="language-html" data-lang="html"><span class="nt">&lt;code&gt;</span>
    <span class="nt">&lt;span&gt;</span>...<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span&gt;</span>...<span class="nt">&lt;/span&gt;</span>
    ......
<span class="nt">&lt;/code&gt;</span>
</code></pre>
<(/div)>

最初の行数を変更したいというお客様のニーズにもお答え致しました｡ <!--linenumber:N-->でN+1行目から行番号が振られていく｡

14
15
16
17
18
19
20
21
a
b
c
d
e
f
g
h

タイトルの通りQiitaより早くコードブロックに行番号をつける機能を実装しました!!!! 快挙ですね｡ CSSいじるほうが時間かかりました｡ デザインに自信なしなのでイラッとした人などはprください｡ 明日は院試です｡おわり｡

  1. 要望も出ている ↩