マークダウンでHTMLファイルを生成

HTMLファイル(やLaTeX)を作成するためにはコンテンツの文字列以外に、タグをつかってマーク付け(markup)する必要がある。HTMLファイルをテキストエディタで逐一入力するのは楽な作業ではない。

Markdownについて

JP_markdown_user

Markdownとは、本来Markup記法で書かれる書式付きテキストの代わりに、簡便な約束事に従って書くためのテキスト記法の1つでである。 HTMLなどマークアップされたファイルを書き出すための比較的簡単なテキスト書式(拡張子 .md)を定義し、専用ツールをつかって書き出すことをマークダウンという。

左ロゴの日本語Markdownユーザー会でも普及が進められている。 詳しい解説がMarkdownの概要にあるので是非参考にして欲しい。


マークダウンの書式

HTMLのタグの使い方をある程度知った上でなら(何も知らないのは現時点では問題が多い)、マークダウン記法で記述したテキストをHTMLに変換して書き出すツールを使うと作業を大幅に短縮できる。

利用のコツ

まず、使っているツールの性質を理解し、全面的に依存しないことが必要だ(それなら、最初からHTMLオーサリングソフトウエアを使えばよい)。

ツールごとに書き出されるHTMLファイルは大きく異なっている。 マークダウンツールは必ずしも美しいHTMLソースを書き出すわけではない。 また、HTMLヘッダ <head> ... </head> 部に長々なとスタイルが定義されたり、<head>要素自体が省略されることある。

得られたHTMLファイルをテキストエディタで開いて、自分の目的に合わせて追加修正して調整するという使い方を強く薦める。

幾つかのツールでは、MathJaxが統合されていてLaTeXを知っていれば数式 $\displaystyle\int_0^\infty \frac{\sin x}{x} dx=\frac{\pi}{2}$ なんかも直接書きながら確かめることができる。 ただし、HTMLとして書き出したソースはMathJax不要とするために大変長大で汚いので、HTMLファイル内で直接MathJaxを使う方がよい(Webの数式表現 MathJax)。

マークダウン専用エディタ

マークダウン専用のエディタがOSごとに各種提供されている。 ここでは無料で利用できる代表的なソフトウエアを紹介しておく。

MacOS

MacDown logo

MacDown

MacOS専用のマークダウンエディタで、有名なMouの開発が止まったのを受けてユーザ自らが開発を始めたオープンソースソフトウエアだ。 ZIP圧縮を展開するだけで利用できるのでデスクトップにダウンロードして実習室で使うことができるので便利。


kobito

kobito

マークダウン以外にもメモやスニペットの記録使える国産ソフトウエアで、Apple AppStoreからkobitoダウンロードする。 登録して無料で利用できる。

ただし、local disik(自分のパソコン)内の画像を貼り込む場合、そのファイルは自動的にhttps://qiita-image-storeにアップロードされ(決して怪しいサーバではない)、それをURLとして貼り込むようになっている。HTMLファイルに書き出してそれをuploadしてWebページとする場合に、画像ファイルはuploadしなくても済むというサービスだが、画像もuploadするという利用の場合にはソース管理上すっきりしない。気になる場合には、HTMLファイルを書き換える必要がある。


Windows

MarkDown#Editor

MarkDown#Editor

Windows専用のオープンソースの軽量な高機能な国産マークダウンエディタだ。 拡張仕様のMarkdown Extraにも対応し、CSSファイルとあわせてデザインの変更や確認をしながらの編集が行える(演習室のWindowsにはインストールできない)。

MarkDown#Editorの使い方についてもMarkDown#Editorに詳しく解説があるので困らないはずだ。


ブラウザの拡張機能 (Mac/Windows)

汎用に使えるもブラウザ拡張(ブラウザアプリケーション)を紹介しておこう。 実習室で利用するパソコンもOSに依存することなく利用できるので、習熟する価値は十分にある。

StackEdit

StackEdit - Chrome ウェブストア [Ony for Chrome]

拡張マークダウンもサポートしており、自分のパソコン(local disk)からファイルを読み込んだり、local disk内(Chrome設定で[ダウンロード]する場所)に書き出したりできる。

新規に始めるには、右端のフォルダマークを押して現れる[New document](下左図の上)を選択して、まず名称を入力する(下右図)。


[Manage documents](上左図の下)のファイルの管理はクラウド内を対象としており、.md ファイルや .html ファイルがパソコン(ローカル)に保存されているものではない。

ChromeアプリケーションからStackEditを選ぶとブラウザウィンドウに下図のようなメニューが現れ、md形式やpdf形式としてファイルに書き出すことができる。


StackEdit_menubar
StackEdi_filemenu

詳しくはWebサイトStackEditを参照。