HTMLにソースコードを埋め込む

HTMLにソースコードを埋め込む方法について調べた。

最初は以下のような枠を作って書いていた。

//こんなの

この枠については以下のコードで書いている。

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">
　<span style="font-size: 80%;"><strong>
　　//こんなの
　</strong></span>
</div>

 でもまぁこれだと見にくいので、皆さんどんなふうに書いてるのか調べてみた。

 するとcode-prettifyというものを使った書き方があることを見つけた。

①scriptのリンクを貼る

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

 この文をコードの一番上に置きます。

②pre要素、code要素

<pre><code>
　<!-- ソースコード -->
</code></pre>

このコード使ってコードを書くとこんな感じ。

int i, a = 0;
for( i=0; i<10; i++ ){
  a += i;
}

ソースコードの枠組みはできましたが、色がついておらず少し見にくいです。

③クラスをつける

code要素に、”prettyprint”というクラスをつけます。

<pre><code class="prettyprint">
　<!-- ソースコード -->
</code></pre>

 このコード使ってコードを書くとこんな感じになります。

int i, a = 0;
for( i=0; i<10; i++ ){
  a += i;
}

この他にも行数をつけたり、CSSの場合やHTMLを書くときの注意点などありますが、とりあえずはこのぐらいで。