DEV Community

How To Add Monaco Editor to a Next.js app

swyx on March 30, 2020

Bottom Line Up Front I use a slightly modified version of the steps mentioned in this GitHub comment. Modifications were necessary becau...

Read full post

Ahmad Awais ⚡️ • Mar 31 '20

This is pretty fucking amazing. I've been meaning to work on something like this since all the syntax highlighting choices available are nowhere near as good as the Monaco editor. And I built the Shades of Purple theme because I like the right set of colors for the syntax — this will be a huge help for the new version of my site.

Thank you! 👌

Pacharapol Withayasakpunt • Mar 31 '20

Note that Monaco is not mobile supported. That turns me off, and had to fall back to CodeMirror...

swyx • Mar 31 '20

doesnt monaco use codemirror under the hood?

Pacharapol Withayasakpunt • Mar 31 '20

I don't know. I just believe what it says in the website -- microsoft.github.io/monaco-editor/

swyx • Mar 31 '20

ah. i've tried it briefly on mobile web sites. it can work. but maybe not as well as you might want.

Tero Jaakkola • Mar 31 '20

This is fantastic. Took me 15 minutes to add to my own starter and get it running. Running pretty smoothly on localhost. Hosting to now breaks it a little bit.

github.com/jaakkolantero/monaco-st...

Big thanks!

swyx • Apr 1 '20 • Edited

thanks! looks like the production build is missing this file github.com/microsoft/vscode/blob/a...

I figured it out! postcss is clearing monaco's overflow guard styling since it thinks it is unused.

// postcss.config.js
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    // https://purgecss.com/configuration.html#options
    content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
    css: [],
    whitelistPatternsChildren: [/monaco-editor/], // so it handles .monaco-editor .foo .bar
    defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
  }
];

CHAITANYA • Jan 2 '23

@swyx Greetings,
have you integrated monaco-languageclient i was getting this error

Can you share what steps to resolve this issue?

CHAITANYA • Jan 2 '23 • Edited

I resolved this error and then i am getting these errors. I mentioned the error and reference code in this github issue github.com/TypeFox/monaco-language... @swyx can you check what i was missing here?

Debanjan Tewary • Jan 17 '22 • Edited

Can someone please help me , I have tried this everything is working file but when i am doing npm run buld its showing webpack error.
Please Some one help me I want to upload it to digital ocean. I cant beacuse its not building .❤️
Error Image:
dev-to-uploads.s3.amazonaws.com/up...