どうもこんにちは。hagechipです。
今回は特別な環境を必要としないで、
見やすいソースコードをブログに載せる方法を紹介します。
具体的にはGoogle code prettify を使用してソースコードを
表示する方法を紹介します。
作るほどのものでもないけど目次
SyntaxHighlighterがうまく使えない
昨日は長時間、アメブロのデザインと戦ってました。
プログラミングのコードを載せたいんだけどそのまま載せると見づらい。
私がよく見るサイトは"SyntaxHighlighter"っていう
gitを用いてコードを表示している様子。
こんなやつ（"SyntaxHighlighter"でGoogle検索、トップに出てきたサイト）
で、自分の掲載予定のコードにも適用してみたいと思うわけです。
が、いろいろ調べながら、いろいろ試してみたけどどうもうまくいかない(´・ω・｀)
3時間くらい費やしたけどやっぱりうまくいかない(´；ω；｀)
なんの修飾もされずにただただ文字が表示されるのです(′д‵)
Google code prettify ？
"SyntaxHighlighter"が使えない。もう諦めて平文として載せちゃおうかなぁと
思っていたところに"Google code prettify "なんていうものに出会う。
Google code prettifyもソースコードをキレイに表示するために
Google社で開発された修飾のようです。
今ではGitHubに移行され、完全なオープンソースとなっています。
どうやら「SyntaxHighlighterは重すぎる」→「Google code prettify いいんじゃね！？」
って風潮も多少あるようです（？）
というわけで、備忘録の意味も兼ねて手順を残しておきます。
実装
難しいことは何も言いません。こうやりゃ動く！！
私は公開ファイルサーバを持っていないため、
ファイルサーバ不要の方法を紹介します。
カスタマイズは多少制限されますが問題はありません。
やることは大きく分けて2つあります。
・前準備としてやっておくこと(アメブロ内の設定)
・ブログを書くときの方法
まずは前準備としてやっておくこと。
管理トップ画面から管理・設定 - プラグインの追加 - フリープラグインと移動します。
で、下の文字を入力します。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&&skin=sunburst"></script>
<style type="text/css">
pre.prettyprint {
font-size:12px;
word-wrap:normal;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-position: outside;
list-style: decimal;
border-left: 1px #707070 solid;
padding-left: 8px;
}
</style>
すでに何かある人は一番下に入れてください。
半角3800文字相当までしか入らないようなのであしからず。。。
で、"保存"ボタンをクリックしてください。
次にこの画面が表示されるので、「こちら」をクリックして
フリープラグインのサイドバーへ設置します。
最後に保存ボタンを一度クリックして前準備完了！
「フリープラグイン」を右側に入れないといけないというような
記載も見つけましたが、未確認です。
次は実際にブログを書く際のやり方です。
ブログを書くときに、HTMLのタグ設定を行う必要があります。
ブログを書いている画面から、まずはHTML表示に切り替えます。
で、この文字列をコードを挿入したい箇所に書きます。
<pre class="prettyprint linenums"> </pre>
で、通常表示に戻して、挿入した部分に
記載したいコードを書けば完了。簡単です。
HTML表示での修正も可能です。
<pre>タグはタグ内の記載をそのまま表示するので、
<pre></pre>の間にコードをコピペすればオーケー。
ただ、<, >, & の3文字は、それぞれ< , > , & と
変換する必要があるので注意してください。
ちなみにコードの修飾はブログ表示時に実行されます。
ので、下書き時に確認することはできないようです。。。
字体が変わるので、それで適用範囲をまずは確かめ、
最終的には公開後、公開されたブログを見て確認してください。
私の環境では「アメンバー限定公開」でも適用されませんでした。
このコードの修飾で、こんな感じに変わります！
見やすさが全然違いますね！？違いますね！？
違いますよね？笑
static void Main()
{
System.Console.WriteLine(" Hello! Google code prettify!");
}
static void Main()
{
System.Console.WriteLine(" Hello! Google code prettify!");
}
ちょっと説明
難しいことは何も言いません！とは言いましたが、
まぁちょっとくらいは説明を加えておきます。
多少は自分流にカスタマイズできるようにもなります。
まずはフリープラグインに記載したコードから
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&&skin=sunburst"></script>
1行目はどこのファイルを参照するかを記載しています。
自分でファイルサーバを持たない代わりに、rawgitに公開されている
ファイルを読み込み、文字列の修飾を行っているということですね。
ここで、最後のskin= の後ろを編集することで、テーマを変更することができます。
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html
テーマはダウンロード用にもいろいろなものが公開されています。
まだ種類は少ないですが、公式のものも今後増えるかもしれませんね。
https://jmblog.github.io/color-themes-for-google-code-prettify/
<style type="text/css">
2行目以降はcssファイルに対するオプションの指定です。
pre.prettyprint {
font-size:12px;
word-wrap:normal;
}
ここでは全体の指定を行っています。
font-size:でフォントサイズを少し小さめの12pxに指定しています。
好きなサイズに調整してください。
word-wrap:は改行の指定です。
指定しなければ、表示の際、右端で自動で改行してくれます。
normalにすることで改行をしないようにしています。
自動改行にしたい場合はこの行を削除してください。
ブラウザやページの設定によってスライドバーが表示されるとかされないとか。。。
私の環境ではサイドバーも表示されていませんが、
改行されるのも見づらいかなと思い変更しています。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-position: outside;
list-style: decimal;
border-left: 1px #707070 solid;
padding-left: 8px;
}
ここでは全体の行数表示の設定を行っています。
この7行目で全ての数字を表示するようにしています。
なにも指定しなければ、行数は5行おきにのみ表示されます。
list-style-position: をoutside にしてコード表示領域と行数表示領域を分けています。
border-left: はコード表示領域と行数表示領域の間の境界線の設定です。
padding-left: は境界線からコード表示までの隙間の設定です。
これがないとなかなか窮屈に見えると思います。
ここで実装しているものの他にもオプションは様々なものがあります。
いろいろ調べて、好きなように表示できるようにするといいと思います。
最後にHTMLへのタグ実装の説明
<pre class="prettyprint linenums"> </pre>
class にprettyprint を指定することで「Google code prettifyを使いますよ」
という宣言をしています。
その後ろのlinenums は行数を表示するためのオプションです。
今回のコード表示のように、行数を表示したくなければ
class="prettyprint" だけでOKです。
また、ちょっと上のコード表示のように、行数を途中から指定したい場合は、
linenums の後ろに「:数字」を書き入れます。
例えば、7から表示する場合は、class="prettyprint linenums:7 となります
説明はここまでです。
HTMLへの記載については他の人の実装を参考にしてみるのもいいと思います。
気になる表示方法を見つけたらソースを見てみましょう。
（FireFox, MicroSoftEdgeではctrl + u でそのページのソースHTMLが表示されます)
けっこういいヒントになります。
それでは今回はここまで。
ハウス栽培の本題とは違うところに時間をとられてしまった。。。