[tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタックスハイライトしなくてもいいかなあと思ってしまうこともままありますが、ハイライトしていないソースコードだと誰も見てくれないと思うので、きれいに表示することにしましょう。

見出し

1 シンタックスハイライトの下準備
2 シンタックスハイライトを使う
- 2.1 関連記事

シンタックスハイライトの下準備

Tumblrでシンタックスハイライトをするメジャーな方法は、SyntaxHighlighterを使うことです。こういう便利なスクリプトを作ってれる人が多くて助かりますね。それではやってみましょう。

(1)使いたいプログラミング言語のスクリプトを取得する。

SyntaxHighlighterのスクリプトを生成するページがあるので、ここで取得するのが簡単です。

(2)SyntaxHighlighterのスクリプトをTumblrのHTMLの<head>セクションに追加。

TumblrのHTMLは「カスタマイズ -> HTML編集」から編集可能です。

SyntaxHighlighterのスクリプトの例は以下になります。てっとりばやくSyntaxHighlighterが対応している言語をすべて設定しています。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

シンタックスハイライトを使う

対応している言語でソースコードを書いて、シンタックスハイライトを使ってみましょう。今回はPythonです。

各記事の「<html>」を開き、ソースコードを書いたら、「<pre class=“brush:プログラミング言語名”></pre>」で囲むとシンタックスハイライトされます。以下はPythonコードなので、「<pre class=“brush:python”></pre>」で囲っています。

def main():
x = "hoge"
y = "fuga"
print(x + y)
if __name__ == '__main__':
main()

ソースコードをきれいに表示させることができました。これで、私も含めてプログラマの方々は安心して技術ブログが書けますね。

この記事を書いた人
最新の記事

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。（写真は旅行先のラスベガス）