ブログやホームページにソースコードを載せる方法

ブログにソースコードを載せる

ブログやホームページにソースコードを載せたい場合(自分のサイトに備忘録として残したいなど)ってありますよね。

しかし文章内にコードを書くと思ったように表示されない。

ワードプレスならプラグインを使用すれば簡単にできそうですが、
プラグインを使いすぎるとサイトが重くなると聞いたのでなるべくなら使用したくない。。。

と思いながら色々と調べていたら意外と簡単にできる事がわかりました。

補足

ワードプレスで検証した為、別のブログ等で検証はしていません。

この方法でコード表示ができるかどうかはわかりませんが、何をやってもダメだったと言う方も一度この方法をやってみるのもいいと思います。

スポンサードサーチ

コード表示されなかったパターン

例えばこのようなコード

<i class="far fa-laugh-beam fa-2x"></i>

そのまま貼り付けると

もちろんこのようになります。

<pre>~</pre>で囲んでも

<pre>
<i class="far fa-laugh-beam fa-2x"></i>
</pre>


このように表示されます。

<code>~</code>で囲んでも

<code>
<i class="far fa-laugh-beam fa-2x"></i>
</code>


こうなっちゃいます。

組み合わせてみたけど

<pre>
<code>
<i class="far fa-laugh-beam fa-2x"></i>
</code>
</pre>




なぜかこんな風になっちゃます。

コードの表示方法

表示方法は簡単です

まずこのサイトにアクセスします。

HTML特殊文字変換ツール

特殊文字変換
  1. 特殊文字に変換を選択します。

  2. 変換するテキストを入力します。

  3. 左側の四角の中にブログやサイトに載せたいコードをコピペします。

  4. 変換するボタンを押します

  5. 右側の四角に変換された文字列がでます。

  6. これをコピペすればコードが表示されているはずです。

例えばこのコードを記事内に載せたいとします。

左側の四角にこのコードをコピペします。

<pre>
<code>
<i class="far fa-laugh-beam fa-2x"></i>
</code>
</pre>

変換ボタンを押すとこのようなコードに変換されました。

&lt;pre&gt;
&lt;code&gt;
&lt;i class=&quot;far fa-laugh-beam fa-2x&quot;&gt;&lt;/i&gt;
&lt;/code&gt;
&lt;/pre&gt;

変換した文字列をコピーして記事内に貼り付ければこのように表示されます。

<pre>
<code>
<i class="far fa-laugh-beam fa-2x"></i>
</code>
</pre>

スポンサードサーチ

おわりに

変換さえできれば簡単にブログなどの記事内にコードを表示させる事ができました。

変換ツールを作ってくれた
tech-unlimitedさんには感謝です。

何故表示できないのか理由や仕組みなどをわかりやすく説明されているサイトもあるので、気になる方は詳しい方のサイトを見てみるといいと思います。

スポンサーリンク
スポンサーリンク