TumblrにCodeSyntaxを追加する

いままではてなではデフォルトでCodeをハイライトしてくれていましたが
Tumblrはデフォルトでは行ってくれません
そこでTumblrにCodeシンタックスを追加しました

今回は highlight.js を使用し、
DropboxのPublic Directoryにソースを置き参照する形を取りました。

highlight.jsを取得

まずはじめに highlight.js にアクセスしGet Version をクリック
遷移先には設置方法が詳しく書かれていて

Documentには

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js

の2行を追加するだけと書いてありますが、今回は別の方法を使用しました

なぜ

  • 使わない言語のシンタックスは必要ない
  • 全部入りだと読み込みに時間がかかる
  • 外部に依存したくない(Tumblr使ってる奴が何を言うって感じですが)

それでは設定

Dropboxに保存

  1. highlight.jsのソースをDropboxのPublic Directoryに置きます
  2. highlight.jsのソース2種類へのリンクを取得
    • highlight.pack.js
    • **.css (Blogに合う見やすいものを使用してください)

テーマの編集

テーマの編集から HTMLを直接編集し、3行追加するだけです

今回は内に 以下を追加しました

<!-- highlightjs -->
<link rel="stylesheet" href="//dl.dropboxusercontent.com/u/39557272/highlightjs/styles/solarized_dark.css">//dl.dropboxusercontent.com/u/39557272/highlightjs/highlight.pack.jshljs.initHighlightingOnLoad();

これだけで Codeを自動的に見やすい形に変更してくれます

コードの乗せ方

Markdownだと```でコードを囲みますが
Tumblrではコードの各行の前にスペースを4つ入れます

なぜか

``` で囲んだ場合

<p>
    <code>
    </code>
</p>

スペース4つだと

<pre>
    <code>
    </code>
</pre>

に変換してくれるhighlight.jsは pre -> code 内をハイライトしてくれるので
以上のように書きます

最後に

Tumblrは自由度が高く、かゆいところにしっかりと手が届くことが実感できました
なぜ今まで使ってこなかったのか・・・ 不思議でなりません

コメントを残す