Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
The editors here on CodePen use the open source library CodeMirror. CodeMirror has a bunch of settings that control its behavior. You know how when you type an open curly bracket in the CSS editor, it automatically inserts a matching closing bracket? That’s an add-on and setting we have installed and turned on. We like it, most people like it, but if you don’t, you can turn it off. We don’t offer UI controls for this as part of your Settings. Maybe someday we will, but for now, you’ll need to get a little deepnerdy to adjust things.
I need to be super clear before we get started here: we can’t 100% promise this will work forever. CodeMirror might change, we might change architecture, browsers might change, etc.
Let’s say you want to want to turn off that curly bracket matching feature. CodeMirror has an API for that. We don’t expose a generic
codemirror object though for you to change, it’s part of our global CodePen namespace. Each of the three CodeMirror editors are available at:
CP.htmlEditor.editor CP.cssEditor.edtior CP.jsEditor.editor
From there, you can use the API. Turning off the curly brace matching would look like:
There are lots of options, so have at it.
Tampermonkey: “Tampermonkey is the most popular userscript manager.”