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

 

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

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

  • <は、&lt;
  • >は、&gt;
  • &は、&amp;
  • <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」を使いましょう。

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

    投稿日: 2017/09/29
    最終更新日: 2019/02/08
     
    筆者のご紹介
    角政典@moreiic
    真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
    よく検索されてる記事