Yamamoto's Laboratory
プログラムソース
GCP

WEB ページ作成基準google code prettify

google code prettify を使い WEB ページ (html, php) でプログラムのソースコードを表示する方法を示します.

目次


google code prettify とは

google code prettify はいわゆるシンタックスハイライターと呼ばれるものです.詳細な設定方法は,私の別のページ「google code prettify」を参照下さい.これを使うと,以下のようにソースコードを表示することができます.私の Emacs 風です.

# -*- 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)

設定

google code prettify の JavaScript のロードには二通りあります.この読み込み方法を示します.

ソースコードの表示の仕方を設定している css はページ全体の css ファイル「stylesheet.css」に記述しています(私の場合).そのため,この JavaScript「run_prettify.js」は CSS ファイルの前に記述する必要があります.CSS の具体的な内容について,「スタイル (my_gcp) の内容」に示します.

オートローダー

外部のサーバーから JavaScript を読み込むために,html のヘッダーに以下を記載します.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/言語指定.js"></script>

二行目は無くても大丈夫ですが,表示がおかしくなることがあります.その場合,そのページで使っている言語の JavaScript を読み込むと直ります.使用可能な言語の 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/言語.js"></script>

赤字の部分を修正し,html のヘッダーに記述します.言語の部分は,前節と同じです.

本文の記載

本文中にプログラムのソースコードを記載します.html 中に直接コードを書く方法と PHP プログラムで読み込むふた通りの方法があります.

直接ソースコードを書く

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

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

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

</pre>

クラスの言語の指定は,以下の表から選びます.指定しない場合は,プログラムが言語を推測します.行番号は「linenums」を指定すると左端に行番号が表示されます.何も書かない場合は,行番号が出力されません.「my_gcp」は私の WEB サイト用の css で,指定は必須です.この css の中身と style の変更は,次節「スタイルの変更」に示しています.

Google code prettify の言語対応リスト
言語指定 プログラミング言語 言語指定 プログラミング言語
default言語を推定します lang-cl, lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss, lang-rktLisp and Scheme
lang-none構文ハイライトを停止 lang-luaLua
lang-bash, lang-bsh, lang-csh, lang-shBssh やその他のシェルスクリプト lang-fs, lang-mlOCaml, SML, F#, et al
lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-mC, C++など lang-pascalPascal
lang-csC# lang-pl, lang-perlPerl
lang-cljClojure lang-phpPHP
lang-coffeeCoffeeScript lang-protoProtocol buffers
lang-cssCSS lang-py, lang-python, lang-cvPython
lang-dartDart lang-r, lang-sR and S
lang-pascalDelphi lang-regexRegex
lang-erl, lang-erlangErlang lang-rb, lang-rubyRuby
lang-goGo lang-rc, lang-rs, lang-rustRust
lang-hsHaskell lang-scalaScala
lang-htmlHTML lang-sqlSQL
lang-javaJava lang-vhdl, lang-vhdVHDL
lang-js, lang-javascriptJavaScript lang-vb, lang-vbsVisual Basic
lang-jsonJSON lang-xmlXML
lang-latex, lang-texLaTeX and 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 の特殊文字は変換 (例:> → &gt;) されて出力されます.

スタイル (my_gcp) の内容

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

この style を変更する必要がる場合,「<pre class="prettyprint 言語 行番号 my_gcp" style="必要に応じて">」の sytle を書き換えます.よく使われる style は.「style="margin-left:100px; height:auto"」です.

/* ====================================================================== */
/* 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 をつかう

google code prettify の表示方法を変更したい場合があります.特に幅や高さ,マージンなどです.その部分決めてる css 中の「my_gcp」には,以下の通りです.

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

これらの値を変更する場合は,以下のようにします.

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

また,フォントサイズも変更も可能です.「style="font-size:サイズpt"」とします.

注意

理由は分かりませんが,「linenums」を指定しない場合,ソースコードの間隔が狭くなります.多分,「line-height:100%」が効いているのでしょう.そこで,line-height:150%」にしても,変化がありません.急場しのぎとして,style に 「line-height:150%」とします.これは,ちゃんと動作します.

注意事項

LaTeX

LaTeX のソースを GCP で表示するためには,以下の注意が必要です.

  1. 理由は不明ですが,lang-latex.js を読み込む必要があります.ヘッダー部に以下を記述します.前者はオートローダーで,後者は自分のサーバーから読み込む場合で,いずれかを指定します.
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-latex.js"></script>
    <script type="text/javascript" src="相対パス/js/google-code-prettify/lang-latex.js"></script>
  2. LaTeX は他のプログラミング言語と異なり,一行は長くなります.そのため,GCP で LaTeX のソースを表示させるためには,折り返して表示させるべきです.具体的には,以下のように CSS で「margin-left:white-space:pre-wrap;」と記述します.
    <pre class="prettyprint lang-latex my_gcp" style="white-space:pre-wrap; width:幅px; height:高さ(auto, or px);">
    <?php source2html_raw("ソースコードへのパス", タブ幅); ?>
    </pre>

ページ作成情報

参考資料

  1. 私自身のページですが,設定は「google code prettify」が詳しいです.

更新履歴

2020年08月08日 ページを分割し,新規ページに変更.
2021年09月04日 設定 (オートローダー, ローカルファイル読み込み) の追加.


no counter