NakoBase Logo
NPM Package

Markdown to HTML npm package

公開日
更新日
#Markdown#HTML#React#npm
Markdown to HTML npm package

概要

Githubレポジトリ: https://github.com/nakobase/nakobase-md-html

マークダウンをHTMLに変換するnpmパッケージを作成しました。

すでに多くのパッケージがありますが、以下の点が特徴のパッケージです。

  • 基本的なマークダウンをサポート
  • コードハイライトに対応
  • styleをインポートすることでそのまま利用できる
    • 複数のボックスや見出しのスタイルに対応

使い方

インストール

# npm
npm install @nakobase/nakobase-md-html

# yarn
yarn add @nakobase/nakobase-md-html

# pnpm
pnpm add @nakobase/nakobase-md-html

利用方法

import { mdToHtml } from '@nakobase/nakobase-md-html';

const html = mdToHtml(
  `
# Hello World

This is a test of the markdown to html converter.
`,
  {
    codeHighlight: true, // コードハイライトを有効にする場合はtrueにしてください。デフォルトはfalseです。
    rich: true, // カスタム記法などを有効にする場合はtrueにしてください。デフォルトはfalseです。
    anchor: true, // 見出しにIDを付与する場合はtrueにしてください。デフォルトはfalseです。
  },
);

console.log(html);

.nbcontentsをマークダウンの親要素に追加してください。

<div class="nbcontent">
  <!-- HTML parsed from markdown -->
</div>

スタイル

import '@nakobase/nakobase-md-html/styles/base.css';
import '@nakobase/nakobase-md-html/styles/rich.css'; // rich: trueにした場合はこちらもインポートしてください。

import 'prismjs/themes/prism-okaidia.css'; // ハイライトスタイルは任意のprismテーマをインポートしてください。

今後

今後は引き続き開発し、カスタムブロックおよび独自スタイルを増やしていきます。