読者です 読者をやめる 読者になる 読者になる

about the code block by markdown

tech

markdown で書いていて, <code> ブロックの書き方は,github flavored markdown (gfm)syntax highlighting を使うことにしているけど,
このお作法を取り入れるようにしたのは,これを知ったその時,途中から.
それ以前は,いわゆるスタンダードな markdown の書き方,行頭にタブまたは 4 つの空白文字を入れる,を採っていた.

で先日,以前のエントリーを参照しようと訪れたら,
コードを置いているブロックが正しく表示されていないことに気付く.

あぁ,このせいだな,と.
gfm による記述方法を採る前のものは,上手く表示されていない.

css がこちらの思惑通りに効いていてくれていない様子.

当初は面倒なことになりそうだから,gfm 採用以前のものはソレとして割り切ろうと思っていたけど,
やっぱり,見直しておくことに.

code blocks,sm と gfm では生成する html は異なる

ま,あたりまえでしょうが.

"sm" は standard markdown.
"gfm" は github flavored markdown.

たまたま同じような内容を,違うスタイルで書いている箇所があったので,それを覗いてました.

<!-- sm の html -->
<pre><code>% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.8.2
BuildVersion:   12C60
</code></pre>

<!-- gfm の html -->
<pre class="code" data-unlink>% sw_vers
ProductName    : Mac OS X
ProductVersion : 10.8.4
BuildVersion   : 12E55</pre>

gfm の html はタグは <pre> だけで,クラスを宛ててんですね.

これでは css の効き方変わりますな.

ということで,
css ちょちょっと調整して.

はい,おしまい.