preタグを使ってソースコードを埋め込む方法を解説!

HTMLタグの1つであるpreタグを使ってソースコードを埋め込む方法を解説します。ブログなどでソースコードを用いて解説をしたいときなどに役立ちます。preタグ以外にHTML内にソースコードを書く際に使うcodeタグについても解説します。

コンテンツ [表示]

  1. 1preタグを使ってソースコードを埋め込む方法
  2. 1.1preタグとは?
  3. 1.2codeタグとは?
  4. 1.3ソースコードを埋め込む方法
  5. 2まとめ

preタグを使ってソースコードを埋め込む方法

プログラミングのブログ記事を書いているときなど、実際のソースコードの記述を埋め込み、解説したいと思うことがあります。

このような時に以下に挙げるpreタグを使ってのソースコードを埋め込む方法が役立ちます。それではその方法について順番に見ていきましょう。

Photo byjamesmarkosborne

preタグとは?

まずpreタグについて解説します。

preタグは主にHTML内で文章を書くときに役立ちます。

もしpreタグ以外を文章を書く際に用いると、改行をしたい際にわざわざbrタグを入れる必要があったり、インデントを揃えるときにはCSSで設定しなければならない、なんてことがあります。

しかしpreタグを用いるとHTMLに入力したとおりに表示されるため、改行、インデント、半角スペースなどがそのまま表示されます。

サンプルコードで実際にpreタグの便利さを確認してみましょう。

このように文章を書く際によく使う段落を表すpタグではインデントが揃ってなく、改行も行われていないのに対して、preタグだとインデントが揃っていて、改行も行われていることがよく分かります。

codeタグとは?

codeタグはプログラムコードを示す際に用います。そして、codeタグで囲んだテキストは、プログラムのソースコードであることを意味します。

インデントや改行をしているソースコードに対しては、pre要素の中に書いてあげます。

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

それではpreタグとcodeタグを用いてJavaSctriptのコードをHTML内に埋め込みます。

実際にサンプルコードとプレビューで見てみましょう。

このようにcodeタグの外側をpreタグで囲んであげることにより、ソースコードのインデントが揃っていて、読みやすいコードとなっていることが分かります。

まとめ

いかがでしたでしょうか?

preタグを使ってソースコードを埋め込む方法だけでなく、preタグ、codeタグについても簡単に解説してきました。

実際にソースコードを埋め込む際にはCSSで装飾したほうが見栄えがよくなるためおすすめです。またプログラムのコードであればシンタックスハイライトをつけて色付けをするとより見やすくなります。

下記がシンタックスハイライトを付けたJavaScriptのソースコードの例です。

ソースコードにシンタックスハイライトをつけるおすすめの方法については下記の記事で解説していますので、次のステップの記事として、ぜひ参考にしてみて下さい。

あわせて読みたい
Prism.jsでシンタックスハイライトを付ける方法!使い方を解説のイメージ
Prism.jsでシンタックスハイライトを付ける方法!使い方を解説
Prism.jsを使う事でpreタグ・codeタグでのソースコードの埋め込みの表示に対してシンタックスハイライトで色付けすることが出来ます。導入方法と使い方を解説していきます!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次