WEB ページ作成基準プログラムのソースコード

はじめに

私の WEB サイトでは，プログラミング言語応じたソースコードの表示を行います．表示の振る舞いは，CSS で定義しています．CSS を使った HTML は以下のとおりです．

<pre class="プログラムソースコード記述のクラス名">
    ここにソードコードを書く 
</pre>

プログラミング言語の種類は，以下に示すクラス名で表します．また，ソードコードのクラス名と共に等幅フォント指定クラス「mono_space」の指定も可能です．ただし，assembly_source は等幅フォントの指定はできません．assembly_source はデフォルトで等幅フォントです．

プログラムをつかって表示

PHP で書かれた表示用のプログラムを使い WEB ページにソースコードを記述する方法を説明します．

ソースコード出力

HTML の先頭の方で，ソースコードを HTML に変換する関数 source2html() が含まれるファイル mk_html.php を include します．具体的には，次の PHP が必要です．

ソースコード表示をするためのプログラムをインクルード

<?php include "相対パス/www_func/mk_html.php"; ?>

プログラムへのパスはページによって異なります．私は将来のことも考え相対パスにしていますが，絶対パス指定も可能です．また，このプログラムについては，別のページ「ソースリスト」に簡単な説明があります．

整形された出力

インクルードした後には，ソースコードを記述する場所に，以下の HTML/PHP を記述します．すると，整形されたソースコードが表示されます．

整形されたソースコード出力

