ATOM markdown-preview-enhanced の CSSを調整する

ATOM に追加するパッケージ
markdown-preview-enhanced

これでプレビューして右クリック → コンテナメニュー → HTML に保存するのは日常の作業でもよくある。
プレビューのCSSも調整し、そのままHTMLに反映されていればそれで満足。

ATOMを開いたら、ctrl + Shift + p キーを押して、f:id:posturan:20180519154750j:plain
preview enhanced と入力して
Markdown Enhanced Preview : Customize css
というの選択する。

style.css というのが開かれる。
実際は、Windows 環境なら、C:\Users\ユーザ\.mume\style.css が開かれる。
こんなCSSが最初は開かれるはずだ。

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
}

.markdown-preview.markdown-preview { } の中に、設定したいスタイルを記述して上書き保存すれば、
例えば、Markdown で書く tableタブではなくあの独特な "|" 文字と ":-:" で書く表も
table タグに対するCSSで指定できてしまう。

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  th{
    background-color: #cccccc;
  }
}

これで、Markdown 記法で書く表のヘッダ行の背景色は、RGB #cccccc になる。