Open xu4wang opened 1 year ago
Hey @xu4wang ;
I think you can add Mermaid support to your Content Wind website by adding https://github.com/temando/remark-mermaid to @nuxt/content configuration.
https://content.nuxtjs.org/api/configuration#markdown
Here is a link to the guidelines about adding remark plugins!
Hope this can help :)
@Tahul thanks for you help.
Do you mind share me a working nuxt configuration?
Below is my version:
export default defineNuxtConfig({
extends: 'content-wind',
content: {
documentDriven: true,
highlight: {
theme: {
dark: 'github-dark',
default: 'github-light'
}
},
markdown: {
// Object syntax can be used to override default options
remarkPlugins: {
// Override remark-emoji options
'remark-emoji': {
emoticon: true
},
// Disable remark-gfm
'remark-gfm': false,
//add mermaid
'remark-mermaid': {
},
// Add remark-oembed
'remark-oembed': {
// Options
}
},
// Array syntax can be used to add plugins
rehypePlugins: [
'rehype-figure'
]
}
}
})
I did install
$ npm install remark-mermaid mermaid.cli
However, when I use mermaid in the markdown file:
```mermaid graph LR Start --> Stop ```
The graph was not generated, instead it shows the mermaid source in a code block.
Install instructions from say https://www.npmjs.com/package/remark-mermaid, you should install mermaid.cli too.
Install instructions from say https://www.npmjs.com/package/remark-mermaid, you should install mermaid.cli too.
thanks for the reply. are you able to render mermaid diagram? I did install mermaid.cli
As a software developer, I need to draw sequence diagram everyday. I am wondering is it easy to add mermaid support?
BR,Austin