Set CodeMirror Theme

[Shackelford-Arden]

So, I'm not overly familiar with CodeMirror but...

How would I go about setting the theme for code blocks? I see CodeMirror has quite a few themes and I'd like to be able to make use of them if possible. Is this something that I need to do on the backend?

If it s a backend option... is this something that would be added that we can change in the admin settings? Personally I'm looking at global setting as I don't really want to have to do this page to page.

[ssddanbrown]

Hi @Shackelford-Arden,

Currently the codemirror theme is hardcoded in this file with the theme styles located here.

At the moment, you could override the styles if you wanted but you can't change the codemirror theme directly. For the purpose of keeping release CSS/JS sizes low I'd prefer not to embed all possible themes but what we could do is update the theme references in the JS files so they can be overridden using the 'custom head content' setting. Think we'd need to add some documentation at bookstackapp.com as well with an example of how someone could do this.

[domainzero]

@Shackelford-Arden This can currently be done with pretty low effort, but it's a little hacky. Codemirror has a repo of all their themes here.

I snagged the dracula theme, changed all the instances of dracula to base16-light and loaded it into the custom head content. This way avoids a lot of fussing with the scss and other materials.

Viewing a page:

The editor:

Here's my entire stylesheet:

.cm-s-base16-light.CodeMirror, .cm-s-base16-light .CodeMirror-gutters {
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
  border: none;
}
.cm-s-base16-light .CodeMirror-gutters { color: #282a36; }
.cm-s-base16-light .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
.cm-s-base16-light .CodeMirror-linenumber { color: #6D8A88; }
.cm-s-base16-light .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.1)!important; }
.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.1)!important; }
.cm-s-base16-light span.cm-comment { color: #6272a4; }
.cm-s-base16-light span.cm-string, .cm-s-base16-light span.cm-string-2 { color: #f1fa8c; }
.cm-s-base16-light span.cm-number { color: #bd93f9; }
.cm-s-base16-light span.cm-variable { color: #50fa7b; }
.cm-s-base16-light span.cm-variable-2 { color: white; }
.cm-s-base16-light span.cm-def { color: #50fa7b; }
.cm-s-base16-light span.cm-operator { color: #ff79c6; }
.cm-s-base16-light span.cm-keyword { color: #ff79c6; }
.cm-s-base16-light span.cm-atom { color: #bd93f9; }
.cm-s-base16-light span.cm-meta { color: #f8f8f2; }
.cm-s-base16-light span.cm-tag { color: #ff79c6; }
.cm-s-base16-light span.cm-attribute { color: #50fa7b; }
.cm-s-base16-light span.cm-qualifier { color: #50fa7b; }
.cm-s-base16-light span.cm-property { color: #66d9ef; }
.cm-s-base16-light span.cm-builtin { color: #50fa7b; }
.cm-s-base16-light span.cm-variable-3, .cm-s-base16-light span.cm-type { color: #ffb86c; }

.cm-s-base16-light .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
.cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

YMMV.

[Shackelford-Arden]

@domainzero Thank you! Your idea made me wonder...

@ssddanbrown Based on what @domainzero said, does that tie into your comment at all? Sorry... I didn't understand what your comment was.

Though, I do wonder if it would be possible to simply let users change the theme by using the files that are hosted by code mirror. This would allow you to keep your file sizes small but still allow for customizing the theme. If the user for whatever reason (intranet access only) can't access the codemirror site, it would just default to what is included in BookStack.

Just thoughts, regardless of what you end up implementing, I look forward to it. I can't imagine what I would do at this point without BookStack.

[ssddanbrown]

@Shackelford-Arden Yeah, That's basically what I mean but you'll be able to define the theme as well so you don't have to find & replace the theme name in the CSS.

To be honest, I'd prefer not to add another setting for this or depend on an external site for just code styles. Doing the above is a fairly simple process, Especially once we have it fully documented on the docs site.

[Shackelford-Arden]

I respect not wanting to add an additional setting.

Sounds like I'll watch for some documentation :) 👍

Thanks!

[ssddanbrown]

This functionality is now in master, Ready for the next release. Documentation update also ready.

The documentation page here will be updated upon release with details of changing the theme.