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" と入力し開く。
ちょっとだけ内容を入れてみましょう。
プレビューが連動して反映するはず。
## 準備
### 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 となります。
/* 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行目に # だけが入っているのは、ちゃんと動かないからです。
これで縦書き表示でプレビューされたでしょうか?
私の環境ではうまく行ってます。
@import "/novel-style.less"
#
## 準備
### Atomのインストール
[Atom](https://atom.io/)
・・・省略・・・
プレビューはプレビューだけで開きたい
ここから先は応用なので、必要なければ不要です。
デュアルモニターを使っていると、別画面で確認しながら文章を入力しますよね。
やろうじゃないですか。
ここで、最後にAtomに入れたパッケージのrevert-bufferが生きてきます。
メニュー ファイル > 新規ウィンドウ
新ウィンドウで
ファイル > プロジェクトフォルダを追加 で、別ウィンドウで開いているテキスト用フォルダを開く
更新対象のファイル、現在は名称未設定.mdを開く。
Contorl-shift-m でプレビューを開く。
ディアルペインでプレビューが開いているので、プレビューのタブをマウスでドラッグしてシングルペインにする。
これで、もう片方のプレビューとは別のウィンドウで更新したファイルが、保存するたびにプレビューに反映される事になります。
最後に
環境を作るだけ作ったけど、動作がいまいちだったりします。
自分用なので、これでいいかと、後の事は空の彼方へぶん投げる事にしました。