更新日: 2018年12月20日
公開日: 2018年12月14日

【初心者向け】コードを表示する簡単な方法

ブログやホームページを作成していると、「このコード紹介したいな」と思う場面も。
そこで今回は、 Web上でコードを紹介するときのポイントをご紹介させて頂きます。

【初心者向け】コードを表示する簡単な方法
コードの表示方法
コードを見やすくする工夫
無料ブログサイトでのコード表示方法
まとめ

【初心者向け】コードを表示する簡単な方法

コードの表示方法

まず紹介したいコードを仮に

<h1>Hello HTML</h1>

としましょう。このコードを表示する方法は、

普通のテキストスタイルで表示
専用の HTMLタグ <code> を使って表示

の 2通りが代表的。最初に「普通のテキストスタイルで表示」からご紹介していきましょう。

普通のテキストスタイルで表示

この場合は、文章を打つのと同じ要領でコードを書くだけです。伝えたいことは表示できるので、一見良さそうですが、どうでしょうか。

【WordPressの場合】

テキストエディタなどでは、 HTMLタグがハイライトされて分かりやすいのに、これではどれがタグでどれがコードか分かりにくいですね。また Webサイトをクロールする Googleボットにもここはコードですよ、と伝えておく方が◎でしょう。次は、専用の HTMLタグ <code> を使ってコードを表示する方法をご紹介します。

専用の HTMLタグ <code> を使って表示

【サンプルコード】

<code><h1>Hello HTML</h1></code>

上記コードを WordPressの場合は「テキスト編集タブ」で、ブログツールの場合は「HTML編集」、テキストエディタを使用されている方はそのまま貼っちゃいましょう。

【実行結果 WordPressの場合】

あれ、 h1のタグを紹介したいのに h1タグがブラウザで読み込まれてしまっていますね。この問題は、以下のように h1タグをエスケープして書くと解決されます。

<code>&lt;h1&gt;hello HTML&lt;/h1&gt;</code>

【実行結果 WordPressの場合】

エスケープは、半角文字の < > などを < や > に変換すること。

こうすることで悪意あるコードを受付なようにしています。先程までと違ってコード部分だけフォントレイアウトが変わりましたね。一応これで Googleボットにもここの文章はコードですよ、と認識させることができます。次は見やすいレイアウトに変更できるか見ていきましょう。

コードを見やすくする工夫

デフォルトのままではコードも文字も同じで、人間は読みにくいです。この問題を解決する方法は、

プラグインの活用（WordPressの場合）
ライブラリの活用

が手っ取り早く、見た目もよくなります。まずは WordPressから紹介していきますね。

WordPressでコードを見やすくする

【デフォルトの場合 ↓】

WordPressでコードを見やすくするプラグインは、

Crayon Syntax Highlighter
IG: Syntax Hiliter
SyntaxHighlighter Evolved

が代表的。試しに使ってみましたが、SyntaxHighlighter Evolved がレイアウトがキレイで一番使いやすかったです。

【SyntaxHighlighter Evolvedのテスト結果】

HTMLタグをハイライトしてくれていい感じですね。こちらのプラグインの特徴は、コードをエスケープして書かなくてもいいこと。ショートコードの

[code lang="html"] ・・・・ [/code]

だけでコードを記述することができます。

ライブラリを使ってコードをハイライト

コードの表示を整えてくれる代表的なライブラリに、「highlightjs.org」という JavaScriptライブラリがあります。jQuery や Bootstrap などと同じ要領で使え、レイアウトの設定も豊富。今回試してきた中で一番いいデザインと思います。

実際に使ってみた例が上図の通りで、コードは下記のように。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="css/atom-one-dark.css">
        <script src="js/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
        <pre>
        <code class="html">
            <h2>Hello</h2>
             &lt;h2&gt;Hello HTML&lt;/h2&gt;
             &lt;p style=&quot;color:#ff0000&quot;&gt;Helllo HTML&lt;/p&gt;
        &lt;a href=&quot;https://codecamp.jp&quot;&gt;リンクだよ&lt;/a&gt;
    &lt;strong&gt;段落の表示もバッチリだね&lt;/strong&gt;
&lt;strong&gt;段落の表示もバッチリだね&lt;/strong&gt;
        </code>
        </pre>
    </body>
</html>

デモページ

こちらはエスケープが必要になりますが、デザイン性はスゴイですね。上図は Atom というテキストエディタのレイアウトで、それ以外にも GitHub など 89種類のテンプレートが用意されています。無料でこんなに凄いツールを利用できるって有り難いですよね。

ただし、このライブラリの利用は、 Ruby on Rails や Django などのフレームワーク系やプレーンのHTMLファイルに限ります。WordPressにも「WP Code Highlight.js」という Highlight.js を搭載したプラグインがありますが、テンプレートを読み込まなかったりで上記のような出力はできませんでした（私の場合）。

無料ブログサイトでのコード表示方法

【はてなブログでコードを書いた例】

HTMLタグに制限があったり、スマホではレイアウトが変わってしまう無料ブログツールですが、こちらでも見やすいコードの表示方法は存在。

【参考記事】

チョット設定が大変そうですね。もしコードを表示することが前提であれば「はてなブログ」がおすすめ。理由は、標準でコードをハイライトする機能が装備されているから。コードの前に

```html

と書くだけで HTMLコードをハイライトしてくれます。 PHP や JavaScript など各種言語に対応していますので有り難いですね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

日頃からコードをキレイに書くことも大事ですが、コードをキレイに表現●●することも一つのテクニックかもしれませんね。またお気づきになられた方もいるかもしれませんが、コードを表示するポイントは ”コードの書きやすさ” も関係してきます。特にエスケープ化のストレスは大きいかもしれません。私の場合は、オンラインのエスケープ変換ツールを利用していますが、みなさまはどうでしょうか?

「HTML や CSS、いじりたいけどさっぱり分からない」「フレームワークやライブラリも操作してみたい」、そんな方はプログラミング学習を『マンツーマン × オンライン』でサポートする CodeCamp いかがでしょうか？無料相談や無料体験も用意されていますよ。