google-code-prettify導入

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

Pocket

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のパーマリンクを「年/月/日/ID」にする

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image
gでgit status、続く引数があったらgitに渡すシェルスクリプトを実装したメモ

最近コーディング時に腕の疲れを感じるようになってきたので、アホみたいで

no image
JavaでBase32のデコーダーを実装

今書いてるプログラムでBase32エンコードされた文字列をデコードをす

no image
Bashのプロンプトを変えずにscreenのウィンドウタイトルだけ変える

先にコード例。.bashrcに書きます。 この例ではウィンドウ名

no image
Google Play Musicアプリの音楽ライブラリから特定のフォルダを除外する方法

Google Play Musicアプリはデフォルトでローカル端末上の

no image
PythonでC++のstd::mapみたいな挙動が欲しい

最近競技プログラミングの問題をちょろちょろやってて、それでC++を使っ

→もっと見る

PAGE TOP ↑