Blogger コードの一部を強調表示したい

HTML では

コードの任意の一部のみを強調表示したい場合は、<mark> タグを使えば良いです。

例えば

HTML

<code>
document.write(<mark>"Hello World!!"</mark>);
</code>

と書けば、

document.write("Hello World!!");

と表示されます。

Markdown では

これを Markdown だけで実現する方法はなく、コードブロック自体を Markdown を使わず HTML で記述すれば実現できますが面倒です。そこで、強引にMarkdown のコードブロック中に <mark> タグを挿入しておき、変換された <mark> をHTML編集画面でタグ<mark>に戻すことにしました。

ただし、コードブロック中に <mark> が元々存在する場合には、それと区別する必要がありますし、StackEdit を使用していると <mark> がキーワードと認識されて余計なタグが追加されることがあります。そこで、Markdown では <mark> タグをそのまま使わずコメントアウトした<!--mark--> で挿入することにします。その上で、最終的にHTMLで <!--mark--> <!--/mark--> をコメントインすることにしました。

具体例を書くと、Markdownで

Markdown

 ```
 document.write(<!--mark-->"Hello World!!"<!--/mark-->);
 ```

と記載すると、HTMLでは

HTML

<pre><code>
document.write(&lt;--mark--&gt;"Hello World!!"&lt;--/mark--&gt;);
</code></pre>

と変換されます。
この <--mark--> と<--/mark--> を <mark> </mark>に戻せば良いことになります。

Blogger での HTML 編集

Blogger の場合、HTML 編集画面で Chrome 拡張機能の Search and Replace を使えば、正規表現を使って Serach For に <!-- *(\/?)mark *--> を Replace With に <$1mark> にセットすことでまとめて置換できます。

ただ、Search and Replace は1パターンしか記憶できませんので、前回の記事のようなパターンの置換も同時に行いたい場合は、打ち変える必要があり少し面倒です。

続く。