Google Code Prettifyの使い方

Bs3doc：Typography

2017.02.15

Google Code Prettify

Javascriptライブラリによるコードハイライターです。
ソースコード表示を行うライブラリは色々ありますが、Google Code PrettifyはjQueryなどを使用せずにシンプルに動作します。
以下のような特徴があります。

Bash,C++,CS,HTML,Java,JavaScript,XML,Perl,Python,Ruby,PHP,CSS,SQL,VBなどの言語に対応しています
自動的に言語を判別します。
表示したいソースコードを<pre></pre>タグで囲むだけです。

以下のページからダウンロードして、ダウンロードしたものをサーバーにアップロードして下さい。
google-code-prettify
当ページでも以前はGoogle Code Prettifyを使用していましたが、現在はGoogle Code PrettifyをベースにしたEx Code Prettifyを使用しています。

CSSとjavascriptの読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Title記述</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
</head>
<body>

    コードを記述

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>prettyPrint();</script>
</body>
</html>

使い方

使い方は簡単で、<pre>タグに"prettyprint"クラスを追加するだけです。

<pre class="prettyprint">
こんな感じ
<pre>

行番号を追加するには、更に"linenums"を追加します。

<pre class="prettyprint linenums">
こんな感じ
<pre>

そして最後に、ページロード時にprettyPrint()を実行します。
<body>タグのonload時に実行するか、最初のソースコードの16行目のように<script>タグで実行するといいでしょう。

<body onload="prettyPrint()">
または
<script>prettyPrint();</script>

Bootstrapで使用する場合の注意点

Bootstrapで使用する場合、ダウンロードしたままのCSSでは表示が期待通りにはなりませんでした。
色々調べてみると、prettify.cssの内容がBootstrapではよろしくないとの事でした。
バージョンにもよると思いますが、うまく表示されない時はprettify.cssを以下の通りにコピペで置き換えてください。
表示色をデフォルトから変更し、表示設定をBootstrapに合うように変更しています。

.pln { color: #ffffff; }
.str { color: #d1f1a9; }
.kwd { color: #ebbbff; }
.com { color: #7285b7; }
.typ { color: #bbdaff; }
.lit { color: #ffc58f; }
.pun { color: #ffffff; }
.opn { color: #ffffff; }
.clo { color: #ffffff; }
.tag { color: #ff9da4; }
.atn { color: #ffc58f; }
.atv { color: #99ffff; }
.dec { color: #ffc58f; }
.var { color: #ff9da4; }
.fun { color: #bbdaff; }

.prettyprint {
padding:          10px;
background-color: #002451;
border:           1px solid #cccccc;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #008faf;
   -moz-box-shadow: inset 45px 0 0 #008faf;
        box-shadow: inset 45px 0 0 #008faf;
}
ol.linenums {
margin: 0 0 0 0;
} 
ol.linenums li {
padding-left:     8px;
color:            #ffffff;
line-height:      18px;
}