Google Code Prettifyの使い方

2016-06-25 Wordpress CSS, JavaScript, ソースコード 0

ウサヲです。

ウェブ関連の備忘録ブログを作ろうとした時に、必ず必要になるのがソースコードの掲載です。「Google Code Prettify」を使って、ハイライトとかも使って見やすいコードを掲載したいと思います。その方法の備忘録です。

１．「Google Code Prettify」のダウンロード

小さい字で「downloads」というリンク先があります。それをクリック。

いろいろファイルがあるのですが、よくわからないな、というときには一番上を選択してダウンロードします。

この記事のときには「prettify-small-4-Mar-2013.tar.bz2 」でした。

２．必要なファイルをフォルダに入れる

prettify.jsとprettify.cssを使います。他にも色々使えそうですが、とにかく一歩目という方はこの二つで試します。

ウサヲの場合はprettify.jsをテーマファイルの中に作っているjs専用のフォルダに、prettify.cssを同じくcss専用のフォルダに入れました。

３．<head>-</head>に必要事項を書く

 <link rel="stylesheet" href="xxxxx/css/prettify.css" media="screen,print" />
 <script type="text/javascript" src="xxxxx/js/prettify.js"></script>

※functions.phpでJavaScriptを読み込みしている方は、それなりに対応してください。

４．<body>に追記

idなどを付加している方はその続きにどうぞ。

なお、自身のサイトが完全ブログでソースいっぱい使うからgoogle-code-prettify もどのページでもよく使う！というのなら、bodyタグにまんま貼り付けても良いのですが、コーポレートサイトなど、ウェブサイトの中の一部のページでのみ、google-code-prettify を使うのだ！という方は、if文使って制御した方が無駄な動きを防げます。

<body onload="prettyPrint()">

設定は以上で完了です。

５．cssのメンテ

ソースの前後に<pre class=”prettyprint linenums”></pre>をつけてえいや！と表示させてみたら、ソースが右側にオーバーフローしてしましました。そしてなぜかナンバーリングがされていないし、１０以上の数が表示されない。１行置きのカラーもウサヲ的には必要ない。

ということで、prettify.cssをメンテすることにしました。

ol.linenumsにoverflow: scroll;とpadding-left:2.5emを追加した。(オーバーフロー防止と２桁のナンバリングも見えやすくする)
liにlist-style:none;が設定されていたので、それを削除した。（ナンバリングが隠れていたので）
liの基数行目にbackground:#eee;が設定されていたので、削除した。（交互の色違いをやめたかった個人的な措置）

以上のメンテで綺麗に出力されました。

６．TinyMCE　ブロック要素のメンテ

これ以上何をするか？というところですが、ブログでソースを掲載するときに、その都度クラスを付加しなければならないので、管理画面の本文にポチッと簡単にクラスが付けれるよう、設定しました。（いろいろハショってすみません）