</textarea>を含んだコードブロックがあるとレイアウトが崩れる

## 症状 マークダウン用の`<textarea>`タグ内に、`</textarea>`タグを含んだコードブロックがあると、Blogger上でレイアウトが崩れてしまいました。 --- 僕は、Bloggerの投稿を、VSCodeでマークダウン形式のテキストとして作成し、Bloggerの投稿作成画面で、HTML形式欄にそのテキストをコピー＆ペーストしようと思っていたのですが、作成したマークダウン形式のテキストの中に、`</textarea>`タグを含んだコードブロックがあると、Bloggerでの表示レイアウトが崩れてしまいました。 <a name='more'></a> <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICLC-obqnovMfphK99izSvRPh1r3hIs8Z9lR8c8Sjku4cFks2dqjboRENUkiS4q3mJ_s2iqW6fXZOEdmH_KlaXQRlXoVcxl7LKnIFgrlqcECFEhVzYstWaeoiB7gso3qJuF-9FbVBh8o/s1600/20190424_textarea%25E7%25B5%2582%25E7%25AB%25AF%25E3%2582%25BF%25E3%2582%25B0%25E3%2582%2592%25E5%2590%25AB%25E3%2582%2593%25E3%2581%25A0%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%258C%25E3%2581%2582%25E3%2582%258B%25E3%2581%25A8%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2581%258C%25E5%25B4%25A9%25E3%2582%258C%25E3%2582%258B_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICLC-obqnovMfphK99izSvRPh1r3hIs8Z9lR8c8Sjku4cFks2dqjboRENUkiS4q3mJ_s2iqW6fXZOEdmH_KlaXQRlXoVcxl7LKnIFgrlqcECFEhVzYstWaeoiB7gso3qJuF-9FbVBh8o/s320/20190424_textarea%25E7%25B5%2582%25E7%25AB%25AF%25E3%2582%25BF%25E3%2582%25B0%25E3%2582%2592%25E5%2590%25AB%25E3%2582%2593%25E3%2581%25A0%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%258C%25E3%2581%2582%25E3%2582%258B%25E3%2581%25A8%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2581%258C%25E5%25B4%25A9%25E3%2582%258C%25E3%2582%258B_2.png" width="320" height="231" data-original-width="777" data-original-height="562" /></a></div> --- ## 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - [Marked.js 導入手順](https://logospathos-techlog.blogspot.com/2019/04/bloggermarkedjs.html) - マークダウン・エディタ：VSCode（1.33.1） - マークダウン拡張機能：Markdown All in One（2.2.0） --- ## 再現手順 たとえば、以下のようなコードブロックを含むマークダウン形式テキストを作成します。 ``` html <textarea> ## Sample Heading sample text </textarea> ``` Bloggerの投稿作成画面で、HTML形式欄にこのテキストをコピー＆ペーストして、保存しようとすると、 投稿を保存したり、公開しようとすると、「作成された HTML ファイルは承認できません: 終了タグが開始タグと一致していません: TEXTAREA 表示しない」というメッセージが出てきました。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3lmVT70pXfhfC72xN7x2bLK_qMJVh_UK7rfASxlLXl06E-7L6xFgQRgI1PzCdvtkQaPwapqHscJ6BrZUv-Z7b7-qZH3RpMplGHM_vXQ6w85KH3YOLxYKeoTaufdSHOafrOTMzEA1ZUw/s1600/20190424_textarea%25E7%25B5%2582%25E7%25AB%25AF%25E3%2582%25BF%25E3%2582%25B0%25E3%2582%2592%25E5%2590%25AB%25E3%2582%2593%25E3%2581%25A0%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%258C%25E3%2581%2582%25E3%2582%258B%25E3%2581%25A8%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2581%258C%25E5%25B4%25A9%25E3%2582%258C%25E3%2582%258B_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3lmVT70pXfhfC72xN7x2bLK_qMJVh_UK7rfASxlLXl06E-7L6xFgQRgI1PzCdvtkQaPwapqHscJ6BrZUv-Z7b7-qZH3RpMplGHM_vXQ6w85KH3YOLxYKeoTaufdSHOafrOTMzEA1ZUw/s320/20190424_textarea%25E7%25B5%2582%25E7%25AB%25AF%25E3%2582%25BF%25E3%2582%25B0%25E3%2582%2592%25E5%2590%25AB%25E3%2582%2593%25E3%2581%25A0%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%258C%25E3%2581%2582%25E3%2582%258B%25E3%2581%25A8%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2581%258C%25E5%25B4%25A9%25E3%2582%258C%25E3%2582%258B_1.png" width="320" height="182" data-original-width="992" data-original-height="564" /></a></div> 「表示しない」をクリックして、公開できても、前の画像のように`</textarea>`以降が崩れしまっていました。 ## 回避策 コードブロック中の `</textarea>`をエスケープすることを検討してみました。 頭の `<` を `&lt;`に置き換えると、Blogger上では表示がうまくいくようになりました。 ですが、VSCode上で同じ書き方をすると、プレビューでは`&lt;`がそのまま表示されるので、見栄えが悪いです。 --- ## 今後の課題 * [ ] コードブロック中の`</textarea>`をBlogger投稿時にエスケープする手順を検討する。 * [ ] コードブロック中に`</textarea>`があっても、Blogger上でレイアウトが崩れないような、マークダウンの書き方がないか調べる。 --- ## 更新履歴 2019-04-24 新規作成