How to add a syntax highlighting theme to codepen?

Question

This article suggests you can add your own syntax highlighting theme:

You can take it a step further, though— syntax highlighting is also handled with CSS! If you were to make your own theme for CodeMirror (the open-source text editor CodePen is built around), there's nothing stopping you from using it in an embedded Pen.

So I copied code from:

https://codemirror.net/theme/monokai.css

/* Based on Sublime Text's Monokai theme */

.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
.cm-s-monokai div.CodeMirror-selected { background: #49483E; }
.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
.cm-s-monokai .CodeMirror-guttermarker { color: white; }
.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }

.cm-s-monokai span.cm-comment { color: #75715e; }
.cm-s-monokai span.cm-atom { color: #ae81ff; }
.cm-s-monokai span.cm-number { color: #ae81ff; }

.cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; }
.cm-s-monokai span.cm-comment.cm-def { color: #bc9262; }
.cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; }
.cm-s-monokai span.cm-comment.cm-type { color: #5998a6; }

.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }
.cm-s-monokai span.cm-keyword { color: #f92672; }
.cm-s-monokai span.cm-builtin { color: #66d9ef; }
.cm-s-monokai span.cm-string { color: #e6db74; }

.cm-s-monokai span.cm-variable { color: #f8f8f2; }
.cm-s-monokai span.cm-variable-2 { color: #9effff; }
.cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #66d9ef; }
.cm-s-monokai span.cm-def { color: #fd971f; }
.cm-s-monokai span.cm-bracket { color: #f8f8f2; }
.cm-s-monokai span.cm-tag { color: #f92672; }
.cm-s-monokai span.cm-header { color: #ae81ff; }
.cm-s-monokai span.cm-link { color: #ae81ff; }
.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }

.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

and pasted it in a CSS file linked in the Custom CSS field of the Embed Theme Builder form.

Although other CSS from the linked file is being applied, the theme styling is not applied.

Embedded code continues to apply the theme selected in the Syntax Highlighting dropdown of the Embed Theme Builder form (a value must be selected).

EDIT

As it looks like it is done in the source article, I wrapped the above CSS in the following code and it still didn't have an effect:

.embed-scope.embed-scope, :not(.embed-scope) {
  .box,
  .editor .top-boxes,
  .CodeMirror-gutter-wrapper,
  body.project .editor-pane,
  body.project .editor {
    background: #272825;
  }


/* ALL THE MONOKAI CSS HERE */  


}

Also tried removing the mononokai class prefixes:

.embed-scope.embed-scope, :not(.embed-scope) {
  .box,
  .editor .top-boxes,
  .CodeMirror-gutter-wrapper,
  body.project .editor-pane,
  body.project .editor {
    background: #272825;
  }

/* Based on Sublime Text's Monokai theme */

.CodeMirror { background: #272822; color: #f8f8f2; }
div.CodeMirror-selected { background: #49483E; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.CodeMirror-gutters { background: #272822; border-right: 0px; }
.CodeMirror-guttermarker { color: white; }
.CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.CodeMirror-linenumber { color: #d0d0d0; }
.CodeMirror-cursor { border-left: 1px solid #f8f8f0; }

.cm-comment { color: #75715e; }
.cm-atom { color: #ae81ff; }
.cm-number { color: #ae81ff; }

.cm-comment.cm-attribute { color: #97b757; }
.cm-comment.cm-def { color: #bc9262; }
.cm-comment.cm-tag { color: #bc6283; }
.cm-comment.cm-type { color: #5998a6; }

.cm-property, .cm-attribute { color: #a6e22e; }
.cm-keyword { color: #f92672; }
.cm-builtin { color: #66d9ef; }
.cm-string { color: #e6db74; }

.cm-variable { color: #f8f8f2; }
.cm-variable-2 { color: #9effff; }
.cm-variable-3, .cm-type { color: #66d9ef; }
.cm-def { color: #fd971f; }
.cm-bracket { color: #f8f8f2; }
.cm-tag { color: #f92672; }
.cm-header { color: #ae81ff; }
.cm-link { color: #ae81ff; }
.cm-error { background: #f92672; color: #f8f8f0; }

.CodeMirror-activeline-background { background: #373831; }
.CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

}

score 1 · Accepted Answer · answered Aug 08 '19 at 07:57

This CSS worked (no wrapper and no monokai class prefixes etc):

/* Based on Sublime Text's Monokai theme */

.CodeMirror { background: #272822; color: #f8f8f2; }
div.CodeMirror-selected { background: #49483E; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.CodeMirror-gutters { background: #272822; border-right: 0px; }
.CodeMirror-guttermarker { color: white; }
.CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.CodeMirror-linenumber { color: #d0d0d0; }
.CodeMirror-cursor { border-left: 1px solid #f8f8f0; }

.cm-comment { color: #75715e; }
.cm-atom { color: #ae81ff; }
.cm-number { color: #ae81ff; }

.cm-comment.cm-attribute { color: #97b757; }
.cm-comment.cm-def { color: #bc9262; }
.cm-comment.cm-tag { color: #bc6283; }
.cm-comment.cm-type { color: #5998a6; }

.cm-property, .cm-attribute { color: #a6e22e; }
.cm-keyword { color: #f92672; }
.cm-builtin { color: #66d9ef; }
.cm-string { color: #e6db74; }

.cm-variable { color: #f8f8f2; }
.cm-variable-2 { color: #9effff; }
.cm-variable-3, .cm-type { color: #66d9ef; }
.cm-def { color: #fd971f; }
.cm-bracket { color: #f8f8f2; }
.cm-tag { color: #f92672; }
.cm-header { color: #ae81ff; }
.cm-link { color: #ae81ff; }
.cm-error { background: #f92672; color: #f8f8f0; }

.CodeMirror-activeline-background { background: #373831; }
.CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

How to add a syntax highlighting theme to codepen?

1 Answers1