Markdown Syntax

Posted on 2024/01/06, 7:46 AM By admin22

マークダウンHTML変換を最近構築した静的生成ブログのライブラリで使用されているのを見て、これを単独で動かして見ました。

https://github.com/systemsblue/betalogg/blob/main/lib/markdownToHtml.ts

環境）
node v20.4.0 / Mac(arm64)

markdownToHtml.js

import {remark} from 'remark';
import html from 'remark-html';

export default async function markdownToHtml(markdown) {
  const result = await remark().use(html).process(markdown);
  return result.toString();
}

import {remark} from 'remark';

import html from 'remark-html';

export default async function markdownToHtml(markdown) {

const result = await remark().use(html).process(markdown);

return result.toString();

}

demo.js

import markdownToHtml from './markdownToHtml.js';
import fs from 'fs';

const md = fs.readFileSync("demo.md");

const html = await markdownToHtml(md);
console.log(html);

import markdownToHtml from './markdownToHtml.js';

import fs from 'fs';

const md = fs.readFileSync("demo.md");

const html = await markdownToHtml(md);

console.log(html);

インストール）

npm i remark
npm i remark-html

package.json

{
	"type": "module",
	"dependencies": {
		"remark": "^15.0.1",
		"remark-html": "^16.0.1"
	}
}

{

"type": "module",

"dependencies": {

"remark": "^15.0.1",

"remark-html": "^16.0.1"

}

※　最初はtypeのみ記述(ESModuleでなくCommonJSなので)。depencenciesは、インストールで自動的に追記。

変換前

% cat demo.md
## title
**abc**
>1234
>5678

`abcdefg`
```
ABCDEFG
```

% cat demo.md

## title

**abc**

>1234

>5678

`abcdefg`

```

ABCDEFG

```

変換後

% node demo.js
<h2>title</h2>
<p><strong>abc</strong></p>
<blockquote>
<p>1234
5678</p>
</blockquote>
<p><code>abcdefg</code></p>
<pre><code>ABCDEFG
</code></pre>

% node demo.js

<h2>title</h2>

<p>1234

5678</p>

</blockquote>

<p><code>abcdefg</code></p>

<pre><code>ABCDEFG

</code></pre>

ブログを更新するまでもなく、HTMLが確認できますので、便利です。
これでマークダウンの拡張を試みたいと思っています。

さらに下記の記事に詳細な説明がありますので、また学習したいと思います。

「MarkdownをHTMLに変換するunifiedインターフェースについての解説」
https://qiita.com/masato_makino/items/ef35e6687a71ded7b35a
「unified を使って Markdown を拡張する」
https://zenn.dev/januswel/articles/745787422d425b01e0c1

About admin22

Categories: 未分類タグ: Javascript

About admin22

Recent Posts

Tag

Links

Archive