「Blogger」投稿記事にソースコードをかっこよく貼り付けたい
 |
Bloggerでブログをやっていて、ソースコードを割と記事に使うことが多くなり、他のブログでもやってるようなソースコードの貼り付けをやりたくなりました。
調べてみると、「Google-code-prettify」というものがあり、こちらを使用すると、割とかっこよくソースコードを投稿記事に貼り付けられるようなので、試してみました。
折角なので、この記事にもソースコードを貼り付けながら、記事2したいと思います。
「Google-code-prettify」を読み込む
ブログのテンプレート<head>～</head>内、または「HTML＆JavaScript」のガジェットを追加して、以下のソースコードを貼り付けて、「Google-code-prettify」を使用できるようにします。
このJavaScriptを貼り付けないと始まらないので、重要です。
投稿記事で「Google-code-prettify」を適用させる
Bloggerで「Google-code-prettify」を使用できる準備はできましたが、実際に投稿記事でソースコードを使用するには、「HTMLビュー」と「作成ビュー」を切り換えながら、編集を行う必要があります。
最初に、「作成ビュー」でソースコードを含んだ投稿記事を作成します。
理由は、Bloggerでは「作成ビュー」で、ソースコードを貼り付けると、特殊文字が自動的に置き換わってくれるので、ソースコードをそのままレイアウトして、あとから「Google-code-prettify」を適用させていくのが良いでしょう。
次のように、ソースコードを囲みます。「linenums」を記述してあげると、ソースコードに5行ごとに、行番号が表示されるようになる。
このタグで、ソースコードを囲めば、必要最低限のことが完了するので、まずはここまでやってみましょう。
行番号を1行ごとに表示したい
1行ごとに、行番号を表示させるには、スタイルシートに、以下のように記述しておく必要がある。
.prettyprint ol.linenums > li {
list-style-type: decimal;
/* または */
list-style-type: decimal-leading-zero;
}
少々面倒と感じるかもしれないが、行番号があるとわかりやすいので、おすすめしたい。
さて、複数行あるソースに適用させると、以下のように行番号が1行ごとに表示される。
console.log('Hello World') console.log('Hello World') console.log('Hello World') console.log('Hello World') console.log('Hello World')
list-style-type: decimal;
/* または */
list-style-type: decimal-leading-zero;
}
さて、複数行あるソースに適用させると、以下のように行番号が1行ごとに表示される。
console.log('Hello World') console.log('Hello World') console.log('Hello World') console.log('Hello World') console.log('Hello World')
細かいことは、さておき、だいぶ良い感じになってきた。
せっかくなので、もうちょい手を加えたい。
ソースコードを折り返したい
この投稿記事を書いた後に、気づいたことですが、ソースコードが長いと、枠から飛び出てします。
そこで、以下のように、CSSを追加しました。
pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; > word-wrap: break-word; }
すると、現在のソースコードのように、折り返されたので解決です。
「Google-code-prettify」のテーマを変更したい
「Google-code-prettify」の表示テーマを変更できると記載があっても、その変更方法がわかりにくくて、困っていませんか？
全然わからないわーって、なっていましたよ。
調べてみると、最初にJavaScriptを読み込む設定を行いましたが、実は以下のように変更する必要があります。
「run_prettify.js」の後に、「?skin=sunburst」と記述する必要があります。
Default（default）、Desert（desert）、Sunburst（sunburst）、Sons-Of-Obsidian（sons-of-obsidian）、Doxy（doxy）など、５つほど、テーマが紹介されているのを見かけますが、すべて小文字で記述しますので、注意しましょう。
また、テーマだけでなく、以下のように言語指定によって、スタイルが変わります。
上の「?lang=js&skin=sunburst」のように、組み合わせて利用してみるのも良いかもです。
