Atomで縦書きプレビューを試行錯誤してぶん投げた話 #ATOM

Atom エディタで縦書きプレビューって見た記憶があるよね。
じゃぁ、縦書き小説エディタになるんじゃない？
ちょっと試してみよう。現実逃避したいし。
そんな軽い気持ちでカスタマイズを始めた。

結論を言えば。
まぁまぁ、使える。
それなりにいい感じ。

準備

Atomのインストール

既にAtomエディタをMarkdownエディタとして使っているのでオレ持ってる。
インストールはググって何とか頑張ってください。
私は普段、Emacs使っているので。。。

ここからダウンロードすればいいよ Atom

近々で必要になるショートカット

Command-Shft-p : コマンドパレットを開く
Command-, : 設定を開く
Control-Shift-m : 今開いているファイルのプレビューを開く／閉じる

パッケージ追加

パッケージを利用して縦書きエディタ化する。
設定を開いてパッケージを入れましょう。
Command-, > インストールでパッケージ名を入力する。

必要となるパッケージ。

japanese-menu（特に必要ではない）
- メニューを日本語化する
markdown-preview-enhanced
- Markdownプレビュー用
language-gfm-enhanced
- MarkdownプレビューをGitHubっぽくしてくれるもの？（よくわかってない）
revert-buffer
- ファイルに更新があれば自動で反映してくれる

パッケージ入れ替え

標準で入っているプレビューを無効化しましょう。
インストールしたパッケージと入れ替えになります。
Command-, > パッケージでパッケージ名を選んで[無効]にする。

無効にするパッケージ

language-gfm
markdown-preview

設定

プロジェクトを作る（開く）

簡単に言えばプレビューのスタイルを定義して適応するのですが、プロジェクトフォルダを指定しないと、どこに設定ファイルを置けば良いのかわからない事になります。
プロジェクトフォルダが指定できていれば、そこがルートフォルダになるので便利だと思います。
私の場合、~/text/になります。

メニューから
ファイル > プロジェクトフォルダを追加で、テキスト用のフォルダを指定する

ファイルを保存する

何も書いてないファイルが最初から開いているはずです。ウェルカム画面を閉じれば見つかります。
名前をつけて保存で、拡張子を.mdにして保存します。
この拡張子もプレビュー可能かどうかを判定しているので、markdown用の拡張子を指定してください。

メニューからファイル > 保存
または、 Command-s

ファイルの名前は名称未設定.md で良いです。

markdown-preview-enhanced の設定画面で、拡張子の編集項目があります。
ここで適当な拡張子、例えば.novelなどと追加すれば、その拡張子もプレビュー対象のファイルとなりプレビューを開くことが可能になります。

プレビューを開く

Control-shift-m
または
Command-shift-p でコマンドパレットを開いて "markdown preview toggle" と入力し開く。

ちょっとだけ内容を入れてみましょう。
プレビューが連動して反映するはず。

名称未設定.md

## 準備
### Atomのインストール

[Atom](https://atom.io/)

### パッケージ追加

  1. japanese-menu（特に必要ではない）
    * メニューを日本語化する
  2. markdown-preview-enhanced
    * Markdownプレビュー用
  3. language-gfm-enhanced
    * MarkdownプレビューをGitHubっぽくしてくれるもの？（よくわかってない）
  4. revert-buffer
    * ファイルに更新があれば自動で反映してくれる

### パッケージ無効化

  1. language-gfm
  2. markdown-preview

スタイルを作成する

プレビュー用のcssファイルです。
スタイルファイルを作成します。
本来であれば、markdown-preview-enhanced用のスタイルファイルもあるのですが、それを変更すると全てのマークダウンに影響が出てしまうので、限定的に使用しています。

メニューファイル > 新規ファイル -- 新しいファイルが開きます
または
Command-n

このスタイルファイルをコピペして保存します。
保存するファイル名は novel-style.less としてプロジェクトフォルダ直下に保存してください。
私の場合は、 ~/text/novel-style.less となります。

novel-style.less

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

.markdown-preview.markdown-preview {
  -webkit-writing-mode: vertical-rl;
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
  // font-family: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic M", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 24px;
  background-color: #f5f5f5;
  color: #333333;
  h1, h2, h3, h4, h5, h6, pre, code {
    font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
    font-weight: 800;
  }
  h1 {
    counter-reset: h2counter;
    font-size: 35px;
    margin: 0 100px 0 15px;
    letter-spacing: 3px;
    padding: 10px 10px 10px 10px;
    color: #5989cf;
    background: #c6e4ff;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
  }
  h2 {
    counter-increment: h2counter;
    counter-reset: h3counter;
    padding: 10px 10px;
    margin: 25px 10px 0 10px;
    color: #bf5656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
  }
  h3 {
    counter-increment: h3counter;
    counter-reset: h4counter;
    padding: 10px 10px;
    margin: 25px 10px 0 10px;
    color: #ff8686;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
  }
  h4 {
    counter-increment: h4counter;
    padding: 10px 10px;
    margin: 25px 10px 0 10px;
    color: #ff8686;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
  }
  h2:before {
    content: counter(h2counter) ". ";
  }
  h3:before {
    content: counter(h2counter) ". " counter(h3counter) ". ";
  }
  h4:before {
    content: counter(h2counter) ". " counter(h3counter) ". " counter(h4counter)
      ". ";
  }

}

※ 余談 ※
ここからさらにカスタマイズする場合は、プレビュー画面を右クリックしてブラウザで表示して、ブラウザのデベロッパーツールで要素名を探したりすれば良いかと思います。

スタイルを適応する

名称未設定.md ファイルの先頭に @import "/novel-style.less" と追加する。
2行目に # だけが入っているのは、ちゃんと動かないからです。
これで縦書き表示でプレビューされたでしょうか？
私の環境ではうまく行ってます。

名称未設定.md

@import "/novel-style.less"
#
## 準備
### Atomのインストール

[Atom](https://atom.io/)
・・・省略・・・

プレビューはプレビューだけで開きたい

ここから先は応用なので、必要なければ不要です。

デュアルモニターを使っていると、別画面で確認しながら文章を入力しますよね。
やろうじゃないですか。
ここで、最後にAtomに入れたパッケージのrevert-bufferが生きてきます。

メニューファイル > 新規ウィンドウ

新ウィンドウで
ファイル > プロジェクトフォルダを追加で、別ウィンドウで開いているテキスト用フォルダを開く

更新対象のファイル、現在は名称未設定.mdを開く。
Contorl-shift-m でプレビューを開く。
ディアルペインでプレビューが開いているので、プレビューのタブをマウスでドラッグしてシングルペインにする。

これで、もう片方のプレビューとは別のウィンドウで更新したファイルが、保存するたびにプレビューに反映される事になります。

最後に

環境を作るだけ作ったけど、動作がいまいちだったりします。
自分用なので、これでいいかと、後の事は空の彼方へぶん投げる事にしました。