Address
304 North Cardinal St.
Dorchester Center, MA 02124

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM

Atomエディタとマークダウン(Markdown)記法による数式・UMLの作成の画像

エディタAtomでMarkdownを使いLatex数式やUMLダイアグラムを書く方法

Atom上でマークダウン(Markdown)を使い、数式やUML図を書く方法

今回は私も毎日愛用しているエディタ、Atomのネタです。ずばり、Latexによる数式やUMLダイアグラム図を含んだMarkdown(マークダウン)ファイルを作ろうというネタです。

作業としては簡単で以下で説明するように、Atomのパッケージを1つ導入するだけです。それだけで、Markdownファイルに含まれるLatexによる数式やUMLダイアグラムをAtom上でプレビューできるようになります。

完成イメージ

今回説明する作業が完了すると、こういう風なファイルを作ることができるようになります。これはAtom上の画面です。

Atomエディタとマークダウン(Markdown)記法による数式・UMLの作成の画像
Atomエディタとマークダウン(Markdown)記法による数式・UMLの作成の画像

方法・作業

手順1:パッケージ「markdown-preview-enhanced」をインストール

はい、ずばりmarkdown-preview-enhancedというパッケージをインストールするだけです。

Atomとマークダウンによる数式・UMLの作り方の画像その1

まずはメニューのファイル(File)項目→設定(Settings)項目へ。

Atomとマークダウンによる数式・UMLの作り方の画像その2

インストール(Install)項目をクリックして、パッケージ検索部分でmarkdown-preview-enhancedと入力して検索します。その後、出てきたものをインストールしてください。

インストール後は特になんの設定も必要ありませんが、次の手順2だけはしておくことをおすすめします。

手順2:もともとあるパッケージ「markdown-preview」の無効化を設定する

今回インストールしたものはmarkdown-preview-enhancedですが、もともとAtomは標準でMarkdownファイルのプレビュー機能が備わっていて、それを実現するためのパッケージ「markdown-preview」というものが入っています。

Atom上でshift+ctrl+MというキーボードショートカットでMarkdownファイルのプレビューが行えるというものですが、markdown-preview-enhancedも同じショートカットでプレビューが出来るため、ショートカットが重複してしまいあまりよろしくないからです。

Atomとマークダウンによる数式・UMLの作り方の画像その3

ファイルメニューのパッケージ(Packages)項目をクリックして、インストール済みのパッケージを表示してから、上画像に従いmarkdown-previewを無効化してください。

なおすでにご存じかもしれませんが、何年か前からGoogle DriveやGmailなどグーグルの標準サービスとしてすでにMarkdownエディタのStackEditというクラウドサービス型のブラウザ上でエディターがグーグルから展開されています。

それを使えばAtomやVS Codeを使わなくても、そして特別な作業や設定などは一切不要でブラウザ上で、数式やUMLダイアグラムを使ったMarkdownファイルがお手軽に作れます。

愛を分かち合いましょう