ブログを始めたらやってみたいことの１つがプログラムのソースコードを表示することでした。
研究でプログラミングするときはよくググっていいます。特にブログにプログラムのソースコードを表示するときに見やすく行番号が付いていたり、色分けがされているコードはみやすくていいですね！
自分もこれからコードなどの公開も行って行きたいと考えているので、綺麗にソースコードを表示する方法を調べてみました。すると何やら「SyntaxHighlighter」を導入するとできるようです。早速、導入を試みたんですけどうまくいかない…
Bloggerのテンプレートに「Vaster2」を導入しているからできないのか、Bloggerに何か変更があって検索したサイトの方法だとできないのかわからない状況でした。
色々根気よく調べていると導入ができましたのでまとめておこうと思います。
SyntaxHighlighterの導入
はじめにBloggerの設定画面からテーマを選択します。
すると、下図のような画面が表示されるのでHTMLの編集を選択します。
次に、以下のコードをコピーします。
エリア内でダブルクリックするとコピーすることができます。
エリア内でダブルクリックするとコピーすることができます。
<!-- SyntaxHighlighter 追加 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>
<!-- autoloader対応 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js' type='text/javascript'/>
<!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<!-- テーマの読み込み(shCore.css内包版) -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.css' rel='stylesheet' type='text/css'/>
<script language='javascript' type='text/javascript'>
var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83';
SyntaxHighlighter.autoloader(
'actionscript3 as3 '+shCdnUrlStr+'/scripts/shBrushAS3.js',
'bash shell '+shCdnUrlStr+'/scripts/shBrushBash.js',
'coldfusion cf '+shCdnUrlStr+'/scripts/shBrushColdFusion.js',
'cpp c '+shCdnUrlStr+'/scripts/shBrushCpp.js',
'c# c-sharp csharp '+shCdnUrlStr+'/scripts/shBrushCSharp.js',
'css '+shCdnUrlStr+'/scripts/shBrushCss.js',
'delphi pascal pas '+shCdnUrlStr+'/scripts/shBrushDelphi.js',
'diff patch '+shCdnUrlStr+'/scripts/shBrushDiff.js',
'erlang erl '+shCdnUrlStr+'/scripts/shBrushErlang.js',
'groovy '+shCdnUrlStr+'/scripts/shBrushGroovy.js',
'html xml xhtml xslt '+shCdnUrlStr+'/scripts/shBrushXml.js',
'java '+shCdnUrlStr+'/scripts/shBrushJava.js',
'javafx jfx '+shCdnUrlStr+'/scripts/shBrushJavaFX.js',
'javascript js jscript '+shCdnUrlStr+'/scripts/shBrushJScript.js',
'perl pl '+shCdnUrlStr+'/scripts/shBrushPerl.js',
'php '+shCdnUrlStr+'/scripts/shBrushPhp.js',
'text plain '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'powershell ps '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'python py '+shCdnUrlStr+'/scripts/shBrushPython.js',
'ruby rails ror '+shCdnUrlStr+'/scripts/shBrushRuby.js',
'scala '+shCdnUrlStr+'/scripts/shBrushScala.js',
'sql '+shCdnUrlStr+'/scripts/shBrushSql.js',
'vb vbnet '+shCdnUrlStr+'/scripts/shBrushVb.js'
);
SyntaxHighlighter.config.bloggerMode = true; // Blogger対応
SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
//不具合が起きる為コメント化。使用時はpre側で要記述。
//SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
// コード表示させるタグ名(デフォルト"pre")
// SyntaxHighlighter.config.tagName="";
SyntaxHighlighter.all();
</script>
<style>
.syntaxhighlighter {
border: 1px solid #bbbbbb !important; /* 罫巻 */
/* 角丸 */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
-ms-border-radius: 10px !important;
-o-border-radius: 10px !important;
border-radius: 10px !important;
}
.syntaxhighlighter table caption {
padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */
color: #ffffee !important; /* タイトル文字色 */
background-color: #666666 !important; /* タイトル背景色 */
}
.syntaxhighlighter, .syntaxhighlighter div,
.syntaxhighlighter code, .syntaxhighlighter span {
line-height: 1.2em !important; /* 行間 */
}
.syntaxhighlighter table td.code {
padding: 0.3em 0 !important; /* コードエリアのpadding */
}
.syntaxhighlighter {
background-color: #222222 !important; /* コード背景色 */
}
.syntaxhighlighter .line.alt1 {
background-color: #222222 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
background-color: #333333 !important; /* コード奇数行背景色 */
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
color: #88eeee !important; /* コメント色 */
}
.syntaxhighlighter .preprocessor {
color: #88eeee !important; /* #以降の色 */
}
.syntaxhighlighter .value {
color: #00cc00 !important; /* 代入数字色 */
}
.syntaxhighlighter.nogutter td.code .container textarea,
.syntaxhighlighter.nogutter td.code .line {
padding-left: 1em !important; /* 行番号非表示時左空き量 */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #114466 !important; /* 行強調時、行背景色 */
}
.syntaxhighlighter .line.highlighted.number {
color: white !important; /* 行強調時、数字？ */
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #3185b9 !important; /* 行強調時、行番号背景色 */
color: #121212 !important; /* 行強調時、行番号数字色 */
}
</style>
<!-- SyntaxHighlighter 追加 -->
コピーしたら先程選択して開いたHTMLのページで「</body>」タグを探します。おそらく下の方にあります。見つけたら「</body>」タグのすぐ上にこぴーしたものをペーストします。
ここで注意することが、「</body>」ということです。自分も様々なサイトを調べていたのですが多くが「</head>」タグのすぐ上にペーストする方法でした。しかし、うまく導入することができずハマってしまいました。
ペーストを終えたら、テーマの保存を忘れずに行いましょう。
これで、SyntaxHighlighterの導入は終わりです！
ここで注意することが、「</body>」ということです。自分も様々なサイトを調べていたのですが多くが「</head>」タグのすぐ上にペーストする方法でした。しかし、うまく導入することができずハマってしまいました。
ペーストを終えたら、テーマの保存を忘れずに行いましょう。
これで、SyntaxHighlighterの導入は終わりです！
ソースコードを表示してみる
実際に記事にソースコードを表示するには投稿画面でHTMLを選択します。
次は、自分がソースコードを表示したい場所に以下の2つのコードのそちらかをコピー&ペーストすることで表示することができます。
<pre>を使用する場合
<pre class="brush:text" title="タイトル"> 書きたいコード </pre>
<script>を使用する場合
<script class="brush:text" title="タイトル" type="syntaxhighlighter"><![CDATA[ 書きたいコード ]]></script>
「class="brush:[言語]"」の[言語]の部分が、以下の言語に対応しています。
「<pre>」を使用する場合「<」を「<」へ「>」を「>」へ置換が必要になります。
これで、ちゃんと表示ができたのではないでしょうか？
表示のカスタマイズなどもしやすくなっているので皆さんの好みの設定にカスタマイズしてみてください！
やってみました。/bodyタグの上に置くんですね。わかりやすい記事です。
返信削除