/zenn-editor

Convert markdown to html in Zenn format

Primary LanguageTypeScript

Zenn Editor

このリポジトリは、主にZennのMarkdownエディタで使用するパッケージを管理しています。

ご自身のWebサイトで使う場合

1. zenn-markdown-html によりMarkdownをHTMLに変換する

import markdownHtml from 'zenn-markdown-html';

以下のようにMarkdownをHTMLに変換します。この処理は、Node.jsでのみ実行できます。ブラウザで実行するとエラーになることにご注意ください。

const html = markdownHtml(markdown);

取得したHTMLを埋め込み親要素のクラス名にはzncという文字列を指定する必要があります。これは後述のCSSを適用するために必要です。

// Reactの場合
<div
  // "znc"というクラス名を指定する
  className="znc"
  // htmlを渡す
  dangerouslySetInnerHTML={{
    __html: html
  }}
/>

2. CSSを読み込む

import 'zenn-content-css';

3. 埋め込みコンテンツを有効にするためscriptを読み込む

以下のスクリプトを読み込むことで、TweetやMermaidなどの埋め込み記法が使用できるようになります。

<script src="https://embed.zenn.studio/js/listen-embed-event.js" ></script>

このスクリプトは<head>タグ内で読み込みます。また、defer属性やasync属性を指定するとSPA等でのページ遷移時に正しく埋め込みが行われない可能性があることにご注意ください。

4. (KaTeX記法を使う場合のみ)zenn-embed-elementsを読み込む

zenn-embed-elementsはSSRに対応していないため、クライアント側で読み込む必要があります。

// React で使う場合の例
import 'zenn-content-css';

export default function App(props) {

  useEffect(()=> {
    import("zenn-embed-elements")
  },[])

  return (
    <div 
      className="znc"
      dangerouslySetInnerHTML={{
        __html: props.html // markdownから変換されたHTMLを渡す
      }}
    />
  )
}

開発者向けドキュメント

https://zenn-dev.github.io/zenn-docs-for-developers/

Licence

非営利目的の利用のみ許可します。