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

HTMLでソースコードを埋め込む方法を学ぶ初心者HTML
この記事は約10分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>要素の表示状態が切り替わります。

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

まとめ

以上の方法を参考に、ソースコードを埋め込む際に、読者に分かりやすく、見た目も魅力的な表示ができるように工夫してみてください。

この記事を読めば、HTMLソースコードの埋め込みやカスタマイズ方法について理解し、実際に応用することができるようになります。

また、SEOを意識した記事作成にも役立つことでしょう。