HTMLでソースコードを表記する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

世にある多くのIT系ブログではHTMLやCSSのソースコードが丁寧に説明されており、分からないタグを何かを調べるときには大変重宝しております。ですが、たくさん調べていくうちに「そもそもどうやってソースコードを表記しているのだろう?」と疑問を持ち始めました。

例えば、テキスト欄に

<b>太字</b>

と記載すると、通常はコードとして読み込まれるため、

太字

のように表示されてしまいます。

実際にはどのような作業を行った結果、コードをコードのまま表記できるのか。この疑問を解消すべく、ソースコード表記の方法を調べたので備忘録として記します。

HTMLでソースコードを表記

ソースコードを表記する方法は実にたくさんあります。
・SyntaxHighlighter
・google-code-prettifyなどなど。

wordpressのプラグインでは
・SyntaxHighlighter Evolvedなどが利用できます。

ですが、今回はブログ自体のCSSやテンプレートをいじることなく、ソースコードを表記する方法を記します。

特殊文字を置換

HTMLでは「<」や「>」などは特殊文字と云い、タグの記号であることからウェブ上では文字として表示されません。HTMLの特殊文字を表示させるためには、「<」は「&lt;」、「>」は「&gt;」と書き換えてタグを無効化(エスケープ)する必要があります。
この表記できない文字を表記する手法を文字実態参照と云います。

文字実態参照一覧
実態参照 特殊文字 意味
&amp; & アンパサンド
&lt; < 小なり
&gt; > 大なり
&nbsp;   空白
&quot; " クォーテーション
&apos; ' アポストロフィー
&copy; © コピーライト

<pre>タグを使用

次は置換した特殊文字を<pre></pre>タグを使用して記述していきます。

<pre>~</pre>タグは、囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。


&lt;pre&gt;テキスト入力画面&lt;/pre&gt;

<pre>ブラウザ表示画面</pre>

この方法で難しいプログラム等を利用せずに、HTMLの記述だけでソースコードを表記することができます。

おまけの装飾

ここからは外枠などの装飾を施したバージョンを紹介します。

外枠を設定

&lt;div style="border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
??
枠線を引く
?? &lt;/pre&gt;
&lt;/div&gt;
<div style="border:1px solid #aaa; padding-left:2em;">
?? <pre>
??
枠線を引く
?? </pre>
</div>

枠内に色を付ける

&lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
??
枠内に色を付ける
?? &lt;/pre&gt;
&lt;/div&gt;
<div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
?? <pre>
??
枠内に色を付ける
?? </pre>
</div>

文字フォントを設定する

??


&lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
????? &lt;span style="font-family:Meiryo; font-size:small;"&gt;
文字フォントをメイリオに設定
????? &lt;/span&gt;
?? &lt;/pre&gt;
&lt;/div&gt;
?? 

??


<div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
?? <pre>
????? <span style="font-family:Meiryo; font-size:small;">
文字フォントをメイリオに設定
????? </span>
?? </pre>
</div>
?? 

&表示のコツ

「<」と表示させたければ 「&lt;」
「>」と表示させたければ 「&gt;」
「&gt;」と表示したい時は「&amp;gt;」
「&amp;gt;」と表示したい時は「&amp;amp;gt;」
と記述します。

参考にしたサイト→At Studio TA

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

-スポンサーリンク-

コメントを残す

*

CAPTCHA