preタグを使ってソースコードを埋め込む方法を解説！
HTMLタグの１つであるpreタグを使ってソースコードを埋め込む方法を解説します。ブログなどでソースコードを用いて解説をしたいときなどに役立ちます。preタグ以外にHTML内にソースコードを書く際に使うcodeタグについても解説します。
preタグを使ってソースコードを埋め込む方法
プログラミングのブログ記事を書いているときなど、実際のソースコードの記述を埋め込み、解説したいと思うことがあります。
このような時に以下に挙げるpreタグを使ってのソースコードを埋め込む方法が役立ちます。それではその方法について順番に見ていきましょう。
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のソースコードの例です。
ソースコードにシンタックスハイライトをつけるおすすめの方法については下記の記事で解説していますので、次のステップの記事として、ぜひ参考にしてみて下さい。
