https://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

ATOMエディタでMarkdown!HTMLやPDFの出力方法も解説

川口大河
書いた人 川口大河


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

どうも!ライターの川口です!

ATOMエディタでMarkdownを編集していますか?

今回は、ATOMエディタでMarkdownするときの独自の機能とおすすめのプラグインをご紹介します。

この記事を読めば、ATOMでのMarkdownの編集がさらにはかどること間違いなしですよ!

ATOMとは?

ATOMは、GitHubが開発を進めているテキストエディタです。

ATOMを開発するプロジェクトは、2008年に、GitHubの創業者であるクリス・ワンストラス氏によって開始されました。

バージョン1.0がリリースされたのは、開始から約7年経った2015年6月26日でした。

ATOMは開発者向けにMarkdownやさまざまなプログラミング言語のコーディングを効率化するための機能を兼ね備えており、さらに自分好みに自由にカスタマイズすることもできることもあり、ユーザー数が爆発的に増えました。

ATOMのインストール方法については、以下の記事で説明していますので、ぜひご覧ください。

Markdownとは?

Markdownは、文章の表記方法(ルール)の1つです。

Markdownが使われる理由を少し説明しておきましょう。

文章を書くときに、書いてあることを分かりやすく伝える方法の1つとして、説明文に見出しを付けることがあります。

Wordなどのアプリを使っているなら、見出しの部分の文字の大きさや太さを変えて、目立つようにするでしょう。

しかし、テキストエディタでは、Wordなどとは異なり、文字の大きさを変更できません。

そこで、インターネットが一般的になるもっと前、テキストエディタで文書を書くときは、「■■■■■■■」「==========」のような区切り文字を使って、その行が見出しであると理解できるようにしていました。

Markdownは、この区切り文字を整理して、ルールとして整備したものです。

「Markdown記法」などと呼ばれることもあります。

Markdown記法のサンプルをいくつか見ると分かりやすいので、聞いたことがないという方は、まずは以下のページをご覧ください。

参考:http://qiita.com/tbpgr/items/989c6badefff69377da7

ATOMでMarkdownを編集してみよう

では、ATOMを使ってMarkdownを編集してみましょう。

と大げさに言いましたが、Markdownは普通のテキストですから、ファイルを新規作成して、文章を書けば大丈夫です。

このままでは、タイトル詐欺みたいになってしまうので、今回はMarkdownを編集するときに、ATOMを使っていればこんなに便利!ということをいくつか紹介します。

プレビュー画面を見ながら書ける

12468_2

上の画像をよく見てください。左右に分割されていることに気がつきましたか?

画像の左半分がMarkdownを編集するエリア、画像の右半分がMarkdownを装飾して表示したエリアです。

このMarkdownを装飾して表示したエリアを「プレビュー画面」と呼びます。

プレビュー画面を表示するには、以下のいずれかの操作を行います。

  • CtrlキーとAltキーを押しながらMキーを押します。
  • 「パッケージ」をクリックし、「Markdown Preview」をクリックして、「Toggle Preview」をクリックします。

前者の操作で表示されない場合は、ほかのパッケージが反応していますので、後者の操作で表示してください。私のところでは、emmetが反応していました。

さて、プレビュー画面が表示できたら、左半分で文字を編集してみてください。

すぐに右側のプレビュー画面に反映されましたか?

左半分で編集すると、すぐにプレビュー画面に反映されるので、Markdownをプレビュー画面を見ながら書けると書いたわけです。

Markdownに慣れるまでは、記号の使い方が正しいかどうか不安になるのですが、プレビューに正しく反映されれば、正しく書いてあると判断できますので、Markdownを素早く習得するためには非常に便利な機能です。

ちょっと違う文書を編集している画面も載せておきましょう。

atom-md01

こんな感じで、テキストエディタで装飾は不可能なはずなのに、Wordみたいに表示されるプレビュー画面を見ながら編集できるというのは、気持ちの良いものです。

ぜひ試してみてください。

目次を生成してみよう

Markdownでは、「#」「##」を使うことで、その行を見出しと見なしています。

そこで、昔の賢い人は、見出しを抽出して目次を自動生成できるのではないか?と考えました。

ATOMでは、markdown-tocパッケージを使って目次を自動生成できます。


URL:https://atom.io/packages/markdown-toc

パッケージのインストール方法については、以下の記事で説明していますので、ここでは省略します。

では、markdown-tocを使って目次を自動生成してみましょう。

(1)目次を挿入する場所にカーソルを移動します。

(2)「パッケージ」をクリックし、「markdown-toc」をクリックして、「Toggle」をクリックします。

atom-md02

カーソル位置に目次が挿入されます。

(どういうわけか)目次が挿入されなかったときは、ATOMを再起動してから、操作をやり直してください。

