CSS

htmlにソースコードを埋め込む方法まとめ

htmlにソースコードをきれいに埋め込みたい

htmlページにソースコードを紹介したいのに、うまく表示できなくて困っていませんか?実は【pre】と【code】という要素があります。

<pre要素>とは?

<p>要素などでは字下げしても無視してくれるので、可読性の高いソースをwebで見せるには適していますが、コードを説明したい時に無視されると読みづらくなりますね。これを解決してくれるのが<pre>要素です。
<pre>要素は改行や字下げなどの書式化されたフォーマットを入力したとおりに表示してくれます。

<code要素>とは?

ソースコードであることを示す要素です。

<pre><code>テスト</code></pre>と表現します。

ソースコードに背景色を付けたい


「code-prettify」というライブラリがあります。使い方は下記のサイトに詳しく解説してくれていますので参考にどうぞ

https://mae.chab.in/archives/2963

-CSS