frontarm / mdx-util

Utilities for working with MDX

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support Mermaid Chart

mzvast opened this issue Β· comments

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Feature Description

I'm working on a react app to make mdx to show mermaid chart as it's really good to draw all sorts of charts.
However I've no idea how to extend the remarkPluingin without touch the source code.

Here is the diff that solved my problem:

diff --git a/node_modules/mdx-loader/index.js b/node_modules/mdx-loader/index.js
index 60c954a..bc0c9a6 100644
--- a/node_modules/mdx-loader/index.js
+++ b/node_modules/mdx-loader/index.js
@@ -10,6 +10,7 @@ const mdxExportJSONByDefault = require('mdx-constant')
 const grayMatter = require('gray-matter')
 const typography = require('./typography')
 const rehypePrism = require('./prism')
+const mdxMermaid = require('mdx-mermaid')
 
 module.exports = async function(source) {
   let result
@@ -18,6 +19,7 @@ module.exports = async function(source) {
   const options = Object.assign(
     {
       remarkPlugins: [
+        mdxMermaid,
         slug,
         images, 
         emoji,

This issue body was partially generated by patch-package.