解説
「マークダウン」(Markdown)は、軽量マークアップ言語の一つです。HTMLやXMLといったマークアップ言語よりも簡単に書くことができます。マークダウンは、実際に書いた文章と、出力される見た目が近いために、普通に文章を書く感覚で記述することができます。
マークダウンは、英語圏で電子メールを装飾する方法を参考にして作られました。そのため、改行が1つの場合は無視するといった、メールの文章の慣習が反映されています。
この軽量マークアップ言語は、方言が多いことも特徴です。Webサイトやブログなどの文章の装飾方法でマークダウンを採用しているところがあり、それぞれの特徴に合わせたカスタマイズされているためです。有名なところでは、ソースコードをホスティングする「GitHub」の文章は、「GitHub Flavored Markdown」(GFM)というマークダウンの派生バージョンを利用しています。
サンプル
「マークダウン」のサンプルです。「markdown-it」を利用しています。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「マークダウン」のサンプル</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.2/markdown-it.min.js"></script>
<style>
textarea, button {width: 100%;}
textarea {height: 10em;}
blockquote {border-left: solid 4px #06a; color: #06a;
margin: 0; padding-left: 1em;}
</style>
</head>
<body>
<textarea id="src">
# 見出し1
## 見出し2
### 見出し3
本文の文章1.
改行1行は無視。
改行2行で改行。
本文の文章2.
---
* 箇条書き1
* 箇条書き1-1
* 箇条書き1-2
1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト
> 引用ブロック1
>
> 引用ブロック2
</textarea>
<button onClick="exec()">変換</button>
<div id="dst"></div>
<script>
function exec() {
// 変数の初期化
const src = document.getElementById('src');
const dst = document.getElementById('dst');
const srcTxt = src.value;
const md = window.markdownit();
// 変換と出力
dst.innerHTML = md.render(srcTxt);
}
</script>
</body>
</html>
