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

Tumblrでソースコードをかっちょよく表示する方法

プログラムのソースコードを綺麗に公開したいときがあると思うので、それをTumblrでどうやるの?ってのを紹介します。

  1. Syntax Highlighter Scripts Generatorのページに行きます。


    Syntax Highlighter Scripts Generator

  2. 「Select Brushes」欄で使用するプログラミング言語を選択します。言語名が左、それに対応するチェックボックスが右なので、ちょっと注意です。

  3. 使いたい言語を選択したら「Generate」をクリックします。

  4. 出力されたスクリプトクリップボードにコピーします。 (「Copy To Clipbord」ボタンは機能しないブラウザがあります。)

  5. Tumblrのカスタマイズ画面の左側の説明欄にコピーしたスクリプトを貼り付けて保存します。

  6. で、記事を書くときは

    <pre class=“brush: ruby”>

    # 10の階乗を求める

    ans = 1

    for i in 1..10

      ans *= i

    end

     

    # 出力する

    print “10! = ”, ans, “n”

    </pre>

    のように、brush:のあとに言語名を指定してpreタグで括ります。

  7. そうすると、こんな感じで表示されます。

    # 10の階乗を求める

    ans = 1

    for i in 1..10

    ans *= i

    end

    # 出力する

    print "10! = ", ans, "n"