Google-code-prettifyでBloggerにソースコードを綺麗に載せる

公開日:2018-04-012   最終更新日:2021-11-002

 Google Code Prettify

Google Code Prettify は、Googleが開発したPREタグ内のコードをきれいに見せてくれるJavaScriptのライブラリです。同じような機能を持ったライブラリではSyntaxHighlighterが有名です。ここでは、Google BloggerでGoogle Code Prettifyを使用する方法を説明しています。

参考記事）Bloggerでgistを編集中に場所がわかるように埋め込む

導入方法

[テーマ] > [HTMLの編集]の順番にクリックしてHTMLの編集画面を表示します。
<head>～</head>の間に下の一行を追加してください。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
追加する場所は<head>～</head>の間であればいいので、<title>の前後などに適当に追加してください。下は追加場所の例です。 
<html ...>
  <head>
    <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
    <title>...</title>
  </head>

テーマ(skin)を選ぶ

Google Code Prettify は、<head>～</head>に書く<src='.../run_prettify.js'/>でテーマ(skin)を指定することができます。
テーマは下のの5種類から選べます。
  • Default - (なにも指定しないと、これになります)
  • Desert - <src='.../run_prettify.js?skin=desert'/>
  • Sunburst - <src='.../run_prettify.js?skin=sunburst'/>
  • Sons-Of-Obsidian - <src='.../run_prettify.js?skin=sons-of-obsidian'/>
  • Doxy - <src='.../run_prettify.js?skin=doxy'/>
それぞれのテーマ(skin)の見え方はGallery of themes for code prettifyを見てください。

使い方

基本的な使い方

基本的な使い方は下のとおりです。編集画面で[HTML]を選んでHTMLを直接書きます。 
<pre class="prettyprint">
ソースコードなど
</pre>

行番号を付ける

<pre class="prettyprint linenums">
ソースコードなど

classにlinenumsを追加すると行番号が付きます 
 </pre>

横スクロールバーを付ける

ソースコードが横に長い場合に、スクロールバーが表示されないと見えなくなってしまいます。横に長い場合に横スクロールバーを表示するには以下のように
style="overflow:auto; overflow-y:hidden;"
を指定します。
<pre class="prettyprint" style="overflow:auto; overflow-y:hidden;">
aaaaaaaaaaBBBBBBBBBBccccccccccDDDDDDDDDDeeeeeeeeeeFFFFFFFFFFggggggggggHHHHHHHHHHiiiiiiiiiiJJJJJJJJJJkkkkkkkkkkLLLLLLLLLLmmmmmmmmmNNNNNNNNNNooooooooooPPPPPPPPPPqqqqqqqqqqRRRRRRRRRR
</pre>