Atomエディタ、すっかり使いやすくなりましたね。
出始めのころは動作が重く、使い物にならないと感じてたけど、しばらく経って入れなおしてみると、凄まじい進化をして、当時Sublime Textを使っていた僕も乗り換え不可避でした(笑)
そのAtomエディタのならではの標準プラグイン、Markdown Previewの表示のスタイルは、元々GitHub的スタイルなだけあって、そのままでも本当に美しいです。
だけど、これは完全にパソコンスクリーン表示向け、そして半角文字向けの見た目なので、それを印刷やPDF化したり、プロジェクタで映す場合、ちょっと見辛い上、日本語が主体の文書では、違和感を受けます。
そんな中、会議の板書兼、議事録的な書類作成をする機会がありました。
Markdownで書いたメモを議事録としてPDF化するにあたって、標準スタイルではちょっと見づらさ、使いづらさを感じたのでAtomエディタのスタイル設定ファイル「style.less」を調整してみました。
コンセプト
- スクーンとプリント出力で美しさの両立を頑張る。
印刷、プロジェクタ出力するには、罫線が薄すぎるので濃くするなど。 - 日本語文書向けにする。
見出しタグの太字がキツすぎるのでノーマルウェイトにし、文字サイズ、字間、インデントを駆使して本文との差別化。
できた
大分見やすくなりましたね。
HTMLの状態でも中央にコンパクトにまとまっているので実用的です。
つかいかた
1.Atomエディタの「Settings > Themes」を開き、「your stylesheet」をクリックして「style.less」を開きます。
Macの場合は “~/.atom/styles.less"にあるので、そこを直接開いても良いです。
2.下記のSCSS/LESS書式のスタイルを追記します。 Mac環境で整えたので、別環境で違和感があるなら、調整しましょう。
.markdown-preview {
@c_border: #666; // border-color
max-width: 900px;
margin: 0 auto;
padding: 25px;
color: black;
hr {
margin: 50px 0;
background-color: transparent;
&:after{
content: "";
display: block;
border-top-style: ridge;
}
&.pb {
// <hr class="pb">を入れる事で、
// プリント時の改ページを指定することができる。
page-break-after: always;
&:after {
display: none;
}
}
}
h1, h2, h3, h4, h5 {
font-weight: normal;
border-color: @c_border;
}
h1 {
font-size: 35px;
border: none;
margin: 30px auto;
text-align: center;
letter-spacing: 5px
}
h2 {
font-size: 25px;
letter-spacing: 3px;
margin: 50px auto 25px;
}
h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px
}
// 僕の用途ではh4以降は基本的に必要ないので、
// 設定していません。
// 見出し以外のタグを字下げする
// ぱっと思いつく、よく使うタグを指定
p, table, ul, ol, dl, pre, blockquote {
margin-left: 25px;
ul, ol, dl {
margin-left: 0px;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
max-width: 800px;
th {
text-align: center;
background-color: #eee;
border-color: @c_border;
}
tr {
border-top: #666;
}
td {
border-color: @c_border;
}
}
.margin-clear {
margin-left: 0;
}
// テキストの中央揃え
.center {
text-align: center;
&:extend(.margin-clear);
}
// テキストの右寄せ
.right {
text-align: right;
&:extend(.margin-clear);
}
}
HTML、PDF、プリントへの出力
プレビューは上手く動くけど、AtomからMarkdownの見た目を整えた状態でファイル出力の方法が意外に分かりませんでした。
Markdown Previewに用意されているコマンドには「Markdown Preview: Copy Html」は用意されているけど、「Save Html」とか「Export Pdf」のコマンドは見当たりません。
で、見つかった方法がこれ。プレビューを表示させた状態で右クリックメニューから「Save as HTML」。
これでスタイル込みで出力します。
あとはブラウザからプリントするなり、PDF変換するなりでOKですね。
余談・text-spacing早く来い
CSSで日本語を組む事に向かい合うたびに約物半角ができるプロパティ「text-spacing」が欲しくて仕方なくなります。
今回のスタイルを作るついでに、JavaScriptで約物の字詰めを行うスクリプトを加えようとかとも思ったけと、AtomエディタのMarkdown Previewではスクリプトタグを出力してくれないので、見送りました。
他のMarkdownエディタではできるものもあったので、そちら用に……はあまりにもマイナー過ぎるネタになるので、これも見送り。
CSSに関する悩みは近年随分減ってきたけど、まだまだプリントやPDF出力を考えると欲しい機能は多いですね(笑)
さらにおまけ
サンプル用に思いつきで書き始めたけど、調べているうちに、意外と楽しい情景が思い浮かんできて、思わぬ力作に。もったいないので、Markdown版をついでに載っけておきます。
猿蟹合戦 / 芥川龍之介をはじめて知ったけど、いい具合に馬鹿馬鹿しくて面白いです。
芥川版の世界では、牛糞は存在せず、カニは怪我しただけで住んだパターンのようですね。
下記はさるかに合戦 - Wikipedia版を元にしてます。
<br>
# 打倒サル作戦会議・議事録
<p class="center">参加者: カニJr. (進行役)、クリ (書記)、うす、 ハチ、牛ふん
1234年5月6日 7:00〜8:00</p>
## 目的
卑怯な行為でカニ母の命を奪ったサルを討つ方法を決定。
作戦における担当案を作る。
## 第一次作戦案
各自の特色を活かした役割分担を行う。
順番 | 担当 | 特色 | 隠れ場所 | 攻撃方法 | 交代候補 | 懸念材料
--- | --- | --- | --- | --- | --- | ---
0 |カニJr. | はさみ | 家の外 | おびき出し | | 狡猾なサルをおびきだせるか
1 | クリ | はじける | 囲炉裏 | タックル | 卵 | はじけた後の安否
2 | ハチ | 針 | 牛糞 | ヒップアタック | 包丁 | むしろハチだけで十分では
3 | 牛ふん | すべる | 臼 | スライディング | 昆布 | 登場しない世界線も多い
4 | うす | 重い | 水桶 | ボディプレス | | オーバーキル
### その他、実行犯候補メンバー
箸・蛇・きね・布・タコ・ゴボウ
## 次回課題
- 上記作戦案にある、各自の懸念材料の検証
- 私刑行為による逮捕。<br>*=>参考: [猿蟹合戦 / 芥川龍之介](//www.aozora.gr.jp/cards/000879/files/140_15196.html)*
- 諸事情を鑑み、実行犯の交代も検討する。<br>状況に併せて柔軟に出動要請を掛けられる連絡網の準備。
## 次回会議日程
1234年5月13日 7:00〜8:00