Blogger StackEdit で枠囲みをしたい

ここで言う枠囲みとは、HTML で

HTML

<div class="box">
inside box 
</div>

と記述して

inside box

このように出力することです。

私は StackEdit を使っているのですが、Markdown では枠囲みのような細かな装飾をすることができません。Markdown で対応できない場合は HTML で記述すれば良いのですが、StackEdit は PHP Markdown Extra の “Markdown Inside HTML Blocks” には対応しておらず、Markdown で

Markdown

<div markdown="1">
This is *true* markdown text.
</div>

と記述しても、Markdown の部分が HTML に反映されません。This is true (←強調表示) markdown text. となって欲しいところが、This is *true* markdown text. とそのまま表示されてしまいます。

こういう場合は、HTML ブロック内はすべて Markdown を使わず HTML で記述すれば良いわけですが、

Markdown

*outer html*
<div>
This is <em>true</em> markdown text. 
</div>

と記述すると、今度は HTML ブロックの外にある *outer html* が outer html (←強調表示)にならず、*outer html* とそのまま表示されてしまいます。

こういう場合は、

Markdown

*outer html*
<div>This is <em>true</em> markdown text. </div>

と一行で書くとうまくいったりします。

改行を入れたい。HTML は面倒。

HTML の中が短い文章の場合は上述の方法が取れるのですが、長い文章の場合は、改行を入れたいし、そもそも HTML で記述するのは面倒です。仕方ないので、Markdown の中では HTML 部分を一旦コメントアウトして、

Markdown

<!-- div class="box" -->
This is *true* markdown text. 
<!-- /div -->

Markdown を有効にしておき、コメントアウトした HTML を Blogger のHTML編集画面でコメントインすることにしました。

（StackEdit の Extension を使って HTML への変換時にコメントを外してみようとしましたが、終了タグが別の場所に動いたりする（多分 DOM での処理の影響）ので挫折しました。また、StackEdit は開発がストップしていることもあり、StackEdit に依存した処理にはこだわりたくありませんでした。）

コメントインが面倒

Markdown (StackEdit) ではコメントアウト、HTML (Blogger) ではコメントインすることで一応対応可能にはなったのですが、コメントアウトはともかくコメントインは手作業では面倒です。

また、Blogger の編集画面には置換機能がありません。
Chrome 拡張機能の Search and Replace を使えば置換可能ですが、置換対象が複数パターンある場合は打ち変える必要があり、やっぱり面倒でした。

Search and Replace の利用画面

（StackEdit で  と入力すると、サニタイジングされて HTML では になります。）

続く。

2017-11-21