Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう！

You are here: Home / 技術 Tips & Tutorials / [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

By Leave a Comment

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

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

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

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

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()

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

The following two tabs change content below.
Keid
Twitter のプロフィール

Keid

カナダを拠点に活躍する（予定）デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。（写真はラスベガス）

関連記事