CodeMirror in an iFrame (jsx and go syntax highlighting)

I had trouble getting CodeMirror to work in Observable because it detects amd and tries to load modules with it, using relative paths. I got it working using an iFrame instead, with srcdoc to let me build up the source of it:

It would be neat if it could work without an iFrame (if anyone has any ideas, Iā€™d appreciate it), but I got it working inside an iFrame using postMessage both to update the value of the view and to resize it! And now I have jsx and go in an Observable document.

1 Like

I tried to polyfill requires with some hacks, and it turns to work fine (for now). Would be much cleaner if there is some module resolution mechanism in Observable standard library.

Here is my attempt, iframe-free:

2 Likes