はぴすぷ

技術ブログ書く人にオススメ！HTMLエスケープしてくれるChrome拡張機能！

      2015/09/22

技術系のブログやってると、やっぱりソースコード貼り付けたいですよね。

でもその為にはHTMLエスケープしないといけない(´・ω・｀)めんどくさい。

HTMLエスケープしてくれるツールはいっぱいあるんだけど、ブラウザ上で記事書いてる時にサクッとやりたい。

そんな時に便利なのが、Google Chromeの拡張機能「HTML Escape Helper」です。

スポンサーリンク

HTML Escape Helperの使い方

まず拡張機能を取得するには「HTML Escape Helper」にアクセスして「CHROMEに追加」をクリック。

SS_0828

「追加」をクリックします。
SS_0829

右上の方にアイコンが追加されます。

SS_0831

追加されたアイコンをクリックすると、入力ウィンドウが出現します。

SS_0832

変換したいコードを貼り付けて、「escape」ボタンをクリック。

SS_0833

入力したコードが、HTMLエンコードされます。クリップボードにもコピーされています。気が利いてていいですね！

SS_0834

もう一度「escape」ボタンをクリックすると2重にエスケープしてくれます。

クリップボードに貼り付けてくれてるので、あとは自分のブログの投稿フォームに戻って貼り付けるだけです。

<div id="comments-navi">
    <div id="comments-header">
        <h3 class="comment-label"><i class="fa fa-comments-o"></i>&nbsp;   コメント</h3>
        <div class="comment-count"><?php echo get_comments_number(); ?></div>
        <div class="clear"></div>
    </div>
    <div id="comments-display-toggle-btn-wrap">
        <span id="comments-display-toggle-btn">
            <?php if (have_comments()) { echo 'コメント・'; } ?>入力フォームを<span id="comments-display-toggle-text">隠す</span>
        </span>
    </div>
</div>

2重にエスケープした方。さすがに綺麗には表示してくれませんね。

&lt;div id="comments-navi"&gt;
    &lt;div id="comments-header"&gt;
        &lt;h3 class="comment-label"&gt;&lt;i class="fa fa-comments-o"&gt;&lt;/i&gt;&amp;nbsp;   コメント&lt;/h3&gt;
        &lt;div class="comment-count"&gt;&lt;?php echo get_comments_number(); ?&gt;&lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="comments-display-toggle-btn-wrap"&gt;
        &lt;span id="comments-display-toggle-btn"&gt;
            &lt;?php if (have_comments()) { echo 'コメント・'; } ?&gt;入力フォームを&lt;span id="comments-display-toggle-text"&gt;隠す&lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

ちなみにこのブログのシンタックスハイライト（コード色付け）には「highlight.js」というものを使用しています。
興味がある方こちらからどうぞ。
WordPressでコードを色付け表示する。highlight.jsでシンタックスハイライト

終わりに

ブラウザ上で記事を書いてる技術ブロガーの方には、かなりありがたい拡張機能ですよね。

最近新しいものを漁っていなかったので、また色々便利なものがあれば紹介していこうと思います。

実はChromeの拡張機能ですが、Web系の開発言語（主にHTMLとJS）の知識があれば結構簡単に自分で作れちゃったりします。

1～2年前に興味持っていくつか自分専用に作ってました。

ブログのカスタマイズが落ち着いたらChrome拡張機能の作り方についても書くかもしれません(^q^)いつになるか分かりませんがｗ

 - Google Chrome, Webサイト構築 ,