WEB ページ作成基準Google Code Prettify

# -*- coding:utf-8 -*-
'''
Hello world のサンプルプログラム
'''
# ============================================
# クラス: Print_Text
# ============================================
class Print_Text():
    '''
    テキストを表示するプログラム
    '''
    def __init__(self, text):
        '''初期化ルーチン'''
        self.text = text

    def print(self, n):        # n回の繰り返し
        '''テキストを n 回表示する'''
        for i in range(n):
            print('{0:s}'.format(self.text))

# ============================================
# メインルーチン
# ============================================
if __name__ == '__main__':
    hello = Print_Text('Hello wold !')
    hello.print(5)

オートローダー

外部 CDN から JavaScript を読み込む場合は，HTML の head 要素内に以下を記述します．以前使われていた cdn.rawgit.com は現在利用を避けるべきなので，ここでは jsDelivr の URL を使います．

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/lang-言語.js"></script>

2行目は省略できますが，言語によっては正しく色分けされないことがあります．その場合は，そのページで使う言語の JavaScript を追加で読み込むと改善します．ローカルに置いている言語ハンドラーは以下のとおりです．

ローカルファイル読み込み

自分のサーバーに置いた Google Code Prettify の JavaScript を読み込む場合は，以下のように記述します．この WEB サイトでは，この方法を推奨します．

<script type="text/javascript" src="相対パス/js/google-code-prettify/run_prettify.js"></script>
<script type="text/javascript" src="相対パス/js/google-code-prettify/lang-言語.js"></script>

強調表示している部分を修正し，HTML の head 要素内に記述します．言語の部分は，前節と同じです．

直接ソースコードを書く

HTML 中に直接ソースコードを記載する場合は，以下のようにします．

<pre class="prettyprint 言語 行番号 my_gcp" style="必要に応じて">

		    プログラムのソースコードを記載

</pre>

クラスで言語を指定する場合は，以下の表から選びます．指定しない場合は，Google Code Prettify が言語を推測します．行番号は「linenums」を指定すると左端に表示されます．何も書かない場合，行番号は出力されません．「my_gcp」は私の WEB サイト用の CSS です．この CSS の中身と style 属性での変更方法は，「私のスタイル (my_gcp)」に示しています．

Google Code Prettify の言語対応リスト

言語指定	プログラミング言語		言語指定	プログラミング言語
default	言語を推定します		lang-cl, lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss, lang-rkt	Lisp and Scheme
lang-none	構文ハイライトを停止		lang-lua	Lua
lang-bash, lang-bsh, lang-csh, lang-sh	Bash やその他のシェルスクリプト		lang-fs, lang-ml	OCaml, SML, F#, et al
lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m	C, C++など		lang-pascal	Pascal（Delphi など）
lang-cs	C#		lang-pl, lang-perl	Perl
lang-clj	Clojure		lang-php	PHP
lang-coffee	CoffeeScript		lang-proto	Protocol buffers
lang-css	CSS		lang-py, lang-python, lang-cv	Python
lang-dart	Dart		lang-r, lang-s	R and S
lang-wiki	Wiki markup		lang-yaml, lang-yml	YAML
lang-erl, lang-erlang	Erlang		lang-rb, lang-ruby	Ruby
lang-go	Go		lang-rc, lang-rs, lang-rust	Rust
lang-hs	Haskell		lang-scala	Scala
lang-html	HTML		lang-sql	SQL
lang-java	Java		lang-vhdl, lang-vhd	VHDL
lang-js, lang-javascript	JavaScript		lang-vb, lang-vbs	Visual Basic
lang-json	JSON		lang-xml	XML
lang-latex, lang-tex	LaTeX と TeX

プログラムを使う

プログラム「mk_html.php」を使うと，ソースコードを PHP で読み込めます．このプログラムを使うためには，ページ冒頭の PHP ブロックに以下を記述します．

include "パス/www_func/mk_html.php";

プログラムのソースコードの記載は，以下のようにします．

<pre class="prettyprint 言語 行番号 my_gcp" style="必要に応じて">
<?php source2html_raw("ソースコードへのパス", タブ幅); ?>
</pre>

PHP のプログラム「mk_html.php」の関数「source2html_raw()」でソースコードを読み込みます．パスで指定したソースコードのファイルを読み込み，コード中の HTML の特殊文字を変換（例: > → >）して出力します．

CSS の内容

Google Code Prettify の表示方法を決めている私の CSS の内容を以下に示します．設定方法については，Google Code Prettify の「自分の好みに設定を修正」に詳しい説明があります．

/* ====================================================================== */
/* COLOR THEMES FOR GOOGLE CODE PRETTIFY                                  */
/* ====================================================================== */
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
pre.my_gcp{
    margin-left:60px;
    padding:10px;
    width:500px;
    height:250px;
    line-height:100%;
    overflow-X:auto;
    overflow-Y:auto;
}

