Hello! Thank you very much for providing such an excellent editor!
In markdown mode, I want to highlight code blocks. My code is as shown in the figure, but I found a problem. When initializing the editor, I assigned a long text to the doc attribute. Then, when the page first enters or refreshes, the editor does not parse the text into code blocks, so the code blocks are not highlighted. But when I click on the editor to enter the content, the editor will parse the content again.
This is my HTML file for getting an initialized text
<textarea name="" id="" cols="30" rows="10" style="display: none;">
```jsx
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
const H1 = <h1>dsfsdf</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
```
This is the file to initialize codemirror, get the contents of textarea above, and assign it to doc attribute
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
EditorState.create({
doc: document.querySelector('textarea').value,
extensions: [
markdown({
base: markdownLanguage,
codeLanguages: languages
})
]
});
This is a GIF picture I recorded
(The page is not parsed for the first time, but parsed after input)