【Web】Google Code PrettifyでBloggerやWordPressのコードやコマンドを読みやすくする

投稿日:2020年6月28日
最終更新日:2020年6月28日

Google Code Prettifyでブログのコードを読みやすくする

私はブログにプログラムのコードやLinuxのコマンドを掲載する際、簡単なものならテキストで張ったり、長めのものならGistに上げて張り付けたりしていた。

ただ、テキストでそのまま張ると見にくいし、Gistにいちいちはるのは面倒くさい。そこで、Google Code Prettifyを使ってコードを読みやすくしたので、その方法をメモ。ちなみにGoogle Code Prettifyを使うと以下のようにコードを表示できる。

printf("Hello World");

 

Google Code Prettifyの使い方

1.ヘッダーやサイドバーなどにGoogle Code PrettifyのCDNリンクを埋め込む

やりかたは簡単で、まずブログのヘッダーなどにHTMLでこちらのコードを埋め込む。なお、ヘッダーでなくても記事を読み込んだときにが読み込まれればよいので、サイドバーなどに組み込んでも表示できる。WordPressやBloggerならWidgetなどでHTMLコードが組み込めるので、適当な部分にHTMLコードを追加すればよい。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

これはCDNという仕組みを利用しており、このコードを埋め込むだけで、記事を読み込んだときにGoogle Code Prettifyを実行するJavaScriptを読み込んでくれる。

以下はWordPressのサイドバーに組み込んでみた例。WordPressにログインして「外観」→「ウィジェット」を選択し、サイドバーにHTMLコードとして組み込んでみた。サイドバーは常に読み込まれるので、特に問題なく動作している。

こちらはBloggerに組み込んでみた例。こちらもBloggerにログインして「レイアウト」からサイドバーにHTML/CSSコードとして組み込んでみた。特に問題なく動作することを確認した。

 

2.記事の中のコードをタグで囲む

あとは、コードを使いたい記事の中で、コードを以下のタグで囲むだけ。

<pre class="prettyprint">ここにコードを入力</pre>

試しに、C言語のHello Worldを書いてみると、以下のようになる。

printf("Hello World");

ちなみに、<pre class=”prettyprint lang-c”>のように、C言語やJavaScriptなどを指定するとハイライト表示してくれる。ただし、デフォルトの<pre class=”prettyprint”>だけでも自動判別してくれるので、意図通りいかないときに指定すると良いかも。

0

投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください