これ一本でOK！【markdown-it】でサクッとMarkdown変換！

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Markdownは、プレーンテキストでフォーマットできる軽量なマークアップ言語として、その使いやすさと広い互換性により大きな人気を得ています。この記事では、JavaScriptでMarkdownドキュメントを解析・生成する方法について、主にMarkdown-itパッケージを使用して説明します。

基本概念

Markdownは、HTMLタグを表現する記号や文字の集まりです。例えば、単語を太字にするには、**太字**や__太字__のように、アスタリスクやアンダースコアで囲みます。これは、HTMLの<strong>太字</strong>と同等です。

Markdownはドキュメント作成を簡素化します。HTMLタグを手動で作成する代わりに、覚えやすいMarkdown構文を使用できます。最も重要な点は、レンダリングなしでもMarkdownドキュメントを読めることで、非常にアクセシブルです。

JavaScriptでのMarkdown

JavaScriptには、Markdownテキストを解析してHTML出力を生成する複数のライブラリがあります。ここでは、人気のmarkdown-itライブラリに焦点を当てます。

まず、npmを使用してmarkdown-itをインストールします：

npm install markdown-it --save

Markdown-itの使用例

基本的な使用方法

markdown-itをインストールした後、ファイルで読み込んでインスタンスを作成します：

const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()

Markdownの文字列をHTMLに変換するには、インスタンスの.renderメソッドに渡すだけです：

const markdownText = '**こんにちは、世界！**'
const htmlText = md.render(markdownText)
console.log(htmlText)

出力結果：

<p><strong>こんにちは、世界！</strong></p>

高度な使用方法

markdown-itはMarkdownパーサーの設定のために複数のオプションを提供します。例えば、HTMLサポート（デフォルトでは無効）を追加できます：

const md = new MarkdownIt({html: true})

これで、Markdownテキストに含まれるHTMLタグがそのまま通過します：

const markdownText = '<span style="color:red">**こんにちは、世界！**</span>'
const htmlText = md.render(markdownText)
console.log(htmlText)

プラグインの追加

markdown-itはプラグインをサポートしており、機能を拡張できます。よく使用されるプラグインの一つがmarkdown-it-anchorで、生成されるHTMLにアンカー見出しを追加します：

const MarkdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')

const md = new MarkdownIt().use(markdownItAnchor)

const markdownText = '# こんにちは、世界！'
const htmlText = md.render(markdownText)

出力結果：

<h1 id="hello-world">こんにちは、世界！</h1>

まとめ

この記事では、markdown-itを使用してJavaScriptでMarkdown解析を実装する方法を探りました。これにより、Markdownから HTMLへの変換が簡単になり、フォーマット済みテキストの生成が容易になります。プラグインに対応しているmarkdown-itは非常に汎用性が高く、あらゆるMarkdown関連のタスクに対応できます。

Markdownの力は、ドキュメントを簡単に書いて読めることにあり、markdown-itのようなJavaScriptライブラリを使用することで、ウェブ上のどこでもこの機能を活用できます。楽しいMarkdown作成ライフを！