Bryn
Shanahan
Login

My new Code component

Using `@monaco-editor/react` inside my custom CMS. At the moment you edit the code inside the Monaco editor then the content is displayed through Prismjs as static React components (so you don't have to include a huge ol' Monaco dependency... just a huge ol' prism dependency).

I believe I will be able to improve the download cost later by parsing the code contents with Prism at "post save" time that way I can just render plain HTML once the code is published

Another slightly awkward thing is that there is currently no way to move your cursor past the Monaco editor in the post authoring interface 🤷‍♂️.

1const AUTO_WRAPPING = true
2const AUTO_EXPANDING = true
3
4function hello_world () {
5 return "This code was written by my custom monaco based editor (the same editor used by vscode!)"
6}
7
8hello_world()

I can probably deal with that later though. For now, just make sure you have a paragraph after the line you are planning on inserting a code component