シェアする

  • このエントリーをはてなブックマークに追加

[Atom][Markdown]AtomをMarkdownエディタとして利用する

「AtomをMarkdownエディタとして使う」というすでに書き尽くされたネタではありますが、導入方法と社内での使い方についてメモ的に残したいと思います。

Atomの導入

まずは導入方法から。
Atomから本体をDLしてインストール。

Homebrewとhomebrew-caskが入っていればターミナルからもインストールできます。

brew cask install atom

Atomのパッケージをインストール

Atomをインストールするとapmコマンドが使えるようになるので、ターミナルに抵抗が無ければそのほうが早いです。

apm install [パッケージ名]

[パッケージ名]は以下のリンクテキストを入れてください。

japanese-menu

何はともあれ日本語化。メニューバーを日本語化してくれます。

markdown-writer

Markdownエディタで一般的なリストやテーブルの改行時の入力支援や、設定するとJekyllOctopresshexoなどのGitHub Pagesに対応したブログへの投稿もできるようです。

tool-bar

何かと便利なツールバー。後述のtool-bar-markdown-writerを利用するのにも必要になります。

tool-bar-markdown-writer

Markdown記法はまだちょっと・・・というあなたのために。でも記法を覚えたほうが断然速く書けます。

document-outline

Markdownの見出しをアウトライン表示してくれます。

markdown-mindmap

アウトラインではなくマインドマップっぽく表示してくれます。

markdown-scroll-sync

Markdownのエディタ側をスクロールすると、プレビュー側もスクロール同期してくれます。

※20180104現在 私の環境では上手く動きませんでした。以下、調査と試した対応策です。

ATOM 1.23.2
markdown-scroll-sync 2.1.2

HTMLElement.shadowRoot is deprecated. ? Issue #94 ? vincentcn/markdown-scroll-sync ? GitHub

だとHTMLElement.shadowRootの非推奨エラーが出るため、~/.atom/packages/markdown-scroll-sync/lib/utils.coffeeの以下を修正すると改善されるとあるが改善されなかった。

lineEles = @editorView.shadowRoot.querySelectorAll '.lines .line[data-screen-row]'

lineEles = @editorView.getRootNode().querySelectorAll '.lines .line[data-screen-row]'

上記とは少し違う記述の

https://github.com/vincentcn/markdown-scroll-sync/pull/65/commits/c41206e184916c8ac66fd9d46138bdc578648e41
こちらのソースに書き換えてもダメ。
その後~/.atom/packages/markdown-scroll-sync

npm install
apm rebuild

しても変わらず。

Uninstallしてからapm install markdown-scroll-syncしてもダメ。

引き続き調べて動いたら報告します。

markdown-table-editor

面倒なMarkdownでのテーブル作りがとても楽になります。

atom-csv-markdown

カンマ区切りCSVをMarkdownのテーブルにしてくれます。

wordcount

文章量が確認できます。表示は邪魔にならないのでSettingsでAlways onに。

wakatime

Atomでの作業時間をWakaTime で計測してくれます。

redpen

文章校正をしてくれます。
RedPen自体の説明はこちらが参考になります

パッケージを利用するにはRedpen本体が必要です。

導入方法はCask で Atom をインストールし RedPen パッケージで校閲してみる – Qiitaを参考にさせて頂きました。

markdown-preview-plus

Markdownで計算式を表示してくれます。

おまけ

markdown-mindmap

これまで文章の構成はMindNodeを使っていたので、慣れ親しんだマインドマップのプレビューを入れてみましたがアウトラインで十分でした。

エディタの使い分け

Markdownは慣れてしまうとプレーンなテキストを書くのとほぼ変わらずに文字装飾ができるので、慣れてしまうとどんな文章もMarkdownで書きたくなってしまいますよね。

Atomは長めの文書を作成するために導入しました。

アスタでも用途に応じて、コードスニペットやTipsはGitboxBoostnote、ブログはWordpress+JP Markdown。プロジェクト管理はバックログのMarkdown記法といった感じで使っていました。

ですが、Wordpressやバックログはそもそもの目的であるブログを書くことやプロジェクトタスクを管理するという目的には適したUIですが、WEBのUIのためローカルアプリと比べて動作が遅くなってしまいます。

一方Boostnoteはローカルアプリケーションのため動作は軽快でクリップボードも扱えます。
こちらも目的であるコードスニペットを管理するには最適ですが、シンプルな作りのため装飾やアウトライン表示などの拡張ができません。

Atomはちょうどその中間。

必要な機能をパッケージで拡張しつつ、ローカルアプリならではの軽快な動作で長い文章も快適に書くことができます。そのうえパッケージはJavascriptで書けるようなのでAPIを覚えてしまえば何でもできそうなのも魅力です。

新しいIDEは手に馴染むまで長い時間と苦労が必要なので、IntelliJ IDEA(PhpStorm)に出会ってからは新しいIDEとかエディタの類を遠ざけていました。それはAtomも同様で使えるパッケージを探したり、動かなければ調べて対応してみたりと苦労はあるのですが、新しい発見もたくさんあってやってみてよかったと思います。

生活にも仕事にも少し余裕が出てきたので、今年は自分のための改善に力を入れて自分自身をバージョンアップしていきたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする