Header formatting inside a list in editor

[efemkay]

Use case or problem

• When in editor mode, if I have header in a list, the formatting does not apply. But it does apply in preview/reading view mode.
• I believe this feature request has been mentioned in Discord appearance (discord.com) but I don’t see it here. sorry if there’s already this feature request here - if so we can close this one.
• Now that we have Live Preview mode, i think it’s quite a key feature to have. (I intend to always stay in Live Preview mode most of the time)

Proposed solution

• The Markdown syntax supports headers inside of list items but the default edit mode parser does not render them.
  • reference: nothingislost/obsidian-codemirror-options: Obsidian plugin with options to customize the behavior of CodeMirror (github.com)

Current workaround (optional)

Related feature requests (optional)

• here’s somewhat related feature request, but I think it was more for searching? Headings inside bullets - Feature requests - Obsidian Forum

[james1294]

Any progress / workaround for this since you posted?

[james1294]

I think I figured it out, but have only tested it for a minute. To change bulleted H3 for example, try this css

h3, .markdown-rendered h3, .HyperMD-header-3, .HyperMD-list-line .cm-header-3 {
    color: #7CBEBE;
}

---

In order to combine styles with the unbulleted headers, this seems to work well for me

h1, .markdown-rendered h1, .HyperMD-header-1, .HyperMD-list-line .cm-header-1, .markdown-preview-view h1 {
  font-size: 1.5025em;
  color: #C1C6B6;
  font-weight: 400 !important;
}

h2, .markdown-rendered h2, .HyperMD-header-2, .HyperMD-list-line .cm-header-2, .markdown-preview-view h2 {
  font-size: 1.3975em;
  color: #A8C2A7;
  font-weight: 550 !important;
}

h3, .markdown-rendered h3, .HyperMD-header-3, .HyperMD-list-line .cm-header-3, .markdown-preview-view h3 {
  font-size: 1.2125em;
  color: #7CBEBE;
  font-weight: 550 !important;
}

h4, .markdown-rendered h4, .HyperMD-header-4, .HyperMD-list-line .cm-header-4, .markdown-preview-view h4 {
  font-size: 1.1075em;
  color: #99B6DC;
  font-weight: 400 !important;
}

h5, .markdown-rendered h5, .HyperMD-header-5, .HyperMD-list-line .cm-header-5, .markdown-preview-view h5 {
  font-size: 1.0025em;
  color: #D4CFF1;
  font-weight: 400 !important;
}

h6, .markdown-rendered h6, .HyperMD-header-6, .HyperMD-list-line  .cm-header-6, .markdown-preview-view h6 {
  font-size: 0.9075em;
  color: #A37BBA;
  font-weight: 400 !important;
}

[efemkay]

yeah. this been updated quite a while ago (forgot which obsidian version it was). and i’ve been using headers in list so religiously since. so i’m gonna mark this as closed.

fyi (for others who stumble upon this), obsidian v1.0.x has streamlined the classes for headers (both in normal text as well as in lists) together with default css variables to change that, so i only need the following to affect both (normal and in lists).

i’m sharing example for h1-h3 only but it can apply for all headers.

    body {
        /* these are obsidian app.css variables */
        --h1-font: Courgette;
	--h2-font: Courgette;
	--h3-font: 'Karla';

	--h1-size: 1.60rem;
	--h2-size: 1.48rem;
	--h3-size: 1.36rem;

	--h1-weight: 600;
	--h2-weight: 600;
	--h3-weight: 600;

    .theme-light {
	--h1-color: #224244;
	--h2-color: #4e687e;
	--h3-color: #8d9db6;
    }

    .theme-dark {
	--h1-color: #ddedee;
	--h2-color: #bccad6;
	--h3-color: #8d9db6;
    }