google-code-prettify導入

WordPressの記事上でコードを読みやすく載せるためgoogle-code-prettifyを導入しました。

↓google-code-prettifyを使ったコード表示の例

見ての通り、行番号の表示やシンタックスハイライトが行えます

導入手順

1.
ここからファイルを落とす
(smallは改行やスペースが切り詰めてあるやつです)

2.
適当な場所にアップロード

3.
google-code-prettifyを使いたいページのHTMLにcssとjsの読み込みタグを追加

(パスは適宜変更します)

4.
bodyタグにonload=”prettyPrint()”を追加

5.
コードをpreまたはcodeタグで囲み、class=”prettyprint”を指定する

メモ

行番号を表示

class指定にlinenumsを追加します

linenums:5というようにして開始行番号を変更することもできます

行番号を全行表示

デフォルトでは5行毎になっている行番号表示を全行に表示するには、prettify.cssの46行目あたりにあるlist-stle-type:noneを削除します
(参考:javascript – How to add line numbers to all lines in Google Prettify? – Stack Overflow

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする