0.23.2 // Editor preview not considering CodeMirror theme #819

New Issue

OVERLORD · 2026-02-04T22:22:56+03:00

OVERLORD commented

2026-02-04 22:22:56 +03:00

Originally created by @derek-shnosh on GitHub (Sep 19, 2018).

Describe the bug
Editor preview (markdown/wysiwyg) doesn't seem to be considering the CodeMirror theme in my custom html content.

Steps To Reproduce

Apply a CodeMirror theme to Custom HTML Head Content.

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/material.min.css" rel="stylesheet">
<script>window.codeTheme='material';</script>

Insert a block of code into a document (markdown).
```
show ip interface brief | exclude unassigned
```

Expected behavior
While editing a page, the live preview should show the code block with the applied CodeMirror style.

Screenshots
Screenshot from editor.

Screenshot from viewer.

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): 0.23.2
PHP Version: PHP 7.2.10-0ubuntu0.18.04.1
Hosting Method (Nginx/Apache/Docker): Apache/2.4.29 (Ubuntu)

Additional context
My Custom HTML Head Content.

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/material.min.css" rel="stylesheet">
<script>window.codeTheme='material';</script>

<style>
h1, h2, h3, h4 {
  font-family: 'M PLUS Rounded 1c', sans-serif; }
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base, code, span.code {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.90em; }
.page-content {
  max-width: 950px; }
.page-content a {
  font-weight: 700; }
.page-content table {
  width: 100%;
  table-layout: auto; }
.page-content table th {
  background-color: #DBDBDB;
  font-weight: 600;
  font-style: italic;
  border-right: 1px solid #F2F2F2; }
.page-content table tr:nth-child(odd) {
  background-color: #F2F2F2; }
.page-content code {
  color: #c54545; }
.page-content h1 {
  font-size: 2.75em;
  border-bottom: 4px solid #5c6e77;
  width: 100%;
  display: inline-block; }
.page-content h2 {
  font-size: 2em;
  padding-left: 5px;
  border-left: 4px solid #5c6e77;
  border-bottom: 2px dashed #bbc5ca;
  border-bottom-left-radius: 10px 10px;
  width: 100%;
  display: inline-block; }
.page-content h3 {
  font-size: 1.5em;
  padding-left: 5px;
  border-left: 1px dashed #5c6e77;
  border-bottom: 1px dashed #bbc5ca;
  border-bottom-left-radius: 5px 5px;
  display: inline-block; }
.page-content h4 {
  font-size: 1.25em; }
</style>

Originally created by @derek-shnosh on GitHub (Sep 19, 2018). **Describe the bug** Editor preview (markdown/wysiwyg) doesn't seem to be considering the CodeMirror theme in my custom html content. **Steps To Reproduce** 1. Apply a CodeMirror theme to Custom HTML Head Content. ```html <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/material.min.css" rel="stylesheet"> <script>window.codeTheme='material';</script> ``` 2. Insert a block of code into a document (markdown). ``` show ip interface brief | exclude unassigned ```` **Expected behavior** While editing a page, the live preview should show the code block with the applied CodeMirror style. **Screenshots** Screenshot from editor. ![image](https://user-images.githubusercontent.com/21090563/45772099-b6a12680-bbfb-11e8-81ed-7c3c16e69a4c.png) Screenshot from viewer. ![image](https://user-images.githubusercontent.com/21090563/45772183-df292080-bbfb-11e8-8dd0-2d863a415746.png) **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): 0.23.2 - PHP Version: PHP 7.2.10-0ubuntu0.18.04.1 - Hosting Method (Nginx/Apache/Docker): Apache/2.4.29 (Ubuntu) **Additional context** My Custom HTML Head Content. ```html <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/material.min.css" rel="stylesheet"> <script>window.codeTheme='material';</script> <style> h1, h2, h3, h4 { font-family: 'M PLUS Rounded 1c', sans-serif; } .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base, code, span.code { font-family: 'Source Code Pro', monospace; font-size: 0.90em; } .page-content { max-width: 950px; } .page-content a { font-weight: 700; } .page-content table { width: 100%; table-layout: auto; } .page-content table th { background-color: #DBDBDB; font-weight: 600; font-style: italic; border-right: 1px solid #F2F2F2; } .page-content table tr:nth-child(odd) { background-color: #F2F2F2; } .page-content code { color: #c54545; } .page-content h1 { font-size: 2.75em; border-bottom: 4px solid #5c6e77; width: 100%; display: inline-block; } .page-content h2 { font-size: 2em; padding-left: 5px; border-left: 4px solid #5c6e77; border-bottom: 2px dashed #bbc5ca; border-bottom-left-radius: 10px 10px; width: 100%; display: inline-block; } .page-content h3 { font-size: 1.5em; padding-left: 5px; border-left: 1px dashed #5c6e77; border-bottom: 1px dashed #bbc5ca; border-bottom-left-radius: 5px 5px; display: inline-block; } .page-content h4 { font-size: 1.25em; } </style> ```

OVERLORD closed this issue

2026-02-04 22:22:57 +03:00

OVERLORD commented

2026-02-04 22:23:02 +03:00

@ssddanbrown commented on GitHub (Sep 20, 2018):

So, In the markdown preview the code blocks are not rendered with codemirror at all, They are simply styled like code blocks (Which is the default if JavaScript is disabled) which is why your theme is not being used. You could make them look similar by overriding the relevant styles.

This is to reduce UI jumpiness and ensure performance as otherwise the CodeMirror instances would be re-created on markdown change (The MD preview is a simple render+overwrite, no diffing at the moment).

@ssddanbrown commented on GitHub (Sep 20, 2018): So, In the markdown preview the code blocks are not rendered with codemirror at all, They are simply styled like code blocks (Which is the default if JavaScript is disabled) which is why your theme is not being used. You could make them look similar by overriding the relevant styles. This is to reduce UI jumpiness and ensure performance as otherwise the CodeMirror instances would be re-created on markdown change (The MD preview is a simple render+overwrite, no diffing at the moment).

OVERLORD commented

2026-02-04 22:23:04 +03:00

@derek-shnosh commented on GitHub (Sep 20, 2018):

@ssddanbrown, any tips on which styles to override?

@derek-shnosh commented on GitHub (Sep 20, 2018): @ssddanbrown, any tips on which styles to override?

OVERLORD commented

2026-02-04 22:23:06 +03:00

@ssddanbrown commented on GitHub (Sep 20, 2018):

@derek-shnosh Think it's just basic pre styles, So something like the below (The :after is for the fake line-number sidebar). Unfortunately you won't be able to get pretty syntax highlighting.

.page-content pre {
	background-color: #292929;
	color: #EEE;
}
.page-content pre:after {
	background-color: #242424;
	border-right: 1px solid #000;
}

@ssddanbrown commented on GitHub (Sep 20, 2018): @derek-shnosh Think it's just basic `pre` styles, So something like the below (The `:after` is for the fake line-number sidebar). Unfortunately you won't be able to get pretty syntax highlighting. ```css .page-content pre { background-color: #292929; color: #EEE; } .page-content pre:after { background-color: #242424; border-right: 1px solid #000; } ```

OVERLORD commented

2026-02-04 22:23:08 +03:00

@derek-shnosh commented on GitHub (Sep 21, 2018):

@ssddanbrown thanks for getting back to me; going to let this one ride, I have other tasks and personal projects I need nitpick at the moment. ;)

@derek-shnosh commented on GitHub (Sep 21, 2018): @ssddanbrown thanks for getting back to me; going to let this one ride, I have other tasks and personal projects I need nitpick at the moment. ;)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#819