内容
HTML上、主にサイトなどにプログラムのソースコードを記述する場合、 改行や色分け表示がされたプログラムソースコードを表示する方法を紹介したいと思います。
実際私も使用している方法で、すごく重宝しています。
今回は、はてなブログでの表示例しか示すことができません。
予めご了承いただけましたら幸いです。
参考記事
今回紹介するプログラムの表示の例、及びそのHTMLソースコードは以下のような形式になります。
表示例
#include <stdio.h>
int main (){
printf("test1\n");
printf("test2\n");
return 0;
}表示例のHTMLソースコード
<script src="https://cdn.rawgit.com/google/
code-prettify/master/loader/run_prettify.js"></script>
<pre style="background-color: #f5f5f5;">
<code class="prettyprint">#include <stdio.h>
int main (){
printf("test1\n");
printf("test2\n");
return 0;
}</code></pre>上のコードをコピペしてサイト上で表示させると表示例のような形式で表示されると思います。
今回使用したHTMLコードがどのような役割を持っているか、少し詳細に書いてみようと思います。
<script>：スクリプトをHTMLに埋め込むタグ
今回の場合はCDNによってGoogle Code Prettifyを読み込んでいます。
CDN(Content Delivery Network：コンテンツデリバリーネットワーク)とは大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのことです。
Google Code Prettifyの詳しい仕様は以下のサイトに記述があります。
Google Code Prettifyはソースコードを色分けして見やすくするためのシンタックスハイライターです。
直訳すれば「文脈の色付けツール」でしょうか。
<pre>：スペースや改行をそのまま表示させる
プログラムのコードを表示させる際、改行が多数出現します。
HTMLでは改行文字は全て半角スペースに変換されます。
はてなブログでは、改行を半角スペースではなく、改行に自動変換する機能がありますが、プログラムコード1行づつにタグが付与されるため、styleの変更の際に不都合になる場合があります。
さらに<pre>タグで囲んだ文字列はプログラムのソースコードとして見栄えが良くなります。
<code>
このタグ自体に大きな役割はありません。
HTML上でこのタグで囲まれている範囲はソースコードであると示すというものです。
今回はこの<code>タグにclass=”prettyprint”と記述していますが、これを<pre>タグの中に入れても見栄えはほとんど変わりません。
以下にその表示例を示します。
#include <stdio.h>
int main (){
printf("test1\n");
printf("test2\n");
return 0;
}灰色の背景の境界線が表示されるようになりましたが、これでも1つのデザインとしての候補になるのではないのでしょうか。
まとめ
私も使用している、HTMLによってサイトにソースコードを見栄えよく表示する方法を紹介しました。
HTMLはCSSやJavaScriptと合わせて使用すれば、もっとデザインの幅を広げることができます。
このサイトの見栄えを良くしつつ、その方法をまた書いていけたらと思っております。
以上簡単になりましたが、ありがとうございました。
コメント