[エラー対処] StackEditでhtmlを埋め込むとstyle属性が消える.

StackEditでhtmlタグにstyle属性を埋め込んでexportすると, style属性が消えてしまいました.

解決方法を一言で

class属性を使い, cssでstyleを記述しましょう.

<style>  
.icatch {  
display: none;  
}  
</style>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" class="icatch" />

環境

• Web

エラー発生

私はブログを書くのにStackEditというウェブアプリを使っています.

今回, ブログを書くときにアイキャッチ画像を載せてみたいが, ブログ本文には表示させたくないと思い, 以下のようなimgタグをブログの冒頭に貼りました.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" style="display: none;" />

## スケジュール
...

しかし, StackEditからBloggerにexportすると, 画像がそのまま表示されてしまいました.
なぜ?と思い, Chrome DevTools で確認してみると, style属性が消えていました. どこいったの…?

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg"/>

## スケジュール
...

さらに原因を切りわけるため, StackEditからHTMLファイルをダウンロードしてみました.
すると, そのHTMLファイルでもstyle属性が消えていたので, StackEditがMarkdownからHTMLに変換するときに落とされているのだろうと当たりをつけました.

対処

色々Web上を調べた結果, コミュニティでHTML Stripping on Exportというディスカッションを見つけました.

どうやらXSS攻撃を防ぐために, StackEditでは変換のプログラムがstyle属性を省くそうです.
そのため, 解決策として, StackEdit の中の右メニューのTemplatesから, Templateを作ってそこにstyle属性を貼る方法が紹介されていました.

そのため, hide icatchという次のようなテンプレートを作成しました.

<!-- hide icatch -->

<style>  
.icatch {  
display: none;  
}  
</style>  
  
{{{files.0.content.html}}}

本文では, HTMLタグの中にclass="icatch"を埋め込みます.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" class="icatch" />

## スケジュール
...

あとはexportする際にtemplateをhide icatchを選択し, exportすることでstyleが適用されました🎉

この方法だとclass属性を作れば良いので, Bloggerのテンプレートのヘッダーにあらかじめstyleを作っておき, StackEditではclass名のみを記述するという運用でもいいかもしれません.
ただ, 私はモノグサなのでこの方法をしばらく使っていきます.