Help us understand the problem. What is going on with this article?

Bloggerにソースコードを埋め込む方法

More than 1 year has passed since last update.

プログラミング系の調べものをしていたり、ブログを読んでいたりすると、ソースコードを記載しているものが多いです。

それで自分もやってみようと思い、Bloggerにソースコードを埋め込む方法を調べてみました。

すでに、様々なわかりやすい情報が転がっているし、自分もそれを参考にしてやってみたわけですが、自分なりの理解で調べたことやってみたことを紹介してみたいと思います。

基本自分が採用する基準としては、

  1. お金がかからないこと!
  2. なるべく手軽に!  

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のページがこちら

その他

その他にもまだまだたくさんあるようですが、それは以下で紹介しているリンク先などをみてください。

参考にした資料

シンタックスハイライターのいろいろ紹介しているもの

  1. あなたのソースコードを彩る、Syntax Highlighterまとめ

  2. Syntax Highlighterまとめ(2012年9月版)

google-code-prettity関連

  1. Google code-prettifyの使い方(2017年6月現在)
  2. google-code-prettify(『ぎるばーとの日記』の記事)
  3. ブログでソースコードをきれいに表示するよ! | google-code-prettify
  4. google-code-prettifyを使って、自分のホームページで紹介するコードに色を付ける

Syntaxhighlighter関連

Bloggerでコードを綺麗に表示できるようにする
BloggerでSyntaxHighlighterを使用する方法

highlighter.js関連

ブログでソースコードをキレイに表示できるJavaScriptライブラリ「highlight.js」の導入方法
Blogger で highlight.js を使ってみた

piro_erdes
意識の研究したくて留学したいなーと思って準備中です。今のところがあんま給料よくないんで誰か雇ってください。 基本的には、お金がなくてもできる範囲のことを書きます。とはいっても、最低限PCとネット環境があることは前提。お金がかかることは、その都度書きます。
http://erdeserdes.blogspot.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした