如何向codepen添加语法高亮主题？

Question

这 article 建议您可以添加自己的语法突出显示主题：

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.

所以我从以下位置复制了代码：

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;
}

并将其粘贴到 Embed Theme Builder 表单的 Custom CSS 字段中链接的 CSS 文件中。

虽然正在应用链接文件中的其他 CSS，但未应用主题样式。

嵌入式代码继续应用在 Embed Theme Builder 表单的 Syntax Highlighting 下拉列表中选择的主题（必须选择一个值）。

编辑

源码文章里好像已经完成了，我把上面的CSS包裹在下面的代码里，还是没有效果：

.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 */  


}

还尝试删除 mononokai class 前缀：

.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;
}

}

Answer 1

这个 CSS 有效（没有包装器也没有 monokai class 前缀等）：

/* 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;
}

如何向codepen添加语法高亮主题？

How to add a syntax highlighting theme to codepen?

codepen