HTMLでソースコードをそのまま表示させる方法!

HTMLでソースコードをそのまま表示させる方法を解説します。みんなと情報を共有したくて、その際にブラウザ上でHTMLのソースコードをそのまま表示させる必要がある、そんな時にこの記事の内容を覚えておくと困ることなく、実現することが出来ます。

コンテンツ [表示]

  1. 1HTMLでソースコードをそのまま表示したい
  2. 2HTMLでソースコードをそのまま表示させる方法
  3. 3preタグとcodeタグについて
  4. 3.1preタグを使用するときの注意点
  5. 3.2ハイライトを付けたソースコードを表示する方法
  6. 4まとめ

HTMLでソースコードをそのまま表示したい

「この便利なコードの紹介をしたい、そのためにはブラウザ上にHTMLで書いたソースコードをそのまま表示させる必要がある」なんてことがあると思います。

ここではHTMLでソースコードをそのまま表示する方法を解説し、HTMLでソースコードをそのまま表示したいという問題を解決します。

では順番に見ていきましょう。

Photo byjamesmarkosborne

HTMLでソースコードをそのまま表示させる方法

HTMLでソースコードをそのまま表示させるに、覚えておくと便利な知識がいくつかあります。

それについて以下で順番に紹介していきます。

preタグとcodeタグについて

まずソースコードを囲むHTMLタグとしてはcodeタグを使います。
codeタグは「ここはソースコードを表示する場所です」と明示するために用いるHTMLタグの1つです。

そしてpreタグと一緒に用いることで、フォーマットが崩れず、そのままソースコードを表示することができます。

では実際にソースコードで見てみましょう。

このようにソースコードが表示されることが分かります。

ここで注意点としてソースコードを表示させるためには、上のサンプルコードでもしているようにエスケープ処理をしなければなりません。

エスケープ処理については下記の記事で解説しています。
ぜひ見てみてください。

あわせて読みたい
preタグを使ったエスケープ処理の方法を解説!のイメージ
preタグを使ったエスケープ処理の方法を解説!
HTMLタグの1つであるpreタグを使ったエスケープ処理の方法を解説します。またプログラミング初心者の方向けにHTMLで用いるエスケープ処理とは何か、どういった時に使用するのか、またその重要性についても解説します!

preタグを使用するときの注意点

preタグを用いて長いコードを書いた場合、画面幅いっぱいで折り返さずに、はみ出てしまう問題があります。

どういうことなのかサンプルコードを用いて見てみましょう。

このように画面からはみ出ており、横スクロールしないと全て見れないという形になります。

ではpreタグで文字列が改行されずにはみ出る問題の解決方法を簡単に紹介します。

それはCSSでwhite-spaceプロパティにpre-wrapを設定してあげるだけです。

それでは実際にサンプルコードを用いて見てみましょう。

 

このように画面いっぱいで文字が折り返していることが分かります。

preタグで文字列が改行されずにはみ出る問題について詳しく解説している記事があります。
以下にリンクを貼っておくので、ぜひ見てみてください。

あわせて読みたい
preタグで文字列が改行されずにはみ出る問題の対処法!のイメージ
preタグで文字列が改行されずにはみ出る問題の対処法!
preタグで文字列が改行されずにはみ出る問題の対処法について解説します。preタグ内で文字を書くと画面幅内で折り返しが効かずは文字がはみ出て続きます。この問題をCSSをもちいて、画面幅内で折り返しが効くように改善します。

ハイライトを付けたソースコードを表示する方法

ハイライトを付けることでソースコードが見やすくなります。これをするためにはPrism.jsを用いる方法があります。

ここではサンプルコードを用いて挙動を見てみましょう。

またPrism.jsについては別記事に書いており、以下にリンクを貼っておくのでぜひ見てみてください。

このようにハイライトをつけることができます。

Prism.jsについて詳しくは以下の記事を参考にしてください。

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

まとめ

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

ここで紹介してきた手法を用いて、ソースコードをブラウザ上にそのまま表示させ、そのソースコードについて解説を加えたりして、誰かとシェアしてみるとおもしろいかもしれません。

ぜひともここで紹介してきた手法を用いてやってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

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

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

関連記事

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

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

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

目次