Turn existing CodeMirror editor into HyperMD

This example is for plain browser environment. Make sure that...

• All necessary CodeMirror assets must be loaded already. (scripts, stylesheets... The list can be found here)

• The CodeMirror is not protected by closure. Check if CodeMirror the global variable exists.

If a Markdown editor based on CodeMirror is already existing, you can convert it to HyperMD mode!

1. Open https://codemirror.net/mode/gfm/index.html

2. Open Inspector, switch to the console panel

3. Load HyperMD. Copy and run this in console:

   // This create element and insert into body
   function elt(tagName, attrs) {
     var el = document.createElement(tagName)
     if (attrs) for (var attr in attrs) el.setAttribute(attr, attrs[attr])
     document.body.appendChild(el)
     return el
   }
   
   elt('link', { rel: "stylesheet", href: "https://laobubu.net/HyperMD/mode/hypermd.css" })
   elt('link', { rel: "stylesheet", href: "https://laobubu.net/HyperMD/theme/hypermd-light.css" })
   elt('script', { src: "https://laobubu.net/HyperMD/ai1.js" })
     .addEventListener('load', function() { console.log('HyperMD is ready!') }, false)

4. Wait until HyperMD is ready appears

5. Run this:

   HyperMD.switchToHyperMD(editor)