HTMLでソースコードを見せる(埋め込み)！初心者向け8選の方法と応用例

はじめに
●HTMLでソースコードを埋め込む方法
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTMLでソースコードを埋め込む方法を理解し、簡単に実践できるようになります。

初心者の方でも安心して取り組めるよう、徹底解説した11種類の方法を紹介していきます。

サンプルコードや応用例も用意しているので、理解を深められます。

●HTMLでソースコードを埋め込む方法

○1. <pre>タグと<code>タグを使う

HTMLでソースコードを表示する基本的な方法は、<pre>タグと<code>タグを使うことです。

<pre>タグは前後の空白や改行をそのまま表示するので、ソースコードのインデントが維持されます。

<code>タグはソースコードを示すことを意味します。

これらを組み合わせることで、ソースコードを埋め込むことができます。

&lt;pre&gt;&lt;code&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

○2. エスケープ文字を使う

HTMLでソースコードを表示する際には、<や>などの特殊文字をエスケープする必要があります。

次のようにエスケープ文字を使って、ソースコードを埋め込むことができます。

&lt;pre&gt;&lt;code&gt;
&lt;!-- これはHTMLのコメントです --&gt;
&lt;/code&gt;&lt;/pre&gt;

○3. インラインスタイルで装飾する

ソースコードを見やすくするために、インラインスタイルを使って装飾することができます。

例えば、文字の色や背景色、フォントを変更して見やすくすることができます。

&lt;pre style="color: #333; background-color: #f8f8f8; font-family: 'Courier New', monospace;"&gt;&lt;code&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

○4. CSSで装飾する

より柔軟な装飾を行うために、CSSを使ってソースコードをスタイリングすることができます。

CSSを使ってソースコードの見た目を変更する例を紹介します。

&lt;style&gt;
  .code {
    color: #333;
    background-color: #f8f8f8;
    font-family: 'Courier New', monospace;
  }
&lt;/style&gt;

&lt;pre class="code"&gt;&lt;code&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

○5. シンタックスハイライトを適用する

シンタックスハイライトを適用することで、ソースコードの可読性が向上します。

JavaScriptライブラリを利用してシンタックスハイライトを適用することができます。

例えば、Prism.jsやhighlight.jsなどがあります。

Prism.jsを使った例を紹介します。

&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-html.min.js"&gt;&lt;/script&gt;

&lt;pre&gt;&lt;code class="language-html"&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

●応用例とサンプルコード

○6. ソースコード内の特定の部分を強調表示する

ソースコード内の特定の部分を強調表示するには、<mark>タグを使用します。

次の例では、「<title>」タグの部分を強調表示しています。

&lt;pre&gt;&lt;code&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;mark&gt;&lt;title&gt;サンプルページ&lt;/title&gt;&lt;/mark&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

○7. ソースコードに行番号を表示する

ソースコードに行番号を表示することで、コードの指定や説明がしやすくなります。

シンタックスハイライトライブラリの機能を利用して行番号を表示できます。

Prism.jsの行番号プラグインを使用した例を紹介します。

&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.css"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-html.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js"&gt;&lt;/script&gt;

&lt;pre class="line-numbers"&gt;&lt;code class="language-html"&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

○8. ソースコードを折りたたみ表示にする

ソースコードが長い場合、折りたたみ表示にすることで、ページの見た目をスッキリさせることができます。

jQueryを使ってソースコードを折りたたみ表示にする例を紹介します。

&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
  .toggle-btn {
    cursor: pointer;
    color: #007bff;
  }
&lt;/style&gt;

&lt;script&gt;
  $(function() {
    $('.toggle-btn').on('click', function() {
      $(this).next().toggle();
      $(this).text($(this).text() === '表示' ? '非表示' : '表示');
    });
  });
&lt;/script&gt;

&lt;p class="toggle-btn"&gt;表示&lt;/p&gt;
&lt;pre style="display: none;"&gt;&lt;code&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    こんにちは、世界！
  &lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;

この例では、jQueryを利用して折りたたみ表示のトグル機能を実装しています。

折りたたみ表示のボタン（.toggle-btn）がクリックされると、次の<pre>要素の表示状態が切り替わります。

そして、ボタンのテキストが「表示」と「非表示」で切り替わるようになっています。