AtomのマークダウンプレビューのCSSを複数個使うには？
Atomってデフォルトでマークダウンプレビューに対応してるから便利だけど、スタイルがちょっと味気ないですよね－。
そうやねん！
アレ自分でCSSいじりたい。
もっと言うと、プレビューをそのままpdfに出力したりするから、ドキュメントのフォーマットとしてCSSをいっぱい使いたいわ
残念ながら、Atomでは複数のCSS使用には対応して無いようなんですけど、ある方法を使えばめっちゃ簡単に複数のスタイルを適用することが出来ます。
次の見出しではその方法について説明しますが、もし
いや複数とか要らんからデフォルトのスタイルだけいじりたいんだが^^;
っていう方は次の次の見出しをご覧ください。
そもそもAtomってなんやねんって方はこちらをどうぞ。
www.mamma-of-inu.xyz
複数のスタイルを使う
方法は単純で、
<style>を使用したファイルを複数保存する
だけです。
マークダウンプレビューにおいてもhtmlタグは反映されるので、この仕様を利用します。
<style>を使う
編集しているタブの下部に<style>を使ってスタイルを記述します。
たとえばこんな風に書きます。
<style>
h1 {
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
</style>
するとプレビューはこんな感じ。
そのファイルを複数作る
上の方法を使って、いい感じにスタイルが完成したら、そのファイルを
"謝罪文","けっこうヤバいときの謝罪文"とか名前を付けて保存します。
"社員生命が危ぶまれるときの謝罪文"もあるといいですね。
以上の手順を欲しいフォーマットの数だけ繰り返します。
ね、簡単でしょう？
そんだけ？
そんだけですが？
デフォルトのスタイルのみを調整する
- 複数のスタイルは別に要らない
- 「とりあえずマークダウンで書こ」っていうときのスタイルを作りたい
って人はデフォルトのスタイルをいじりましょう。
1. メニューバー/File/Stylesheet...を開きます。
2. styles.lessが開きますので、その中にマークダウンプレビューのセレクタを記述します。
3. その中にスタイルを記述します。
こんな感じ。
.markdown-preview {
p {
color: red;
}
}
そんだけ？
そんだけですが？
まとめ
僕は最近になってマークダウンを使い始めたんですが、
この記事の方法でドキュメント作成においてWordから脱却しつつあります。
それぐらいAtom+markdownは使い勝手いいので、アナタもAtomでどんどん謝罪文を作成して行きましょう！
