WEB文書作成   ソースリスト: Google Code Prettify

google code prettify

概要

google code prettify はいわゆるシンタックスハイライター (Syntax Highlighter: 構文ハイライター)と言うものです．これを使うと，プログラムのソースコードなどがかっこ良く表示されます．コードの構造が分かりやすくなり，読者に優しい表示と言えます．

スキンあるいはカラーテーマの設定で，google code prettify の外見(表示方法)は変わります．あるいは，ユーザーが指定することも可能です．ここでは，外見の指定方法を中心に説明します．

基本的な使い方

ここでは，最もシンプルな使い方を示します．シンプルですが，多くの読者はこれで用が足ります．

ヘッド部

google code prettify を使うために，html のヘッド部に以下を記述します．

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

たったこれだけで，シンタクスハイライター「google code prettify」を使うことができます．とても簡単です．これは，スキンに「sunburst」を使った場合です．他のスキンを試したい場合は，スキン設定が参考になります．

本文

ヘッド部を設定したら，あとは本文にプログラムのソースコードを記述するだけです．具体的には，以下のようにします．

設定なしの記述

<pre class="prettyprint" style="margin-left:50px; width:500px">

      ここにプログラムを記載します．

</pre>

クラスに「prettyprint」を設定すると，google code prettify を使うことができます．そして，style (css) で，少なくとも幅とマージンを設定します．実際にこの方法でプログラムを表示した例を以下に示します．．

本文にスタイルを追加

もう少し CSS (style) を追加した方が良いでしょう．そこで，「<pre class="prettyprint" style="margin-left:50px; padding-left:10px; width:500px; height:300px; line-height:100%; overflow-X:auto; overflow-Y:auto">」を設定して，プログラムを表示します．以下に，表示例を示します．

# -*- 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 の出力するコードの外観を変えることができます．これは，コードの表示方法を変える最も簡単な方法です．

スキン設定なし

ヘッド部を

<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/run_prettify.js?skin=スキン名"></script>

スキン名とその表示結果を以下に示します．

表示設定

行番号

class に「linenums」を記載すると，行番号が表示されます．具体的には，次のようにします．

<pre class="prettyprint linenums>

      ここにプログラムを記載します．

</pre>

行番号を記載した例を以下に示します．

行番号は，(5, 10, 15, …) と5行毎に表示されます．1行毎に表示させたければ，CSSを修正する必要が有ります．それについては，自分の好みに設定を修正 > 行番号で示します．

プログラミング言語指定

表1に示す言語クラスを記述することにより，プログラミング言語を指定することもできます．指定しない場合は，Google code prettify が言語を推定します．

<pre class="prettyprint 言語指定のクラス>

      ここにプログラムを記載します．

</pre>

html や PHP の場合，注意が必要です．html のタグは，そのままタグとして表示されます．例えば「<span style="color:red">何か文字を書く</span>」があると，赤色の文字が表示されます．html のソースコードを表示する場合には，「<span style="color:red">何か文字を書く</span>」のようにする必要があります．また，「&」も「&amp;」と記載する必要があります．

以下にC言語の例を示します．

/* Hello world ! */
#include 

      int main(void){
      printf("Hello world!\n");
      return 0;
      }

カラーテーマ

スキンが気に入らなければ，カラーテーマを使うと良いでしょう．かなりクールなテーマがあり，お勧めできます．

準備

いくつかのテーマが「COLOR THEMES FOR GOOGLE CODE PRETTIFY」にあります．ボタン Download a zip file をクリックし，テーマファイル (themes.zip) をダウンロードします．

次にダウンロードしたファイル themes.zip を解凍します．そして，解凍したファイルを適当なディレクトリーに移動させます．

設定

カラーテーマを使うのは簡単です．html のヘッド部に，JavaScript とカラーテーマの CSS を指定するだけです．

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="css へのパス/cssファイル" type="text/css">

JavaScript ではスキンを指定しません．css ファイルには，テーマごとに「テーマ名.css」と「テーマ名.min.css」の二つのファイルが用意されています．min が付くファイルは 0.7 kB 程度で，min が付かないファイルの半分程度のサイズになっています．これらの動作は全く同じです．min が付くファイルは人の目で読みにくいものになっています．修正しないでそのまま使うならば，min が付くファイルを指定したほうが良いでしょう．

ヘッド部で css を指定した後に，本文中に以下のようにしてプログラムを記載します．

<pre class="prettyprint lang-py linenums">

	ここにプログラムを記載します．

</pre>

これは，言語:Python，行番号:有りを指定しています．

以下は，カラーテーマファイル「vibrant-ink.css」を使った例です．

自分の好みに設定を修正

Google Code Prettify が出力するコードの外観を自分の思い通りに設定することもできます．最も単純な方法は，先に示したカラーテーマの css ファイルを修正する方法です．ここでは，修正するコツを示します．

準備

COLOR THEMES FOR GOOGLE CODE PRETTIFY の css ファイルのうち，適当なものを選択し，そのコピーを適当なディレクトリーに適当な名前で保存します．ただし，テーマ名.min.css は避けるべきです．修正がとても面倒です．

設定後は，その css が反映されるように，html のヘッド部に以下を記述します．

<link rel="stylesheet" href="css へのパス/cssファイル" type="text/css">

設定

自分の思い通りの出力なるにするためには，先ほどコピーした css を編集します．

背景色背景の色の変更は，「.prettyprint」の background と「li.L0」&endash;「li.L9」の background-color を変更します．

フォントサイズ不思議なことに，カラーテーマの css にはフォントサイズの指定がありません．「.prettyprint」で指定が可能です．「font-size:フォントサイズ;」を書きます．

フォントフォントは「screen」で指定します．もちろんソースコードの属性 (コマンド，コメント，リテラル，…) ごとに指定が可能です．デフォルトの設定は色のみですが，フォントウェイトやサイズの指定も可能です．以下の表にソースコードの属性を示します．

私の設定

CSS

以下が私の設定です．自分の emacs の設定に似せています．

表示例

この設定での表示例です．

言語毎の JavaScript

先に示したカスタムの CSS を使った表示が LaTeX では動作がおかしいです．理由はわかりませんが，色が反映されません．例えばコメントが設定色にならないです．そこで，この問題は言語毎の JavaScrit を設定することで解決できます．それには二通りの方法があります．

オートローダーを使う方法

外部ファイルの JavaScript を読み込みます．これが最も簡単方法です．html のヘッダーに以下を記述します．

これは，LaTeX (TeX) の場合で，「lang-latex」および「lang-tex」に対応します．他の言語の場合は，このにg表めの最後の言語指定を変更します．ページ毎に，そのベージで使用している言語を指定します．複数ある場合は，行を増やして複数指定します．

ローカルにインストール

自分のサーバーに必要な JavaScript を置くこともできます．

prettify-small.zip をダウンロードします．これを解凍し，適当なディレクリーに保管します．そして，パーミッションを変更します．ディレクトリーは 755，ファイルは 644 です．インストールは，それで終わりです．

使用する場合は，HTML のヘッダーに

と書きます．ファイルのパスを指定するだけです．もちろん，二行目の最後はページ毎に，そのベージで使用している言語を指定します．複数ある場合は，行を増やして複数指定します．

ページ作成情報

参考資料

更新履歴

last update:2021/09/25 08:28:40