制作工程ブログ
おいでよコードの森

ソースコードをブラウザ上でそのまま表示させる方法

  • 2014年04月10日|
  • 若林 遼|

ブログにコードを書く方法

今回はタイトル通り、ソースコードをブラウザ上でそのまま表示させる方法について書こうと想います。

「<」→「&lt;」、「>」→「&gt;」と置き換える

<p>を表示させたければ&lt;p&gt;と記述します。
「&gt;」の「gt」は「greater than」、「&lt;」の「lt」は「less than」という意味で日本語の「大なり」「小なり」に対応してるので、それさえ覚えておけば書き方を忘れてもすぐに思い出せると思います。

ちなみに&amp;は、「&amp;amp;」と記述して表示しています。

他にもブラウザ上にソースコードを記述する方法がいくつかあります、詳しくは次の参考サイトにてご確認ください。
「ブラウザにソースコードをそのまま表示する基本的な方法」
http://www.life-gp.net/2013/06/blog-post.html

WordPressのプラグインでソースコードを表示させる方法

サイト構築にWordpressを使っている場合は、ショートコードを挟むだけでそのまま表示させることができる便利なプラグインがあります。
SyntaxHighlighter Evolvedはその中の一つです。
そのまま表示させたいソースコードを、[表示したい言語のショートコード] と [/表記したい言語のショートコード]のタグで囲むだけで表示させることができます。
詳しい導入方法は次の参考サイトにてご確認ください。
「エディタのように綺麗にソースコードを表示できるプラグイン – SyntaxHighlighter Evolved の使い方」
http://wordpresscollege.org/plug-in/syntaxhighlighter-evolved/

参考サイトに頼った記事になってしまった感じですね・・・次回までにブログの書き方を勉強しておきます。
この記事を参考にプログラムの記事を書く人が一人でも増えれば幸いです。
ではでは。