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
}}
/>import 'zenn-content-css';以下のスクリプトを読み込むことで、TweetやMermaidなどの埋め込み記法が使用できるようになります。
<script src="https://embed.zenn.studio/js/listen-embed-event.js" ></script>このスクリプトは<head>タグ内で読み込みます。また、defer属性やasync属性を指定するとSPA等でのページ遷移時に正しく埋め込みが行われない可能性があることにご注意ください。
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を渡す
}}
/>
)
}MIT