プログラミング系の調べものをしていたり、ブログを読んでいたりすると、ソースコードを記載しているものが多いです。
それで自分もやってみようと思い、Bloggerにソースコードを埋め込む方法を調べてみました。
すでに、様々なわかりやすい情報が転がっているし、自分もそれを参考にしてやってみたわけですが、自分なりの理解で調べたことやってみたことを紹介してみたいと思います。
基本自分が採用する基準としては、
- お金がかからないこと！
- なるべく手軽に！
2のほうは、できれば、って感じですが。
選ぶ基準
さらに以下に紹介するように、方法はさまざまあるようですが、「コードが長くなった場合、左右にスクロールできるか、スライドできるか」ということを基準に探しました。
調べたもの
Google-code-prettify
実際、やってみたところ簡単でした。
Bloggerの設定ページでHTMLのヘッダーとかを編集できる場所があるので、headの中に以下の一行を追加するだけのようです。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
CDNというものを利用した方法らしく、上記一行を追記するだけです。なにかファイルとかをダウンロードしたり、用意したりするわけではないです。
実際に、ソースコードを埋め込むには、普段記事を各画面でHTMLモードにして
<pre class="prettyprint”>
ここにコードを書く
</pre>
とかけばコードが記述できます。
実際、試した自分のBloggerのページがこちら。
メジャーな言語は、下記のようにclassに追加指定することで、何の言語のコードなのか自動で判別してくれるそうです。
<pre class="prettyprint lang=python”>
pythonのコードを書く
</pre>
冒頭に記述した一行のskin=sunburstのところはいくつかバリエーションがあり、
Gallery of themes for code prettify
を参考にskinの値を変えれば、色などの組み合わせを変更できるようです。
これはCDNを使った方法ということらしいです。これについて調べるまで、CDNっていう言葉すら知らなかったので受け売りですが。
拡張子が.jsのファイルとか.cssのファイルとかを自分で用意しなくても、上記URLを記述すれば、ネット上からファイルを参照して適用してくれるということらしいです。
CDNというのがまだ詳しくないので、説明が間違ってたらご指摘ください。
(Bloggerの話とは少しずれますが)でもやっぱり、javascriptベースということには変わらないので、.jsとか.cssのファイルダウンロードし、同じディレクトリにおいたりして読み込むような方法ももちろんできるようですが、それはちょっと今回の件とは少しずれるので、また別の機会にしたいと思います。
Syntaxhighlighter
これも、割と簡単でした。
以下のコードを、bloggerのheaderを編集するページのheadの中にかけばいいようです。
<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/shBrushBash.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/shBrushDiff.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/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/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 language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
これも同様に、上記を追記するだけで、なにかファイルを自分で用意するわけではありません。
実際にコードを書くには、記事の作成画面で、HTMLモードにし
<pre class="brush:[記述する言語の名前];">
//ここにコードを記述
</pre>
と書くか、
<script class="brush:html" type="syntaxhighlighter"><![CDATA[
//ここにコードを記述
]]></script>
と書きます。
実際試したBloggerのページがこちら。
特に、追記した2行目の
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
のshThemeDefault.cssの部分は、以下のページを参考に値を変更すれば、色などを変更できます。Blogerのサンプルページではmidnightにしています。
スタイルのサンプル→
Syntaxhighlighter cssthemes
highlight.js
これも割と簡単です。
これもCDN版があるらしく、以下のコードをheaderに追記すればいいようです。
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
で実際にコードを埋め込むには
<pre><code>
ここにコードを記述
</pre></code>
とします。
実際、試した自分のBloggerのページがこちら。
その他
その他にもまだまだたくさんあるようですが、それは以下で紹介しているリンク先などをみてください。
参考にした資料
シンタックスハイライターのいろいろ紹介しているもの
google-code-prettity関連
- Google code-prettifyの使い方（2017年6月現在）
- google-code-prettify(『ぎるばーとの日記』の記事)
- ブログでソースコードをきれいに表示するよ！ | google-code-prettify
- google-code-prettifyを使って、自分のホームページで紹介するコードに色を付ける
Syntaxhighlighter関連
Bloggerでコードを綺麗に表示できるようにする
BloggerでSyntaxHighlighterを使用する方法
highlighter.js関連
ブログでソースコードをキレイに表示できるJavaScriptライブラリ「highlight.js」の導入方法
Blogger で highlight.js を使ってみた