エディタ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ファイルがお手軽に作れます。

稼げるプログラミングスキルを手に入れるために

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。