Seesaa

【HTML】Seesaaブログの本文にコードをそのまま表示する。

投稿日:

プログラムのコードを表示させる場合。
『<code></code>」で囲めばそのまま表示される。』
と聞きやって見たけど全く上手くいかない。

調べてみると<xmp></xmp>
を使えばコードをそのまま表示出来るようだ。

※注意
作成時はChromeブラウザにて編集・確認を行っています。

2015-03-01 12.10.54

テスト用コード

</p> <h2><span id="_test">テスト テスト test あいうえお アイウエオ</span></h2> <p>

テスト:<code></cocd>

参考:<CODE>HTMLクイックリファレンス

◆コード

<code></p> <h2><span id="_test-2">テスト テスト test あいうえお アイウエオ</span></h2> <p></code>

◇表示

テスト テスト test あいうえお アイウエオ

テスト:<pre></pre>

参考:<PRE>HTMLクイックリファレンス

◆コード

</p><!-- Crayon Syntax Highlighter v_2.7.2_beta --> <div id="crayon-5a115a8d472e6393082942" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> &lt;h2&gt;テスト テスト test あいうえお アイウエオ&lt;/h2&gt;</textarea></div> <div class="crayon-main" style=""> <table class="crayon-table"> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a115a8d472e6393082942-1">1</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a115a8d472e6393082942-1"><span class="crayon-o">&lt;</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span>テスト<span class="crayon-h"> </span>テスト<span class="crayon-h"> </span><span class="crayon-i">test</span><span class="crayon-h"> </span>あいうえお<span class="crayon-h"> </span>アイウエオ<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div></div></td> </tr> </table> </div> </div> <!-- [Format Time: 0.0001 seconds] --> <p>

◇表示

テスト:<xmp></xmp>

参考:<XMP>HTMLクイックリファレンス

◆コード

<xmp></p> <h2><span id="_test-4">テスト テスト test あいうえお アイウエオ</span></h2> <p>

◇表示

</p> <h2><span id="_test-5">テスト テスト test あいうえお アイウエオ</span></h2> <p>

まとめ

参考にしたサイトを見るとHTML4.0から<xmp>は
廃止されているから<pre>を使えって書いてあるけど
いいんだろうか?

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる) エビスコム

ソシム 2014-10-28
売り上げランキング : 670

Amazonで詳しく見る by G-Tools

AdSense_336px

AdSense_336px

-Seesaa
-

Copyright© My,WebNote - 備忘録 - , 2017 AllRights Reserved