1
0

More than 5 years have passed since last update.

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

Posted at

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

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

準備

Atomのインストール

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

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

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

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

パッケージ追加

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

必要となるパッケージ。

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

パッケージ入れ替え

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

無効にするパッケージ

  1. language-gfm
  2. 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 でプレビューを開く。
ディアルペインでプレビューが開いているので、プレビューのタブをマウスでドラッグしてシングルペインにする。

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

最後に

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0