非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

BloggerでSyntaxHighlighterを導入する方法

      2017/04/11

無料ブログサービスはWordPressみたいに自由にプラグインを導入できるわけではないので、カスタマイズに制約があるのですが、その中の1つとしてあるのがプログラムのソースコードの表示です。

一般的な雑記ブログではソースコードなんて貼り付ける機会なんてないと思いますが、当方、プログラミング系ブログなので、こいつができるかどうかは死活問題なのです。

以前、このブログもBloggerからWordPressに引っ越してきたのですが、その原因の1つにソースコードの貼り付け問題だったわけです。

ところが、BloggerにもSyntaxHighlighterを導入してきれいに表示することができるとのことで、ちょっとやってみました。

[ad#top-1]

直接HTMLの<head>タグ内に埋め込む

Bloggerには直接HTMLを編集することができるのですが、その機能を使ってSyntaxHighlighterを<head>タグ内に埋め込むことができるようです。

管理画面の「テーマ」メニューを開き、「HTMLの編集」ボタンを押します。

 

HTMLの編集画面が現れます。

 

その中から、</head>タグを探します。テンプレートによって場所は変わると思いますが、僕が使っているものは、3761行目にありました。結構深い。

 

</head>タグの直前に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/shBrushCpp.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/shBrushCss.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/shBrushJScript.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/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/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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
 

 

記事中にソースコードを書いてみる

書くときはHTMLエディタで書くと良いでしょう。

 

書き方は以下の通り、<pre>タグを使って書きます。言語の指定は<pre class=”brush: 言語名”>という風に指定します。以下はJavaの例です。

<pre class="brush: java">
<!-- ここにソースコードを書く -->
</pre>
 

 

結果

結果はごらんのとおり、ソースコードがきれいに表示されました。

 

BloggerでもWordPressみたいにSyntaxHighlighterが利用できてありがたいです。Bloggerはほかにも記事一覧型のテーマがあったり、AdSenseの審査が通りやすかったり(?)と、もう少し注目されてもよさそうなんですけどね。

.

[ad#ad-1]

 

スポンサーリンク

 - アプリ・サービスレビュー