WEB ページ作成基準google code prettify

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 の変更は，次節「スタイルの変更」に示しています．

プログラムを使う

プログラム「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 の特殊文字は変換 (例:> → >) されて出力されます．

スタイル (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>

ページ作成情報

参考資料

更新履歴

last update:2024/05/01 12:57:22