Bloggerでソースコードをきれいに表示する方法

更新日: 公開日:

t f B! P L

無料で使えるGoogleのブログサービス「Blogger」で、ソースコードを見やすくきれいに表示する方法を紹介します。

ソースコードを表示する方法はいくつかありますが、今回はGoogle-code-prettifyを使いたいと思います。

Blogger ソースコード表示

テーマのHTMLに追加する

テーマのHTMLに、Google-code-prettifyに関する記述を追加します。

念のためバックアップをとってからHTMLの編集を行ってください。

Bloggerのメニューの [テーマ]  > 右上のその他アイコンその他アイコンをクリックします。

Blogger テーマ その他アイコン

表示されたメニューの [HTMLを編集] をクリックします。

Blogger HTMLを編集

表示されたHTMLの</head>の前に次の内容を追加します。

<!-- Google-code-prettifyを追加 -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"/>
<!-- /Google-code-prettify -->

画面右下の「保存」ボタンをクリックして保存します。

Blogger HTML保存

Google-code-prettifyを使ってソースコードを表示する

ブログの記事を作成する際、HTMLモードで次のようにソースコードを<pre>タグで囲います。

<pre class="prettyprint"> ソースコード </pre>

ソースコードは、このように表示されます。

Bloggerでソースコードをきれいに表示する

行番号を表示する

行番号を表示したい場合は、次のように「linenums」という記述を追加します。

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

白とグレーのしましまになって、5行ずつ行番号が表示されました。

Bloggerでソースコードをきれいに表示する

1行ずつ行番号を表示する

行番号の表示をデフォルトの5行ずつから、1行ずつに変更したい場合は、こちらのcssを追加します。

<style type="text/css"> /* Google-code-prettifyの行番号を1行ずつ表示する */ pre.prettyprint.linenums li{ list-style-type: decimal; } </style>

1行ずつ行番号が表示されました。

Bloggerでソースコードをきれいに表示する

スキンを選択する

Google-code-prettifyには、5種類のスキンが用意されています。

Gallery of themes for code prettifyで好みのスキンを選んで、「skin=」で指定します。

たとえば、「sunburst」というスキンを設定する場合は、このように記述します。

<!-- Google-code-prettifyを追加 --> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"/> <!-- /Google-code-prettify -->

ソースコードが、「sunburst」で表示されます。

Bloggerでソースコードをきれいに表示する

言語を指定する

プログラミング言語を指定することもできます。

<pre class="prettyprint lang=python"> pythonのソースコード </pre>

スクロールバーを表示する

長いソースが含まれている場合など、スクロールバーを表示したいときは、次のように指定します。

<pre class="prettyprint linenums" style="overflow: auto; word-wrap: normal;">

もしくは、cssに次の記述を追加します。

<style> pre.prettyprint { overflow: auto; word-wrap: normal; } </style>

スクロールバーが追加されました。

Bloggerでソースコードをきれいに表示する

まとめ

ソースコードを見やすく表示できるGoogle-code-prettifyは、オプション指定も簡単なのでとってもおすすめです。

このブログを検索

カテゴリ

プロフィール


こんにちは!

まあちゃん&うさたん のママです。


ラズベリーパイを使った簡単な電子工作やプログラミングに挑戦しています。


よかったら、詳しいプロフィールも見てください。


QooQ