This is what I have been using:
--text-title-h1: #5c6369;
--text-title-h2: var(--text-title-h1);
--text-title-h3: var(--text-title-h1);
--text-title-h4: var(--text-title-h1);
--text-title-h5: var(--text-title-h1);
--text-title-h6: var(--text-title-h1);
--font-size-h1: 1.9em;
--font-size-h2: 1.6em;
--font-size-h3: 1.3em;
--font-size-h4: 1.2em;
--font-size-h5: 1.1em;
--font-size-h6: 1em;
--header-before-color: #b1b4b8;
--header-before-size-h1: 0.5em;
--header-before-size-h2: 0.5em;
--header-before-size-h3: 0.5em;
--header-before-size-h4: 0.5em;
--header-before-size-h5: 0.5em;
--header-before-size-h6: 0.5em;
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-1,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-2,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-3 {
font-size: inherit;
}
.cm-header-1
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h1) !important;
color: var(--text-title-h1);
}
.cm-header-2
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h2) !important;
color: var(--text-title-h2);
}
.cm-header-3
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h3) !important;
color: var(--text-title-h3);
}
.cm-header-4
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h4) !important;
color: var(--text-title-h4);
}
.cm-header-5
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h5) !important;
color: var(--text-title-h5);
}
.cm-header-6
{
font-family: var(--font-family-editor);
font-weight: 500;
font-size: var(--font-size-h6) !important;
color: var(--text-title-h6);
}
.markdown-preview-view h1
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h1) !important;
color: var(--text-title-h1);
line-height: var(--line-height-header-preview);
text-align: left;
}
.markdown-preview-view h2
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h2) !important;
color: var(--text-title-h2);
line-height: var(--line-height-header-preview);
text-align: left;
}
.markdown-preview-view h3
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h3) !important;
color: var(--text-title-h3);
line-height: var(--line-height-header-preview);
text-align: left;
}
.markdown-preview-view h4
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h4) !important;
color: var(--text-title-h4);
line-height: var(--line-height-header-preview);
text-align: left;
}
.markdown-preview-view h5
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h5) !important;
color: var(--text-title-h5);
line-height: var(--line-height-header-preview);
text-align: left;
}
.markdown-preview-view h6
{
font-family: var(--font-family-mdpreview);
font-weight: var(--text-title-font-weight);
font-size: var(--font-size-h6) !important;
color: var(--text-title-h6);
line-height: var(--line-height-header-preview);
text-align: left;
}
h1:before {
content: "H1 ";
font-size: var(--header-before-size-h1);
color: var(--header-before-color);
}
h2:before {
content: "H2 ";
padding-left: 0.3em;
font-size: var(--header-before-size-h2);
color: var(--header-before-color);
}
h3:before {
content: "H3 ";
padding-left: 0.72em;
font-size: var(--header-before-size-h3);
color: var(--header-before-color);
}
h4:before {
content: "H4 ";
padding-left: 0.92em;
font-size: var(--header-before-size-h4);
color: var(--header-before-color);
}
h5:before {
content: "H5 ";
padding-left: 1.15em;
font-size: var(--header-before-size-h5);
color: var(--header-before-color);
}
h6:before {
content: "H6 ";
padding-left: 1.42em;
font-size: var(--header-before-size-h6);
color: var(--header-before-color);
}