google-code-prettify導入

公開日: : 最終更新日:2014/03/20 Web ,


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

関連記事

no image

mysql_set_charset()をしてもMySQLモニタで日本語が文字化けする

PHPで直接MySQLをいじる練習をしていたのですが、日本語がブラウザ上では正常に見えているのにMy

記事を読む

no image

[WordPress]dbDelta()でテーブルが作成できない

WordPressのプラグインの勉強をしていて、テーブルを作成するためdbDelta()を使ったら、

記事を読む

no image

WordPressのパーマリンクを「年/月/日/ID」にする

WordPressのパーマリンク設定には各人好みがあると思いますが、僕はこうするとディレクトリ階層を

記事を読む

no image

ブラウザにフォームの値を覚えさせない

formのinputやselectにvalueやselectedで現在値を入れておいて、変更したい場

記事を読む

no image

WordPressブランクテーマ『Underscores』 導入メモ

ブランクテーマ WordPressのテーマデザインを自作するにあたって、各ページの最低限の処理の雛

記事を読む

no image

[CSS]colspanのかかったtdだけ中央寄せする

知らなかったのでメモメモ。 こんな感じにしたいときに。 ああいい ううええ お 属

記事を読む

no image
ファイルパーミッションを664から644に変えてもGitで反映されない

って思ったらGitのこと勘違いしてたっていうメモ。 Gitはファイル

no image
CentOS6.9を7.3にアップグレード

CentOS6系から7系へのアップグレードはアップグレードツールが存在

no image
ブラウザにフォームの値を覚えさせない

formのinputやselectにvalueやselectedで現在

no image
[WordPress]dbDelta()でテーブルが作成できない

WordPressのプラグインの勉強をしていて、テーブルを作成するため

no image
『ワードバスケット攻略データベース』を作成しました

『ワードバスケット攻略データベース』を作成しました。 ワードバスケット

→もっと見る

PAGE TOP ↑