Remove mark style text from outline

[hiq]

Hey, I would like to know if there is a way to remove this stuff from outline. I use mark style on my heading and it goes to outline too.

[FireIsGood]

I’m not sure if it’s possible to fix the outline issue since it reads the text out directly, but you could probably move the styles to affect headers.

It’s generally a bad idea to use a <span> element with styles directly added, you would have a better time using a class. That would be like switching from <span style="background-color: red;"> to <span class="background-red"> with the styles in a snippet. This would let you change all of them at once or use CSS variables like var(--color-red)

In this case, though, you would want to just style your headers if that’s what you wanted to affect in every case:

.HyperMD-header-1, h1 {
  background-color: red;
}

Replace the contents with the background styles you want.

Example:

Live Preview vs Preview

From the text of:

# h1

## h2

## h2

### h3

#### h4

##### h5

###### h6

paragraph

[hiq]

Thank you! The result doesn’t turn out exactly like the Highlightr plugin, but I actually found it even better. Just out of curiosity, would it be possible to make all the heading 2 “highlighted” with the style of Highlightr?

[FireIsGood]

Ah, I forgot to put on a width: fit-content on the h1 style. You can copy the Highlightr styles if you copy the declarations with the inspector and put them on the corresponding header.

I copied the styles by simply inspecting the <mark> element after enabling the Highlightr plugin and removing unnecessary declarations.

Here’s an example using the ‘realistic’ style on h2:

.HyperMD-header-1, h1 {
  background-color: red;
}
.HyperMD-header-2, h2 {
  background-color: blue;
  width: fit-content;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
}

Images

[hiq]

Thank u very much, that is exactly what I was looking for
Have a great day!

[hiq]

So, in Reading view is perfect:

but when I’m in edit mode, the width: fit-content; and padding: 0.1em 0.4em; don’t work, do u know why?

[FireIsGood]

Ah, it seems to be an issue with the Minimal theme. It seems that if you change the selector from .HyperMD- to .cm- it will work better in editing mode, but also not span the full width.

Switching both to use .cm-header- looks as following on the default theme:

.HyperMD- vs .cm-

Switching both to use .cm-header- looks as following on the minimal theme:

.HyperMD- vs .cm-

From this I conclude that we have reached a certified Minimal Moment™ and fixing it involves changing the selector for editing mode.

The .cm- change would be good on the h2 element, but maybe not so much for the h1 element. With that in mind, I would say to just edit the second one.

.HyperMD-header-1, h1 {
  background-color: red;
}
.cm-header-2, h2 {
  background-color: blue;
  width: fit-content;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
}

Images

Editing Mode:

Minimal

Default

Reading Mode:

Minimal

Default

[hiq]

Thank you, it’s better this way. I definitely need to learn how to create my own theme using snippets.