"Inline" CSS


Love the library - thanks!

One of my use-cases is to create a css-editor for inline styling alone (no selectors).
Of cource, the css-tokenizer requires a selector to be able to correctly parse the css. I could work around this by prepopulate the editor with an empty selector ({})



This is clearly a rather ugly “hack”, and the user could easily remove the braces and disable the parsing.

I can see a couple of solutions:

  1. Hook into CodeMirror and preprocess the text before it is parsed
  2. Create a new inline-css-mode and take advantage of the exising css-mode
  3. Create a new inline-css.mode using code from the existing css-mode
  4. Something obvious that I have missed

Option 1 seems like the easiest to implement but requires that there is some extension points.

What would you recommend?

You could add an option to the css mode that makes it start in the "block" state rather than the "top" state. You’ll still get silly results if people enter }, but that might not be an issue.

Works great - thanks!

Would you accept a PR with the changes I made (looking for a property named inline)?

Even though it has been 5 years that this problem has been asked, I couldnt find a better solution than loraderon suggested so I have modified it a bit to make it work a little better.

editor.markText({ line: 0, ch: 0 }, { line: 0 }, { readOnly: true });
editor.on(‘change’, () => {
editor.markText(CodeMirror.Pos(editor.lastLine() - 1), CodeMirror.Pos(editor.lastLine()), { readOnly: true });
if (!textarea.value) {