akebifiky / remark-simple-plantuml

A simple plugin for remarkjs that converts PlantUML code written in Markdown to img tags.
MIT License
26 stars 7 forks source link

Add support for embedded svg tags #7

Open flfue opened 2 years ago

flfue commented 2 years ago

Add support to specify if to render the diagram as image tag (type: "image") or as embedded svg object which supports links and to select text within the diagram (type: "svg"). To allow svg as HTML element in markdown you require a plugin like rehype-raw.

This should also solves the following issues: https://github.com/akebifiky/remark-simple-plantuml/issues/5 https://github.com/akebifiky/remark-simple-plantuml/issues/6

LuciferUchiha commented 2 years ago

@flfue Did you get this working with rehype-raw in your own docusaurus page? Since this isn't getting merged I copied your index.js locally and got it working with the image type but with the svg type it cuts the bottom off. I assume this is because rehype-raw is missing, so I installed it imported it and added it to the rehype plugins but that hasn't changed anything.

Screenshot 2022-09-12 at 11 06 04
// docusaurus.config.js
...
const rehypeRaw = import('rehype-raw');
const remarkSimplePlantumlPlugin = require('./src/util/remarkSimplePlantumlPlugin');
...
 '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [math, remarkSimplePlantumlPlugin],
          rehypePlugins: [katex, rehypeRaw],
          sidebarPath: require.resolve('./sidebars.js'),
...

Would be very grateful for your help thank you :)