注意点は2つだけ！ブログにソースコードを表示させる

こんにちは HARU（ @HARU ）です。

技術系ブログなどではソースコードをそのまま表示させたいときがあるかと思う。

実際ソースコード自体を表示させることは簡単だ。そのまま文字としてブログ記事に書けばいいだけなのだから。

しかしやってみればわかるが “そのまま文字として” 書くだけでは、ブログ記事上では表示されないソースコードもある。

またブログ記事に “そのまま文字として書く” ということは、ブログを構築しているテンプレート（ ソースコード ）に書いていることと同じになる。

上記内容は HTML を齧っている人であれば、どういう意味かわかるかと思う。

HTML 初心者には少し難しい内容かもしれないが、注意することはたった2つ。守っておけば問題なく表示させることができるので心配ない。

ソースコードを表示するための注意点

記号の変換が必要な可能性がある

まず例として以下のソースコードを自分のブログ記事にそのまま書いてもらいたい。

  
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
  

ブログ記事に書いたらプレビューや保存をし、実際に記事上に表示されるか確認してほしい。

記載されているはずのソースコードが表示されていないことが確認できるかと思う。

記事本文にそのままコピーしただけでは、冒頭で説明したブログを構築しているテンプレート（ ソースコード ）に書いている状態となっているためだ。

考えてみれば簡単なことで、コンピュータは例であるソースコードをソースコードとして認識しているから文字としては表示されない。

考え方としてはブログ記事本文もテンプレート（ ソースコード ）の一部と思ってもらえるとわかりやすいかもしれない。

そのためそのまま表示させるには、表示させたいソースコードを文字として認識させる必要がある。

たとえば、「 < 」の記号は「 &lt; 」と書くことで文字として認識させることができる。

例であるソースコードを記事本文に表示させたい場合は以下のようになる。

  
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
  

上記ソースコードをブログ記事にそのまま書いた場合は、以下のように表示されるようになる。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

このようにソースコードによっては記号を文字として認識させる必要があるため、記号 → 文字変換 が必要になる。

ソースコードがブログに表示されない場合、web 上に自動で 記号 → 文字変換 してくれるサイトで変換したものを記載しよう。

タグを用いて表示する

記号を文字に変換することさえできれば、どんなソースコードも表示することは可能だ。

しかも変換する必要の無いソースコードに関しては、そのままでも表示することができる。

しかし専用のタグを使わずに表示した場合、ブログエディタ上で綺麗に見えるよう書いても画面上反映されない。

br タグや全角スペースを使い、インデントや改行し綺麗な見た目にすることも可能だが、画面サイズによってデザインが崩れる可能性がある。

ブログエディタ上イメージ

画面上に表示されるソースコード

#single-content h2{ font-size: 2rem; font-weight: bold; padding: .5em; margin-bottom: .8em; margin-top: 2em; border-radius: 2px; background: $(brand.color); color: $(brand.font); } #single-content h3{ font-size: 1.8rem; font-weight: bold; margin-bottom: .5em; margin-top: 2em; border-bottom: solid 2px $(brand.color); } #single-content h4{ font-size: 1.8rem; display: table; padding: 0.25em 0.5em; border-radius: 2px; 　 border-left: solid 5px $(brand.color); margin-bottom: .5em; margin-top: 2em; }

※上記は p タグを使って記載している。

そこでソースコードを そのまま表示してくれるタグ を使うことで、br タグや全角スペースに頼らない綺麗な表示をさせる。それが pre タグ だ。

pre タグ

<pre> < ソースコード > </pre> のように pre タグで囲むことによって、エディタで見えたままのソースコードを記事本文に表示することができる。

pre タグで囲んだ例

    #single-content h2{
     font-size: 2rem;
     font-weight: bold;
     padding: .5em;
     margin-bottom: .8em;
     margin-top: 2em;
     border-radius: 2px;
     background: $(brand.color);
     color: $(brand.font);
    }
    #single-content h3{
     font-size: 1.8rem;
     font-weight: bold;
     margin-bottom: .5em;
     margin-top: 2em;
     border-bottom: solid 2px $(brand.color);
    }
    #single-content h4{
     font-size: 1.8rem;
     display: table;
     padding: 0.25em 0.5em;
     border-radius: 2px;
     　 border-left: solid 5px  $(brand.color);
     margin-bottom: .5em;
     margin-top: 2em;
    }

code タグ

pre タグのみでも見やすくなったが、これだけではコンピュータからソースコードと認識されていない。

そのためソースコードと認識させるために code タグ を使おう。

使い方は <pre><code> <ソースコード> </code></pre> という感じで pre タグの次に code タグで囲むようにする。

pre タグと code タグで囲んだ例

  
    #single-content h2{
     font-size: 2rem;
     font-weight: bold;
     padding: .5em;
     margin-bottom: .8em;
     margin-top: 2em;
     border-radius: 2px;
     background: $(brand.color);
     color: $(brand.font);
    }
    #single-content h3{
     font-size: 1.8rem;
     font-weight: bold;
     margin-bottom: .5em;
     margin-top: 2em;
     border-bottom: solid 2px $(brand.color);
    }
    #single-content h4{
     font-size: 1.8rem;
     display: table;
     padding: 0.25em 0.5em;
     border-radius: 2px;
     　 border-left: solid 5px  $(brand.color);
     margin-bottom: .5em;
     margin-top: 2em;
    }
  

※ソースコードの見た目は highlight.js で見やすくしている。

まとめ

いかがだっただろうか？

単純にソースコードを本文に書くのではなく、コンピュータにソースコードですよ～っと認識させる必要があることもわかったかと思う。

本記事が参考になったら嬉しいです。