投稿日:

Webサイトにソースコードを載せる方法(1)

どうもキーです。
今回はHTMLのタグを使ってWebサイトにソースコードを載せるときにレイアウトが崩れないようにしようと思います。
タグを使うのでWordPressでなくてもできますし、JavaScriptが使えなくても大丈夫です。
ただ、見た目もそれ相応なのでご了承を。実際にブログなどに載せたい場合は次回以降のほうが参考になると思います。

方法

以下のように入力しましょう。

<pre><code>
//ここにソースコードを入力
<code></pre>

この方法を使うと上のように灰色の枠で囲まれます。

注意点として、ソースコード中の特殊文字についてはエスケープが必要です。
例えば上記のコードをpre要素とcode要素で囲むときの中身は以下のように入力する必要があります。

&lt;pre&gt;&lt;code&gt;
 //ここにソースコードを入力
 &lt;code&gt;&lt;/pre&gt;

エスケープが必要な文字はいくつかありますが正直覚えてられないです。
なのでこういうものは既存の変換サイトさんを頼らせていただきましょう。
例えば以下です。

https://webtools.dounokouno.com/htmlescape/

また、WordPressブログなどであれば、タグをテキストモードで入力して、中身をビジュアルモードで入力するという手もあります。(筆者は今のところこちらで不便していないのでこの方法です。)

結果

Webサイトでソースコードが表示できる。
といってもキーワードに色などもついておらず読みやすくはないですね。
次回はシンタックスハイライト(色付け)についてやってみようと思います。