.prettyprint{
  background: darkslategray;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  border: 0 !important;
  font-size: 10pt;
}

.pln{     /* Plain text */
  color: white;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #999999;
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9{
  padding-left: 1em;
  background-color: darkslategray;
  list-style-type: decimal;
}

@media screen {
    .str{             /* string content */
	color: lightsalmon;
    }

    .kwd{             /* keyword color: lightskyblue;*/
	color: cyan;
    }

    .com {            /* comment */
	color: #ff7f24;
    }

    .typ {            /* type name */
	color: palegreen;
    }

    .lit {            /* literal value */
	color: white;
    }

    .pun {            /* punctuation */
	color: lightskyblue;
    }

    .opn {            /* lisp open bracket */
	color: #fff;
    }

    .clo {            /* lisp close bracket */
	color: #fff;
    }

    .tag {            /* markup tag name */
	color: #e6b422;
    }

    .atn {            /* markup attribute name */
	color: #ccff00;
    }

    .atv {            /* markup attribute value */
	color: #5f9ea0;
    }

    .dec {            /* declaration */
	color: darkgreen;
    }

    .var {            /* variable name */
	color: #ff7f00;
    }

    .fun {            /* function name */
	color: palegreen;
    }
}

使い方

指定例

この CSS を使うには，HTML 中の pre 要素にクラス「prettyprint」と「my_gcp」を指定します．例えば，以下のようにします．各クラスと style 属性の意味は，後続の表に示します．

<pre class="prettyprint 言語 行番号 my_gcp" style="margin-left:マージンpx; width:幅px; height:高さpx;">
<?php source2html_raw("ソースコードへのパス", タブ幅); ?>
</pre>

クラス

クラス指定の内容は，以下の表のとおりです．

Google Code Prettify のクラス指定の内容

クラス指定	内容	備考
言語	プログラミング言語を指定します．	言語対応リストの言語指定から選びます．指定しない場合は，Google Code Prettify が言語を推測します．
linenums または 指定なし	行番号の有無を指定します．	「linenums」を指定すると左端に行番号が表示されます． 何も書かない場合，行番号は出力されません．この場合，style 属性に「line-height:150%」を指定すると読みやすくなります．
my_gcp	私の WEB サイト用の CSS です．	この CSS の中身は「CSS の内容」，style 属性での変更方法は「スタイル変更の内容」に示しています．

スタイル

表示スタイルは，CSS の my_gcp クラスで指定しています．

pre.my_gcp{
    margin-left:60px;
    padding:10px;
    width:500px;
    height:250px;
    line-height:100%;
    overflow-X:auto;
    overflow-Y:auto;
}

このスタイルは，必要に応じて style 属性で変更できます．よく変更するスタイルを以下の表に示します．

Google Code Prettify のスタイル変更の内容

スタイル	内容	備考
margin-left	左マージンを指定します．	単位は px などです．
width	幅を指定します．	単位は px などです．
height	高さを指定します．	単位は px などです．高さを固定しない場合は，「auto」を指定します．
line-height	行間を指定します．	単位は % などです．「linenums」を指定しない場合，行間が狭くなることがあります．この場合は，「line-height:150%」などと指定します．

フォントサイズも変更できます．「style="font-size:サイズpt"」のように指定します．1行が長い場合は，「style="white-space:pre-wrap"」として折り返し表示を指定します．

注意

「linenums」を指定しない場合，ソースコードの行間が狭くなることがあります．CSS の my_gcp クラスにある「line-height:100%」の影響と思われますが，my_gcp 側で「line-height:150%」にしても変化しない場合があります．その場合は，個々の pre 要素の style 属性に「line-height:150%」を指定します．

LaTeX

LaTeX のソースを Google Code Prettify で表示するには，以下の注意が必要です．

1. LaTeX は拡張言語ハンドラーで対応するため，lang-latex.js を読み込む必要があります．HTML の head 要素内に以下を記述します．外部 CDN から読み込む場合は前者，自分のサーバーから読み込む場合は後者のいずれか一方を指定します．

   <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/lang-latex.js"></script>

   <script type="text/javascript" src="相対パス/js/google-code-prettify/lang-latex.js"></script>

2. LaTeX は他のプログラミング言語よりも，1行が長くなりがちです．Google Code Prettify で LaTeX のソースを読みやすく表示するには，折り返し表示を指定します．具体的には，以下のように style 属性で「white-space:pre-wrap;」と記述します．

   <pre class="prettyprint lang-latex my_gcp" style="white-space:pre-wrap; width:幅px; height:auto;">
   <?php source2html_raw("ソースコードへのパス", タブ幅); ?>
   </pre>

参考資料

更新履歴