前のページへ
markdown 		次のページへ
MarkdownでHTMLを簡単に　- Sublime Tex　編

MarkdownでHTMLを簡単に

初回公開：
最終更新：2018/01/01

【　目次　】

Markdown記法を使うと、ちょこっとメモ書きしといた文章を簡単にHTMLに変換できるらしい。
ファイルの拡張子は「.md」を使うみたい。

Markdown記法の文法についての参考URLは以下のとおり。

Markdown記法

いろいいろなMarkdown

参考URLに説明が載っているが、自分なりに表にしてみた。

Markdown htmlタグ 備考
# xxx h1,h2... #の数で...
xxx
===		 h1 # xxxと同じ
xxx
---		 h2 ## xxxと同じ
*** ， --- ， ___ hr 3つ以上の「*」または「_」または「-」 あいだに空白が入ってもよい。
* ， + ， - ul + li スペースは必須，入れ子も可能(入れ子にするには行頭にタブまたはスペース4個)
数字とピリオド + スペース ol + li スペースは必須，入れ子も可能
*xxx* em 強調xxx
**xxx**　， __xxx__ strong 更に強い強調，2つの「*」または「_」で囲む
> blockquote 引用文，>を複数連続して記述してネスト可
~~xxx~~ del 打ち消し線 xxx
[ラベル](URL) a リンク　<a href="URL">URL</a>
<http://ichitcltk.hustle.ne.jp/gudon2/index.php>　， <xxx@gmail.com> a 自動リンク http://ichitcltk.hustle.ne.jp/gudon2/index.php　， xxx@gmail.com
![代替テキスト](画像のURL "画像タイトル") img <img alt="代替テキスト" src="画像のURL">
`xxx` code コードのインライン表示 xxx
```　， タブ　， 4つのスペース div class="codehilite" コードブロック

<p>(段落)は空白行で、<br>(改行)は行末に半角スペースを2以上。

MarkdownをエスケープするにはバックスラッシュをMarkdownの前に挿入する。
取り消し線の~~の前に\を挿入してもエスケープしてくれない。

残念なのは、Markdown記法にはcssのclass属性の指定ができない点。
これは、Python-MarkdownのAttribute Lists Extensionを使うと解決できる。

リンク

リンクは以下のように記述する。
リンクのtitleテキストは省略可能。

[リンクテキスト](URL)
またはリンクにタイトルを付けて
[リンクテキスト](URL "title_text")

URLを別の場所で定義

参考URLを別の場所で定義しておいて

[参考1]: http://ichitcltk.hustle.ne.jp/gudon2/index.php "HOME - 愚鈍人"  
[参考2]: http://ichitcltk.hustle.ne.jp/gudon2/index.php?pageType=file&id=Android032_SQLite   "QLiteでデータベース"  
[参考3]: http://astore.amazon.co.jp/ichitcltk-22 "▼SHOP - プログラム開発"

このように使う。

[私のホームページ][参考1]とか[QLiteはここを参考に][参考2]とか[お買い物はここで][参考3]とか

または

[参考1]とか[参考2]とか[参考3]とか

表示結果は以下のとおり

私のホームページとかQLiteはここを参考にとかお買い物はここでとか

または

参考1とか参考2とか参考3とか

Webブラウザのブックマークレットでリンクのmarkdounテキストを自動生成

余談ではあるが、Firefoxに以下のブックマークレットを登録することで参照しているページのリンクのmarkdounテキストをFirefoxに自動生成させることができる。
javascript:void%20alert('['+document.title+']('+document.location.href+')\n\n\n');

その他

htmlタグについてはタグとしてそのまま出力されるため、htmlタグの「<」をエスケープして表示するには「&lt;」と記述しなければならない。 （htmlのエスケープについてはHTML-特殊文字 )を参照)

例えば、<p>文字列</p>を表示するには、&lt;p>文字列</p>と最初の<をエスケープして記述する。

Markdownの表示サンプル ⇒ Markdown Samples - 愚鈍人

オンラインで簡単にMarkdown記法をHTMLに変換

Webブラウザを使って簡単にMarkdown記法をHTMLに変換できるサイトが便利。

オンラインで利用できるフリーのMarkdownエディタには他にもいろいろあって

GFM（GitHub Flavored Markdown）

markdownには「GitHub Flavored Markdown」(略してGFM)という良く知られた方言が存在する。

リファレンス的なもの

GitHubのreadmeファイルはこれを使って書くらしい。

GitHubのWeb APIによるmarkdown変換ツールといのもあるようで

PHP Markdown Extra

「PHP Markdown Extra」という「最初PHPで実装されたMarkdown記法の拡張仕様」があり、
Markdown拡張記法が記述できる

特に、表組みなどが便利。
脚注の機能も興味深い。

「PHP Markdown Extra」の表示サンプル ⇒ 「PHP Markdown Extra」-samples - 愚鈍人

Markdownのツール

Markdownには欠点も

Markdownには欠点も多く、過度の期待は禁物。
Markdown記法だけで表現できるHTMLはごく一部。
足りない機能についてはHTMLで直接記述するなど工夫も必要。
(Markdownもはじめよう)

ページのトップへ戻る