Customize the header render style(like h2:before prefix string) of the editing area

[dolt131943]

Describe feature

I want to change the header (h2,h3,h4,h5,h6) render style in editor. for example: I want to use cascading numbers ( 1.1.1.1.1) instead of "##","###","####","#####","######". but use AppTheme or AppCss can not change it .

I found that editor's header style is define in hard code :

src/public/app/widgets/type_widgets/read_only_text.js

src/public/app/widgets/type_widgets/editable_text.js

like：

 body.heading-style-markdown .note-detail-readonly-text h1::before { content: "#\\2004"; color: var(--muted-text-color); }
    body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
    body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
    body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
    body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
    body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }

And these are defined in the main area of editor element, so they override the ThemeCss or AppCss that load in top of file.

Thanks.

Additional Information

No response

[Nriver]

You can append !important to your style declarations in CSS to forcefully override other conflicting styles.

[dolt131943]

After consulting with front-end development experts, I found another workaround that could override the hard-coded style by positioning elements more precisely.

[dolt131943]

You can append !important to your style declarations in CSS to forcefully override other conflicting styles.

yes, thanks.🌹