ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「Google Code Prettifyの使い方」の記事

Google Code Prettifyの使い方

ウサヲです。

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

目次

  1. Google Code Prettify」サイトからのダウンロード
  2. 必要なファイルをフォルダに入れる
  3. <head>-</head>に必要事項を書く
  4. <body>に追記
  5. cssのメンテ
  6. 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をメンテすることにしました。

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

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

6.TinyMCE ブロック要素のメンテ

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

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP