tumblrでシンタックスハイライト(google-code-prettify) on markdown


tumblr にシンタックスハイライトしたコードを表示させたくて google-code-prettify を使った方法を調べたが、手順が荒かったので自分なりにまとめてみる。

google-code-prettify のダウンロードと tumblr へのアップロード

  1. google-code-prettify のページより、ダウンロードする</p>
    • フル版とsmall版があるが、フル版をダウンロードした(執筆時点のファイル名は prettify-1-Jun-2011.tar.bz2)
  2. prettify-1-Jun-2011.tar.bz2 を解凍する、prettify.css と prettify.js を確認する
    • google-code-prettify(解凍して作成されたフォルダ) > distrib > google-code-prettify フォルダ内にある
  3. 必要があれば prettify.css を自分好みに編集する
  4. prettify.css と prettify.js を tumblr にアップロードする

tumblr のテーマに prettify.css と prettify.js を適用

  • 適用したい自分の tumblr ページから、カスタマイズ > HTMLを編集
  • </head> の直前に以下を追記する
    • prettify.css と prettify.js の URL パスはメモっておいたものに書き換えてください
<link href="http://static.tumblr.com/c5v7n80/aq5mesksw/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://static.tumblr.com/c5v7n80/GOPmesh3s/prettify.js">
  • </body> の直前に以下を記述する
<body onload="prettyPrint()">
  • 「プレビューを更新」>「保存」を押す

記述する

  • ダッシュボード > テキストを押す</p>
    • markdown で記述したいので、それ前提で
  • 載せたいコードの前に <pre><code class=”prettyprint linenums”>、後ろを </code></pre>で囲む
    • タグの後は改行せずにコードを載せる
  • コード内の < を markdown が html タグと認識してしまう場合は、&lt; に書き換える
    • 公開してしまう前にプレビューして正しく表示されているか確認する必要がある
  • 以下の様に記述した場合
<pre><code class="prettyprint linenums">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}
</code></pre>
  • 以下の様な表示になる
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}
  • 行数表示をしたくなければ、
<pre><code class="prettyprint">

と、linenums を抜くと以下のようになる

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

うまく表示されましたと。めでたしめでたし。

参考URL

google-code-prettify

Markdown

参考 – 自分の prettify.css

.pln{color:#000}

@media screen{
    .str{color:#080}
    .kwd{color:#008}
    .com{color:#800}
    .typ{color:#606}
    .lit{color:#066}
    .pun,.opn,.clo{color:#660}
    .tag{color:#008}
    .atn{color:#606}
    .atv{color:#080}
    .dec,.var{color:#606}
    .fun{color:red}
}

@media print,projection{
    .str{color:#060}
    .kwd{color:#006;font-weight:bold}
    .com{color:#600;font-style:italic}
    .typ{color:#404;font-weight:bold}
    .lit{color:#044}
    .pun,.opn,.clo{color:#440}
    .tag{color:#006;font-weight:bold}
    .atn{color:#404}
    .atv{color:#060}
}

pre.prettyprint{padding:2px; border:1px solid #888; overflow: auto}

ol.linenums{margin-top:0;margin-bottom:0}

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
    color: #555;
    list-style-type: decimal;
}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#fff}