markdown-jsでHTML5なコードを吐き出すようにする

markdown-jsはJavaScript製のMarkdownパーサーで、最終的なHTMLコードだけでなく、中間的なJSON形式のコードも吐き出してくれるので拡張がしやすくなっている。

で、今回はHTML5で出力するわけだけど、実際のどう違うか具体的なコードで見てみる。例えばこんな感じのmarkdownのテキストがあったとすると
# 1

なにか

## 1.1

hoge

## 1.2

fuga

> 引用とか

# 2
## 2.1
### 2.1.1

HTML4(default)ではこんな感じで出力される。
<h1>1</h1>
<h2>1.1</h2>
<p>hoge</p>
<h2>1.2</h2>
<p>fuga</p>
<blockquote><p>引用とか</p></blockquote>
<h1>2</h1>
<h2>2.1</h2>
<h3>2.1.1</h3>

HTML5だとこんな感じ。
<section>
<h1>1</h1>
<section>
<h1>1.1</h1>
<p>hoge</p>
</section>
<section>
<h1>1.2</h1>
<p>fuga</p>
<blockquote>
<p>引用とか</p>
</blockquote>
</section>
</section>
<section>
<h1>2</h1>
<section>
<h1>2.1</h1>
<section>
<h1>2.1.1</h1>
</section>
</section>
</section>

このようにHTML5でマークアップする場合は各sectionごとにh1を使える。例えばブログの記事のタイトルだけ別のフォームで入れて、本文はmarkdownで書くような場合だと、わざわざ#の数を調整せずに使えるので便利だし、後からこうしたかったーっていうときもh1しか使っていないので修正も楽かと思う。cssはちょっとだけ面倒かな?でも、今はsassとかあるから平気だよ!多分!

ソースコード:https://gist.github.com/2879128
markdown.toHTML5 = function(source, dialect, options) {
return markdown.renderJsonML((function to5(tree, level) {
var i, m,
indices = [],
hx = 'h' + level,
n = tree.length,
blocks = [];

if(!n) return [];

function set(start, end) {
blocks.push(['section', ['h1', tree[start][1]]].concat(to5(tree.slice(start + 1, end), level + 1)));
}

for(i = 0; i < n && hx !== tree[i][0]; ++i) blocks.push(tree[i]);
for(i = 0; i < n; ++i) if(hx === tree[i][0]) indices.push(i);
for(i = 0, m = indices.length - 1; i < m; ++i) set(indices[i], indices[i + 1]);
if(indices.length) set(indices[m], n);

return blocks;
})(markdown.toHTMLTree(source, dialect, options), 1));
};





posted by 右京 | javascript
blog comments powered by Disqus
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。