この目次は、一回入れてしまえば、ファイルを保存するたびに自動的に更新されますので、目次は気にせずに文章の作成に集中できるという仕組みです。

残念ながら、ひらがなや漢字などが含まれていると、リンクは正しく設定されないようです。

Markdownの編集にショートカットキーを使えるようにしてみよう

markdown-writerパッケージをインストールすると、スムーズにMarkdownを編集できます。


URL:https://atom.io/packages/markdown-writer

パッケージのインストール方法については、以下の記事で説明していますので、ここでは省略します。

markdown-writerパッケージをインストールしたら、いくつか代表的な操作を確認しておきましょう。

(1)新しいファイルを作成し、「- item1」と入力して、Enterキーを押します。

改行されるところまでは通常どおりですが、新しい行に「- 」が自動的に入力されます。

atom-md01

箇条書きを連続して書くときに、少し手間が省けますね。

(2)1行目に「Header1」と入力して、Ctrlキーを押しながら1キーを押します。

行頭に「# 」が入力され、「見出し1」になります。

atom-md02

1キーの代わりに2キーを押すと「## 」が入力され「見出し2」に、3キーを押すと「### 」が入力され「見出し3」になります。

(3)「item1」を選択して、Ctrlキーを押しながらBキーを押します。

選択した「item1」の前後に「**」が入力され、太字になります。

atom-md03

Bキーの代わりにI(アイ)キーを押すと前後に「_」が入力され、斜体になります。

(4)「item2」を選択して、「Packages」「Markdown Writer」「Markup」「Insert Link」の順にクリックします。

atom-md04

(5)「Web Address」「Title」を入力し、Enterキーを押します。

atom-md05

「item2」にリンクが設定されます。

atom-md06

以上のように、ショートカットキーを押したり、メニューから選択したりして、よく使うMarkdown記法を入力できます。

Markdownの独自の記号を覚えるまでは、ハードルが高く感じると思いますが、ショートカットキーやメニューであれば、スムーズに作業を進められますね。

ATOMで書いたMarkdownからHTMLやPDFを作成しよう

Markdown記法に従って書くと、装飾できることは上で説明したとおりです。

ここからは、装飾した状態の文書をHTMLファイルPDFファイルに変換する操作を紹介します。

HTMLファイルを作成しよう

プレビュー画面に表示しているとおりのHTMLファイルを作成します。

(1)プレビュー画面を右クリックして、「HTMLを保存」をクリックします。

atom-md03

(2)ファイル名を指定して、「保存」をクリックします。

HTMLファイルが作成されます。

試しにHTMLファイルを表示してみてください。

プレビュー画面のとおりに表示されましたか?(背景色が違うぞ!という野暮なことは言いっこなしです。)

PDFを作成しよう

今度は、PDFファイルを作成してみましょう。

ATOMでは印刷機能がないので、Acrobatを持っていたとしても、PDFファイルを作成できません。

HTMLファイルを作成できることは上で説明したとおりですので、作成したHTMLファイルを印刷することで、PDFを作成することもできます。

HTMLファイルを印刷する方が、見た目は一致するでしょう。

そうではなく、一手間でも減らして、もっともっと簡単にPDFを作成したいあなたが使うべきパッケージは「markdown-pdf」です。

パッケージのインストール方法については、以下の記事で説明していますので、やはりここでは省略します。

(1)Markdown記法で書いたテキストファイルをATOMで表示し、タブを選択します。

ATOMのタイトルバーに「(ファイル名)」と表示されているときは、テキストファイルのタブが選択されています。

一方、ATOMのタイトルバーに、「(ファイル名) Preview」と表示されているときは、プレビュー画面が選択されています。

プレビュー画面を選択しているときは、markdown-pdfは動作しません。

(2)「パッケージ」をクリックし、「Markdown to PDF」をクリックして、「Convert」をクリックします。

PDFファイルが作成されます。

こちらも試しにPDFファイルを表示して、概ねプレビュー画面のとおりに表示されることを確認してみてくださいね。

まとめ

プレビュー画面の表示方法に加えて、ショートカットキーやメニューからMarkdown記法(独自の記号)を入力する方法を紹介しました。

さらに、目次の作成方法や、HTMLファイルとPDFファイルの作成方法も紹介しました。

ATOMでMarkdown記法に従ったテキストファイルを作成するときは、ここで説明した機能をうまく使って、効率良く作業を進めてくださいね。

それでは。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

川口大河

川口大河

東京都出身、24歳。1年の浪人を経て明治大学入学も4年次に2留が確定し、今年4月に大学中退。それから半年ほどブラブラと放浪していたが、あることをきっかけにプログラミングと出会い、人生が一転。今では侍エンジニア塾ブログを通じてライター兼エンジニアとして働いている。