Google Code Prettifyの使い方
2016-06-25 Wordpress CSS, JavaScript, ソースコード 0

ウサヲです。
ウェブ関連の備忘録ブログを作ろうとした時に、必ず必要になるのがソースコードの掲載です。「Google Code Prettify」を使って、ハイライトとかも使って見やすいコードを掲載したいと思います。その方法の備忘録です。
目次
- 「Google Code Prettify」サイトからのダウンロード
- 必要なファイルをフォルダに入れる
- <head>-</head>に必要事項を書く
- <body>に追記
- cssのメンテ
- TynyMCE ブロック要素のメンテ
1.「Google Code Prettify」のダウンロード
小さい字で「downloads」というリンク先があります。それをクリック。
いろいろファイルがあるのですが、よくわからないな、というときには一番上を選択してダウンロードします。
この記事のときには「prettify-small-4-Mar-2013.tar.bz2 」でした。
2.必要なファイルをフォルダに入れる
prettify.jsとprettify.cssを使います。他にも色々使えそうですが、とにかく一歩目という方はこの二つで試します。
ウサヲの場合はprettify.jsをテーマファイルの中に作っているjs専用のフォルダに、prettify.cssを同じくcss専用のフォルダに入れました。
3.<head>-</head>に必要事項を書く
<link>タグでprettify.jsと.prettify.cssを外部指定します。リンク先パスはご自分で。
<link rel="stylesheet" href="xxxxx/css/prettify.css" media="screen,print" /> <script type="text/javascript" src="xxxxx/js/prettify.js"></script>
※functions.phpでJavaScriptを読み込みしている方は、それなりに対応してください。
4.<body>に追記
idなどを付加している方はその続きにどうぞ。
なお、自身のサイトが完全ブログでソースいっぱい使うからgoogle-code-prettify もどのページでもよく使う!というのなら、bodyタグにまんま貼り付けても良いのですが、コーポレートサイトなど、ウェブサイトの中の一部のページでのみ、google-code-prettify を使うのだ!という方は、if文使って制御した方が無駄な動きを防げます。
<body onload="prettyPrint()">
設定は以上で完了です。
5.cssのメンテ
ソースの前後に<pre class=”prettyprint linenums”></pre>をつけてえいや!と表示させてみたら、ソースが右側にオーバーフローしてしましました。そしてなぜかナンバーリングがされていないし、10以上の数が表示されない。1行置きのカラーもウサヲ的には必要ない。
ということで、prettify.cssをメンテすることにしました。
- ol.linenumsにoverflow: scroll;とpadding-left:2.5emを追加した。(オーバーフロー防止と2桁のナンバリングも見えやすくする)
- liにlist-style:none;が設定されていたので、それを削除した。(ナンバリングが隠れていたので)
- liの基数行目にbackground:#eee;が設定されていたので、削除した。(交互の色違いをやめたかった個人的な措置)
以上のメンテで綺麗に出力されました。
6.TinyMCE ブロック要素のメンテ
これ以上何をするか?というところですが、ブログでソースを掲載するときに、その都度クラスを付加しなければならないので、管理画面の本文にポチッと簡単にクラスが付けれるよう、設定しました。(いろいろハショってすみません)