<p class="source_caption">リストのキャプションを書きます．</p>
<pre class="ソースコード記述のクラス名" style="width:幅px; height:高さpx">
<?php source2html("ソースコードのパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換, array(強調行のリスト)); ?>
</pre>

第1行目にリストのキャプションを書きます．クラス source_caption を使うと，リスト番号が表示されるとともに位置の微妙な調整がされます．

第2行目と第4行目の pre で囲むことにより，ソースコードを整形してます．クラス名の記述が必要です．

3 行目で PHP の関数 (source2html) を呼び出し，ソースコードを HTML に変換します．この関数の引数は，以下の通りです．

• 第 １ 引数は変換するソースコードのパスです．
• 第 ２ 引数はコメントを表す文字列 (デフォルト: '') です．指定しない場合には，「''」のように引用符を二つ続けます．
• 第3引数は行番号表示フラグ (デフォルト: 1) で，「0: 表示しない，1: 表示する」となります．
• 第 4 引数は行番号の桁数 (デフォルト: 3) です．左側に 0 詰めされるので表示がずれることはありません．
• 第 5 引数は<pre>表示フラグ (デフォルト: 0) で，「0: 表示しない，1: 表示する」となります．表示するを指定すると，変換された HTML ソースは <pre>と</pre> で挟まれます．通常，ここは 0 を指定し，先に示したソースコードを記述した <pre> で挟みます．
• 第 6 引数はタブ幅 (デフォルト:4) を指定で，タブを適当な数空白に変換します．タブ幅は整数で指定し，負の場合には空白への変換を行いません．
• 第 7 強調する行を配列で指定します．行は，array(4, 9, 13) のようにして指定します．指定された行は赤字になります．

実際の例を以下に示します．

円周率を計算するプログラム

001   #include <stdio.h>
002   #define N 32768
003   #define RADIX 10000
004   
005   void machin(void);
006   int lf_div(int point, int d, int k);
007   void lf_plus(int point);
008   void lf_minus(int point);
009   void lf_complement(int n[]);
010   void print_pi();
011   void lf_print(int n[]);
012   
013   int P[N], W1[N], W2[N];
014   int accuracy;
015   
016   // =====================================
017   //   main
018   // =====================================
019   int main(int argc, char *argv[]){
020     accuracy = atoi(argv[1])/4;
021     machin();
022     print_pi();
023   
024     return 0;
025   }
026   
027   // =====================================
028   //   machin
029   // =====================================
030   void machin(void){
031     int d, k, point;
032     int flag;
033   
034     W1[0]=16*5;
035     d=5*5;
036     k=1;
037     flag=1;
038     point=0;
039   
040     while(point <= accuracy){
041       point = lf_div(point, d, k);
042       if(flag){
043         lf_plus(point);
044       }else{
045         lf_minus(point);
046       }
047       flag = !flag;
048       k +=2;
049     }
050   
051     W1[0]=4*239;
052     d=239*239;
053     k=1;
054     flag=0;
055     point=0;
056   
057     while(point <= accuracy){
058       point = lf_div(point, d, k);
059       if(flag){
060         lf_plus(point);
061       }else{
062         lf_minus(point);
063       }
064       flag = !flag;
065       k +=2;
066     }
067   
068   
069   }
070   
071   
072   // =====================================
073   //  lf_div
074   // =====================================
075   int lf_div(int point, int d, int k){
076     int tmp, m;
077     int i, flag=0;
078   
079     m=0;
080     for(i=point; i<=accuracy+2; i++){
081       tmp=m*10000+W1[i];
082       W1[i]=tmp/d;
083       m=tmp%d;
084       if(flag == 0 && W1[i]!=0){
085         point=i;
086         flag=1;
087       }
088     }
089   
090     m=0;
091     for(i=point; i<=accuracy+2; i++){
092       tmp=m*10000+W1[i];
093       W2[i]=tmp/k;
094       m=tmp%k;
095     }
096   
097     return point;
098   }
099   
100   // =====================================
101   //   lf_plus
102   // =====================================
103   void lf_plus(int point){
104     int i;
105   
106     for(i=point; i<=accuracy+2; i++) P[i] += W2[i];    
107   
108     for(i=accuracy+1; i>point; i--){
109       if(P[i] > 9999){
110         P[i-1]++;
111         P[i]%=RADIX;
112       }
113     }
114   
115     P[point]%=RADIX;
116   
117   
118   
119   }
120   
121   // =====================================
122   //   lf_minus
123   // =====================================
124   void lf_minus(int point){
125   
126     lf_complement(W2);
127     lf_plus(point);
128     lf_complement(W2);
129     
130   }
131   
132   // =====================================
133   //   complement
134   // =====================================
135   void lf_complement(int n[]){
136     int i;
137   
138     for(i=0; i<=accuracy+1; i++) n[i]=9999-n[i];
139   
140     n[accuracy+1]++;
141   
142     i=accuracy;
143     while(n[i]==10000 && 0 < i){
144       n[i]=0;
145       n[i-1]++;
146       i--;
147     }
148   }
149   
150   // =====================================
151   //   print pi
152   // =====================================
153   void print_pi(){
154     int i, j, k;
155   
156     printf("\n\n%d.", P[0]);
157   
158     for(i=0; i<=(accuracy-1)/12; i++){
159       for(j=1; j<=12; j++){
160         k=12*i+j;
161         if(accuracy < k) break;
162         printf("%04d ",P[k]);
163       }
164       printf("\n  ");
165     }
166   
167     printf("\n");
168   
169   }
170   
171   // =====================================
172   //   lf_print for debug
173   // =====================================
174   void lf_print(int n[]){
175     int i, j, k;
176   
177     for(i=0; i<=accuracy/12; i++){
178       for(j=0; j<12; j++){
179         k=12*i+j;
180         if(accuracy < k) break;
181         printf("%04d ",n[k]);
182       }
183       printf("\n");
184     }
185   
186   }

整形なし出力

Google Code Prettify (GCP) を使う場合，コードそのままの出力としなくてはなりません．そのために，mk_html.php の関数: source2html_raw() を使います．

整形なしソースコード出力

<?php source2html_raw("ソースコードへのパス", タブ幅); ?>

実行結果

実行結果もプログラムを使い表示が可能です．テキストファイル以外の結果，たとえばターミナルのスクリーン表示もテキストに変換すると表示可能です．

ソースコード同様に， mk_html.php をページの先頭付近で include します．具体的には，次の PHP が必要です．

番号付きリストの書き方

<?php include "相対パス/www_func/mk_html.php"; ?>

そして，実行結果を記述する場所に，以下の HTML/PHP を記述します．すると，整形された実行結果が表示されます．

HTML文書中での実行結果の書き方．

<p class="result_caption">結果のキャプションを書きます．</p>
<pre class="output_data" style="width:幅px; height:高さpx">
<?php source2html("結果のパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換, array(強調行のリスト)); ?>
</pre>

実際の例を以下に示します．

円周率の計算結果

3.1415 9265 3589 7932 3846 2643 3832 7950 2884 1971 6939 9375 
  1058 2097 4944 5923 0781 6406 2862 0899 8628 0348 2534 2117 
  0679 8214 8086 5132 8230 6647 0938 4460 9550 5822 3172 5359 
  4081 2848 1117 4502 8410 2701 9385 2110 5559 6446 2294 8954 
  9303 8196 4428 8109 7566 5933 4461 2847 5648 2337 8678 3165 
  2712 0190 9145 6485 6692 3460 3486 1045 4326 6482 1339 3607 
  2602 4914 1273 

html内に直接記述

ソースコードそのものではなく，そこに含まれていコマンドやコードの構造の説明に使います(具体例)．ソースコード記述名の後に空白をあけて「code_explain」を書きます．

HTML文書中でのソースコードなどの説明文の書き方．

<pre class="ソースコード記述のクラス名 code_explain" style="height:高さ(整数px or auto); width:幅(整数)px">
ここに説明を書きます．
  <span class="comment">コメントが書けます</span>
  <span class="emphasize">強調です</span>
  <span class="arg">引数です</span>
  <span class="value">値です</span>
  <span class="op">オプションです</span>
</pre>

ソースと実行結果を並べて表示

ソースコードとその実行結果を横に並べて記述します(具体例)．

ソースコードとその結果を並べて記述．

<table class="source_result" summary="サマリー">  
  <tr>
    <td class="source_caption">ソースコードのキャプション</td>
    <td class="result_caption">実行結果のキャプション</td>
  </tr>
  
  <tr>
    <td>
      <pre class="ソースコード記述のクラス名" style="width:幅px; height:auto">
		    プログラムのソース
      </pre>
    </td>
    <td>
      <pre class="output_data" style="width:幅px; height=高さpx(or auto)">
		    実行結果
      </pre>
    </td>
  </tr>
</table>

プログラムのソースや実行結果は直接記載も可能ですが，プログラム「source2html()」を使うほうが良いでしょう．具体的には，以下のようにします．

ソースコードとその結果を並べて記述(プログラムを使う)．

<table class="source_result" summary="サマリー">
  <tr>
    <td class="source_caption">ソースコードのキャプション</td>
    <td class="result_caption">実行結果のキャプション</td>
  </tr>
  
  <tr>
    <td>
      <pre class="ソースコード記述のクラス名" style="width:幅px; height:auto"><?php source2html("ソースコードのパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換, array(強調行のリスト)); ?></pre>
    </td>
    <td>
      <pre class="output_data" style="width:幅px; height=高さpx(or auto)"><?php source2html("結果のパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換, array(強調行のリスト)); ?></pre>
    </td>
  </tr>
</table>

table を使って表示します．表のセルにキャプションとプログラム，実行結果を割り付けています．それぞれの間隔は，「style="border-spacing:10px 5px"」のようにすることで可能です．こうすると，左右の間隔:10px，上下間隔:5px にできます．

インライン表示

ソースコードの一部をインライン表示する場合には，次のようにします．

インラインでソースコードを記述

<code class="inline"> ここにソードコードを書く </code>

インライン中の <span class="クラス名"> を使うことで，分かりやすく記述ができます．

これらのオプションを使うと，「コマンド 強調 オプション(引数) = 値; # コメント」のように表示されます.

ページ作成情報

参考資料

更新履歴

last update:2022/08/13 08:43:25