HyperMD Plugins

HyperMD Plugins (aka. PowerPacks)

• How to Use?
• Plugin List
  • Math Renderer -- Render Math TeX formulas
  • Emoji -- Provide better emoji icon, dict and more
  • Code Renderer -- Turn code-blocks into diagrams, charts, debugger and more!
• More...

---

How to Use?

Easy! Load plugins before creating your editor.

• for webpack / parcel bundlers: import "hypermd-xxx" after importing "hypermd"
• for requirejs and AMD loaders: add "hypermd-xxx" to your dependencies
• for plain browser env: add related HTML tags after HyperMD's

Note:

1. Some plugins might require further configuring (they are marked with 🔧).
2. For RequireJS, don't forget to configure related packages' entry filename. Example:

requirejs.config({ packages: [
  { name: "hypermd-katex", main: "index.js" },
  { name: "katex", main: "dist/katex.min.js" },
]})

---

Plugin List

⭐	Highly Recommended
🧓	Support Plain Browser Env: You can even use it without module loader or requirejs
🔧	Need Configuring: Please visit its homepage, or read its README.

Math Renderer

• hypermd-katex 🧓⭐ -- Use KaTeX to render TeX formulars. (demo)
• hypermd-mathjax 🧓🔧 -- Use MathJax to render TeX formulars. (demo)

Emoji

• hypermd-emojione 🧓 -- Use emojione to display and lookup emojis. (demo)
• hypermd-twemoji 🧓 -- Use twemoji to display emojis. (demo)

Code Renderer

• hypermd-mermaid 🧓🔧⭐ -- Use mermaid to render 'mermaid' code blocks into charts and diagrams! (demo)
• hypermd-flowchart 🧓 -- Use flowchart.js to render 'flowchart' code blocks! (demo)

More

Your awesome plugins are not listed here? Feel free to edit this page!

Also, don't miss other fantastic plugins in this universe. Search more plugins on GitHub