markdownをHTMLに変換する方法を現役デザイナーが解説【初心者向け】

初心者向けにmarkdownをHTMLに変換する方法について解説しています。最初にドキュメントの作成に利用されるマークダウン記法の仕組み、利用例を説明します。次にPandocを使ったmarkdownからHTMLへの変換方法を覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

markdownをHTMLに変換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

markdownをHTMLに変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

markdownとは

markdownとは、文書を記載するための軽量のマークアップ言語です。サイトの文書作成の言語として多くのサービスで使用されている形式となっており、一度記法を覚えれば、文書作成がはかどります(具体的な事例はこの後の項目で紹介します)。

元々は手軽にテキスト形式で書いた文書をWebサイトに掲載するためにHTMLに変換するために生まれた言語ですが、現在ではHTMLの他にもプレゼンスライドや論文作成などで使用されるtexに変換するソフトなども開発されており、初心者の方でもmarkdownで文書を書くことで簡単に目的の文書形式で作成ができます。

 

HTMLとの違い

ここではHTMLとの違い、特にメリット・デメリットについて解説していきます。

メリット

HTMLとの大きな違いとしては、学習コストが低いことです。HTMLの場合、画像を挿入したり、強調したい箇所を太字にするといった文書を作成すると、タグで囲む操作が行われます。HTMLのタグは文字や数字で構成されており、非常に覚えにくいです。

しかし、markdownはそのようなタグが記号で構成されているため、とてもシンプルで見やすくなっています。特に文書内にソースコードを載せる際には各言語に合わせて自動で色分けされるため、技術ブログを書く際にはとても便利です。

デメリット

その一方でデメリットとしては、JavaScriptとの連携がないため、JavaScriptを使いたい場合はHTMLで記述する必要があります。また、見出しやソースコードのタグを使用したいときには、1行の空白を入れないと有効にならないことがあります。

また、同様に改行を入れたいときにも1行開けないと改行が有効になりません。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

markdownの活用場面

それでは、実際にmarkdownの活用場面をいくつか紹介します。今回は皆さんがよく使うサービスを具体例としていくつか挙げます。

Qiita

みなさんがプログラムについてわからないことがあった時に検索したら必ず目にする技術情報共有サイトです。Qiitaで記事を書く際にもmarkdownを採用されており、Qiitaに投稿されている記事の多くはmarkdownのタグを活用した記事が見受けられます。

Qiita

 

Github

エンジニアにはおなじみのソースコードを共有するサービスです。Githubで公開されているレポジトリのトップに必ずと言っていいほど載せられているREADMEにmarkdownが使用されています。

また、この他にもレポジトリ内でディスカッションを行う時につかわれるissueにもmarkdownが使われており、Githubを使いこなすときにはmarkdownも合わせて覚えるといいでしょう。

Github

 

connpass

IT勉強会やイベントの申込みをする際によく使われているサイトです。イベントページの詳細を書きやすくするためにmarkdownを採用されています。カスタム次第で参加者の目を惹きつけるページを作ることができます。

connpass

 

markdownをHTMLに変換してみよう

それでは、最後にmarkdownをHTMLに変換する方法を紹介します。今回は様々な形式の文書を別の形式に変換できるPandoc というソフトを使用します。まずは、下記のリンクから、インストールページに行き、お使いのOSに合わせてインストーラーをダウンロードしましょう。

https://pandoc.org/installing.html

ダウンロードが終わったら、インストーラーを起動します、終わったらNextをクリックしてインストールを完了させます。

ターミナル(Windowsの方はコマンドプロンプトかPower Shell)を立ち上げて以下のコマンドを実行し、Pandocをインストールできているか確認します。

pandoc --version

インストールができていれば以下のようにバージョンの情報が出力されます。

次に任意のディレクトリにマークダウンのドキュメントを保存するフォルダを作成しましょう。作成するフォルダ名は何でもOKです。

mkdir md2html

お使いのテキストエディタで以下のmarkdownを保存します。ここではファイル名を「sample.md」とします。

# Hello World

これはサンプルです。

## これはh2タグになります

最後に以下の1行を実行しHTMLに変換します。変換するHTMLは「index.html」とします。

pandoc -f markdown -t html sample.md > index.html
実行するとindex.htmlが作成されます。そして、HTMLにそれぞれIDも付与されています。
<h1 id="hello-world">Hello World</h1>

<p>これはサンプルです。</p>

<h2 id="これはh2タグになります">これはh2タグになります</h2>
 この他にもJava Scriptを組み込んでオンラインで動く自作のmarkdownエディタを作成する方法もあるので、ぜひ試してみるといいでしょう。

Markdownを「Marked.js」を使ってHTMLに変換する方法

 

監修してくれたメンター

メンター三浦さん

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。