htmlタグをそのまま表示させる置き換えツール

htmlタグやphpタグをそのまま表示させて説明したいことはディズニーランドに行くことよりも多いはず。そんなに多いはずなのに、やり方を忘れる困ったものです。

数が少なければ下記で置き換えは簡単にできます。

<div class="exsample">例えばdivタグ</div>

素敵にタグをそのまま表示できていると思います。

でも、沢山あるタグをいちいち置き換えていたら夜も暮れて朝日が登ってしまうでしょう。そこで、htmlタグやphpタグ、改行、スペースなどを適切に置き換えてくれるツールをご紹介します！

htmlタグを表示させる方法

htmlやphpのタグを入力して変換するだけで、タグを表示出来るように変換してくれます。

htmlソースコード変換

これが便利なんですよね。プログラマーくらいしか需要はないかもしれないけど、凄くありがたいツールです。

もっと簡単にhtmlやscriptタグのまま表示させる

一々変換するのがダルくて布団に潜り込んでしまいそうになる私。そんなときには、もっと簡単にタグをそのまま表示させる方法があります。

<pre>
    <code>
    <math>
    <![CDATA[
<script type="text/javascript">
$(".change").click(function(){
$("a.alink").text($(this).text());
});
</script>
    ]]>
    </math>
    </code>
</pre>

上記のように記述することで<![CDATA[]]>に挟まれたjavaScriptの記述だけが表示されます。シンプルで便利ですが、ブラウザなど環境に依存してしまうので、自分の制作環境範囲内での運用になりそうです。

javaScriptで吐き出す方法

もう一つは、scriptのコードをjavaScriptで読み込んで吐き出す方法です。これが環境依存もないしシンプルかも。

<pre><code id="script_echo"></code></pre>

<script id="script_base" type="text/plain">
$(".change").click(function(){
$("a.alink").text($(this).text());
});
</script>

<script>
document.getElementById('script_echo').textContent = document.getElementById('script_base').textContent;
</script>

WordPressでやると、<p>タグやらが出てきて使えないので「SyntaxHighlighter Evolved」を使いましょう。

ちなみにディズニーランドには行ったことがありません。