しなやか暮らし研究所パソコン処理ホームページの自作ソースプログラムなどの表示 google-code-prettifyの利用法

ソースコードの表示 - google-code-prettify

特徴、利点

google-code-prettifyはその名の通りGoogle社が提供するJava Script及びCSSで、各種のプログラムコードや、テキストをそれらが整然と表示されるようにhtmlソースに組み込むツールです。利用に当たってはGoogleのサイトからランタイム時にロードする方法と事前にツールファイルをダウンロードしておき、自身のhtmlソースに組み込んで利用する方法があります。前者はgoogle-code-prettifyとして提供されている機能、オプションをフルに利用できますし、後者はダウンロードしたCSSを独自に修正変更してより目的にあった表示を実現することが出来ます。

必要なファイルの取得とウェブサイトへの設置

Googleの配布サイト(https://code.google.com/p/google-code-prettify/)からZIP形式に圧縮されたprettify-xxx.tar.bz2をダウンロードします。ダウンロードファイルには、サンプルやオリジナルソースなども含まれています。ランタイムでロードする場合は次のScript指定をhead部で行います。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

各種のオプションの指定についてはダウンロードしたファイルの中のReadmeやサンプルを参考にしてください。
自身のhtmlソースに組み込む場合はダウンロードしたファイルのうちprettify.jsとprettify.cssを適切な場所に配置し、htmlソースのhead部で次の読み込み指定を行います。

<script type="text/javascript" src="../JVS/prettify.js"></script>
<link rel="stylesheet" href="../CSS/prettify.css" type="text/css">

表示の指定

google-code-prettifyの利点は表示しようとするプログラム言語の種類をほとんどの場合指定しなくても良いことです。つまり、表示したいプログラムコードやテキストを<pre class="prettyprint"> コードやテキスト </pre>で囲めば良いだけです。
ただしhtmlソースなどを表示する場合は"<"記号や">"記号は、事前に文字実体参照を使って"<"や">"に置換しておく必要はあります。
自身でJava ScriptとCSSを組み込む場合で、CSSを修正して<pre>タグの外側に<div>タグを置いて、表示の背景をリスト用紙やノートのイメージに設定したり、<pre>タグの内側に<span>タグを置いて表示内容の一部の範囲の文字列をハイライト表示することが出来ます。この一例をサンプルで示します。

サンプル

Htmlソース

<div class="prog_list"><pre class="prettyprint">
Option Explicit
Public 読出行 As Long
Public 書出行 As Long
Public 金額 As Double

Sub 同一現場売上集計()

Dim RowMax As Long
Dim 得意先コード As String
Dim 担当者コード As Integer

'最大行検出
<span class="highlight">RowMax = Cells(Rows.Count, 1).End(xlUp).Row</span>

書出行 = 2
金額 = 0

For 読出行 = 2 To RowMax

　　途中省略

Next 読出行

'不要行削除
<span class="highlight">Rows(CInt(書出行) & ":" & RowMax).Select
Selection.Delete Shift:=xlUp</span>
End Sub
</pre></div>

修正したCSS

/* Pretty printing styles. Used with prettify.js. */
 
/* SPAN elements with the classes below are added by prettyprint. */
.pln {
    color: #000 ;
  font-size : 12px;
  padding-bottom : 2px;
}  /* plain text */
 
@media screen {
  .str {    color: #080 ;}  /* string content */
  .kwd {    color: #008 ;}  /* a keyword */
  .com {    color: #800 ;}  /* a comment */
  .typ {    color: #606 ;}  /* a type name */
  .lit {    color: #066 ;}  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo {    color: #660 ;}
  .tag {    color: #008 ;}  /* a markup tag name */
  .atn {    color: #606 ;}  /* a markup attribute name */
  .atv {    color: #080 ;}  /* a markup attribute value */
  .dec, .var {  color: #606 ;}  /* a declaration; a variable name */
  .fun {    color: red ;}  /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str {    color: #060 ;}
  .kwd {    color: #006;     font-weight: bold ;}
  .com {    color: #600;     font-style: italic ;}
  .typ {    color: #404;     font-weight: bold ;}
  .lit {    color: #044 ;}
  .pun, .opn, .clo {    color: #440 ;}
  .tag {    color: #006;     font-weight: bold ;}
  .atn {    color: #404 ;}
  .atv {    color: #060 ;}
}
 
/* Put a border around prettyprinted code snippets. */
pre.prettyprint {
    padding-right: 2px;
    padding-left: 40px;
    color: black;
    font-family: "Courier New";
    line-height: 20px;
    font-size: 15px;
    padding-bottom: 2px;
}
.highlight{
    background-color: rgba(255, 255, 51, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffA4,endColorstr=#80ffffA4);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffA4,endColorstr=#80ffffA4)";
    width: 95%;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
    margin-top: 0; margin-bottom: 0 ;
}
.prog_list{
    border-width: 1px;
    border-style: solid;
    border-color: rgb(133, 133, 133);
    background-image : url(../images/whtgry_pad100040.gif);
    padding-top: 8px;
    width: 100%;
}

Google Chromeでの表示結果

Option Explicit
Public 読出行 As Long
Public 書出行 As Long
Public 金額 As Double

Sub 同一現場売上集計()

Dim RowMax As Long
Dim 得意先コード As String
Dim 担当者コード As Integer

'最大行検出
RowMax = Cells(Rows.Count, 1).End(xlUp).Row

書出行 = 2
金額 = 0

For 読出行 = 2 To RowMax

　　途中省略

Next 読出行

'不要行削除
Rows(CInt(書出行) & ":" & RowMax).Select
Selection.Delete Shift:=xlUp
End Sub

1 2 3