From 0e059846670190f0a2f4935fb74b2159e2d80181 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 16 Apr 2023 20:01:08 +0800
Subject: [PATCH] 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">
---
 web_src/css/editor-markdown.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css
index 7d6c36635d..eb5c5d13b8 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -44,6 +44,31 @@
   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 {
   display: block;
   position: relative;