方法その1
導入する
Boggerのトップページのサイドメニューの「レイアウト」をクリックし、「HTML編集」ボタンを押す.
HTML内で、</head>タグを探し、そのすぐ上に以下のコードを挿入する.
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'></script>
HTMLの上側にある「テーマを保存」ボタンを押す.
これでOK.
実際につかう
記事を作成する際は、HTMLの方がよい.
表示させたいソースコードを、<pre class="prettyprint linenums">...<pre>の中に入れる(基本は、<pre class="prettyprint">...<pre>だが、これにすると、さすがに不格好でだれも使わないと思ったので、linenumsクラスも用いた. ).入力の際は、<を<に変えないと、うまく表示されないので注意.
プレビューで確認するとちゃんと出力されていることがわかる.
テーマの変更
テーマの変更もできる. 以下の中から選べる.
CGIパラメータの"skin"を指定することでテーマを変更できる. 例えば、"Doxy"にしたいときには、「導入する」で挿入したコードを次のようにすればよい.
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy'></script>
他のテーマでも大文字を小文字にすればよいはず(試してない).
方法その2
導入する
まず、必要なファイルを以下のサイトからダウンロードする.
右上の「Clone of download」ボタンを押し、メニューの中の「Download Zip」ボタンを押すとダウンロードが開始される.
.zipファイルを解凍したら、"loader"フォルダーに入っている"prettify.css"、及び、"prettify.js"を外部サーバーにアップロードする(Bloggerには無理なので、Googleドライブや、GitHub等. GitHubについては、「Github Pagesでウェブサイトを構築する方法」が役に立った).
次に、方法その1と同様に、HTMLを編集する. まず、</head>タグの上に以下のコードを挿入する.
<link href='[path]/prittyfy.css' rel='stylesheet' type='text/css'/> <script src='[path]/prettify.js' type='text/javascript'/>
コード中の[path]は、"prettify.css"と、"prettify.js"をアップロードしたフォルダー名を指定する. 同じフォルダーでなくてもよい. 例えば、"https://hogehoge.com/styles/prettify.css"、"https://hogehoge.com/scripts/prettify.js"など. さらに、<body>タグ内を編集して、次のようにする.
<body ... onload='PR.prettyPrint()'>...はすでに書かれている内容. 次の写真を見るとわかりやすいと思う.
後は、「テーマを保存」を押して変更を適用するだけ.
テーマの変更
「方法その1」の「テーマ変更」で見たサイト(その2の最初のほうでダウンロードしたフォルダーの"styles"フォルダーに入っている.)以外に次のサイトからテーマの閲覧、ダウンロードができる.
気に入ったデザインのテーマがあったら、必要ならダウンロードして、アップロードしよう. ここでは、"Doxy"を選んだとして説明する.今までと同様に、</head>タグの上に以下のコードを挿入する.
<link href='[path]/doxy.css' rel='stylesheet' type='text/css'/>ただし、"prettify.css"を読み込んでいる箇所は削除する(prettifyのテーマが書かれたスタイルシートは1つだけ読み込む. 次の写真を参照).
最後に、「テーマを保存」を押す. これで、うまくいくはず.
表示される行番号を増やす
使用しているテーマによっては、表示される行番号が少ない場合がある. その場合は、まず、Bloggerの「テーマ」を開いて、「カスタマイズ」ボタンを押す.
そこで、上に出てきた「Bloggerテーマデザイナー」の一番左のメニューの「上級者向け」をクリックし、隣のメニューの一番下にある「CSSを追加」を押し、さらにその隣に次のコードを書く.
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
そして、右上の「ブログに適用」ボタンを押す.
ソースコードが横にはみ出ないようにする
使用テーマによっては、ソースコードが横にはみ出てしまう場合がある(デフォルトが当てはまる). これを解決するには、「表示される行番号を増やす」で変更したCSSに次の内容を加えればよい.
pre {
overflow: auto;
resize: horizontal;
}
こうすると、ソースコードが横にスライドできるようになる. もし、すでに<pre>タグを他のことに使っているなら、次のように書けばよい.
pre.my-code {
overflow: auto;
resize: horizontal;
}
そして、面倒だが、ソースコードを書く際に毎回次のように書く.
<pre class="prettyprint linenums; my-code"> source code... </pre>
使い方
最後に使い方をまとめる. すでにみたが、基本的な使い方は次である.
<pre class="prettyprint"> source code... </pre>
すでに注意したが、ソースコード内の<を<に変える必要がある.
また、次のように入力してもよいが、Bloggerでは、うまく表示されない?(少なくとも、私が試したときはちゃんと表示されなかった)ので、推奨しない.
<pre><code class="prettyprint"> source code... </code></pre>
"PR.prettyPrint()"がどの言語のコードかを自動で判定してくれるが、例えば、C++で書かれたことを特定したい場合は、language-cppスタイルクラスを使えばよい(htmlの場合は、lang-htmlでいいみたい. cssも?).
<pre class="prettyprint lang-cpp"> source code... </pre>
linenumsクラスを付け加えれば、行番号をつけることができる. さらに、例えば、linenums:50と書けば、50番目から行数を数え始めるようにできる.
<pre class="prettyprint linenums:50"> source code... </pre>
また、あまり使わないと思うが、nocodeクラスを使うことで、コードでない文字列も入れることができる.
<pre class="prettyprint">
source code... <span class="nocode">This is not code</span> ...
</pre>
使用例
次のようにhtmlに記述する(見やすさのため3行目の<はエスケープしてない).
<pre class="prettyprint linenums:30 language-cpp">
int foo(int arg) {
cout << "Hello World from foo!" << endl;
/*
Hello World! <span class="nocode">This is not code</span>
*/
return 0;
}
</pre>
参考にしたウェブサイト
とても参考になった. 本記事の大体はこのサイトに拠っている. ソースコードを見やすくする方法で、ここに書いてないことがたくさんあるので、見るべきである.「その1の方法」の内容(Blogger向けではない)をもう少し詳しく簡潔にまとめてある.
英語が読めるなら、上記2つのサイトを見れば十分だと思う. また、前者のサイトには、code prettifyの対応言語が載っている.
