ナガブロでソースコードをかっちょよく表示する方法
ナガブロがリニューアルされてました！
箇条書きはーとか、マークダウンはーとか、いろいろあるんですが。。。
それはそれとして、プログラムのソースコードを綺麗に公開したいときがあると思うので、それをナガブロでどうやるの？ってのを紹介します。
箇条書きはーとか、マークダウンはーとか、いろいろあるんですが。。。
それはそれとして、プログラムのソースコードを綺麗に公開したいときがあると思うので、それをナガブロでどうやるの？ってのを紹介します。
- Syntax Highlighter Scripts Generatorのページに行きます。
Syntax Highlighter Scripts Generator - 「Select Brushes」欄で使用するプログラミング言語を選択します。言語名が左、それに対応するチェックボックスが右なので、ちょっと注意です。
- 使いたい言語を選択したら「Generate」をクリックします。
- 出力されたスクリプトをクリップボードにコピーします。 （「Copy To Clipbord」ボタンは機能しないブラウザがあります。）
- ナガブロ管理画面の左側のメニューから、 「プログの設定」 - 「テンプレート」 - 「カスタマイズ」 に行きます。
- ここでHTMLのカスタマイズをします。トップページ、個別記事、アーカイブ、それぞれのテンプレートの </head> タグの直前にコピーしたスクリプトを貼り付けて、登録します。
- あとついでに、 「プログの設定」 - 「ブログ環境設定」 - 「表示内容の設定」 に行って、「記事の自動改行」 を 「自動で改行しない（<br>タグで改行）」にしておいた方がいいと思います。
これをしないと、preタグの中にも <br> が付いちゃって、意図しない改行が増えちゃいます。 - で、記事を書くときは
<pre class="brush: ruby">
のように、brush:のあとに言語名を指定してpreタグで括ります。
# 10の階乗を求める
ans = 1
for i in 1..10
ans *= i
end
# 出力する
print "10! = ", ans, "\n"
</pre> - そうすると、こんな感じで表示されます。
# 10の階乗を求める ans = 1 for i in 1..10 ans *= i end # 出力する print "10! = ", ans, "\n"
