How to use marked inside plugin?

[xueelf]

Problem or Desire

I've been following the community activity of this project and previously developed the docsify-chat plugin. I plan to refactor the original plugin after the official release of docsify v5. Although docsify uses marked as its parser, the plugin does not expose the marked object.

Currently, my plugin uses custom regular expressions to parse templates, but marked itself provides a rich ecosystem of extensions that allow us to easily customize template syntax without manually writing complex logic. Therefore, I originally intended to refactor the plugin using marked-directive.

However, there is an issue: we can only configure a global parser through window.$docsify.markdown, and for plugins, there is no independent marked context. I once received an Issue because other users introduced the docsify-katex plugin, which configures a global parser that affects the rendering behavior of all plugins, leading to incompatibility with some plugins.

Proposal

If we could use marked directly inside plugins, many problems could be solved. Here are some of my personal thoughts:

Allow customizing marked directly inside plugin hooks

function plugin(hook) {
  hook.init(marked => {
    marked.use({ ... })
  })
}

Ensure raw markdown does not interfere between plugins

For example, if I use marked-emoji in Plugin A and Plugin B uses other marked extensions or custom renderer functions, the rendering logic of other plugins should not be affected.

hello world! :tada:

function emojiPlugin(hook) {
  hook.init(marked => {
    marked.use({ ... })
  });
  hook.beforeEach(markdown => {
    // hello world! 🎉
    return markdown;
  });
}

function customPlugin(hook) {
  hook.init(marked => {
    marked.use({ ... })
  });
  hook.beforeEach(markdown => {
    // hello world! 🎉
    return markdown + ':tada:';
  });
  hook.afterEach(html => {
    // <p>hello world! 🎉</p>
    // <p>:tada:</p>
    return html;
  });
}

If needed, I am willing to contribute to this project.

Implementation Details

No response

Additional Context

No response

[sy-records]

Good idea, Feel free to submit PR.

[metacitizen-open]

[...] the plugin does not expose the marked object.

Actually, docsify does expose the marked object, just not during init(). You could try this:

<script type="module">
import { createDirectives } from "//cdn.jsdelivr.net/npm/marked-directive@1.0.7/+esm"

window.$docsify = {
  plugins: [
    function customPlugin(hook, vm) {
      hook.mounted(() => {
        const marked = vm.compiler._marked;
        marked.use(createDirectives());
      });
    },
  ],
};
</script>