Set EasyMDE heading font-size to the same size as the resulting markdown (#24151)

Fix #23816

According to my personal experience, the EasyMDE is still useful when
writing a lot of contents, eg: the wiki page.

It's not difficult to improve its heading styles, so let's make it.

Before:

<img width="815" alt="image"
src="https://user-images.githubusercontent.com/2114189/232280943-9177f0bc-e380-426f-8588-20ff8d8e5293.png">

After:

<img width="538" alt="image"
src="https://user-images.githubusercontent.com/2114189/232280903-e8c476ee-f5b1-48fe-8a93-86fcd79680c3.png">
This commit is contained in:
wxiaoguang 2023-04-16 20:01:08 +08:00 committed by GitHub
parent 1af3dc6ee3
commit 0e05984667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 0 deletions

View File

@ -44,6 +44,31 @@
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
} }
/* use the same styles as markup/content.css */
.combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
font-size: 2em;
}
.combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
font-size: 1.5em;
}
.combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
font-size: 1.25em;
}
.combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
font-size: 1em;
}
.combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
font-size: 0.875em;
}
.combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
font-size: 0.85em;
}
text-expander { text-expander {
display: block; display: block;
position: relative; position: relative;