BloggerでSyntaxHighlighterを導入する方法
2017/04/11
無料ブログサービスはWordPressみたいに自由にプラグインを導入できるわけではないので、カスタマイズに制約があるのですが、その中の１つとしてあるのがプログラムのソースコードの表示です。
一般的な雑記ブログではソースコードなんて貼り付ける機会なんてないと思いますが、当方、プログラミング系ブログなので、こいつができるかどうかは死活問題なのです。
以前、このブログもBloggerからWordPressに引っ越してきたのですが、その原因の１つにソースコードの貼り付け問題だったわけです。
ところが、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]
スポンサーリンク