Positioning heading numbers in markdown documents through CSS

[chrillek]

@vinschger

table of contents {{TOC}} with the same numbers

Do you mean with the same numbers that the CSS adds? Hardly. The TOC is generated as HTML by the MD processor. I’m fairly certain that it doesn’t look at the CSS when it does that.

[BLUEFROG]

@enricoscarpella

The ::marker pseudo-element seems to work with headings as long as I include in h1, for example, display: list-item, as I mentioned I had done in my opening post. So, again for example, if I use:

While you’re free to explore such options, you’re also free to watch them not work
I would not do this nor recommend it.

[enricoscarpella]

@chrillek: Thank you for the cautionary note on em vs. rem: I’ll keep that in mind. And thank you for pointing out the limited support Safari has for the ::marker pseudo-element — it seems only color and font size are currently supported…

@chrillek and @BLUEFROG: Thank you for your feedback on the use of ::before over that of ::marker for headings and. Indeed, I had only resorted to ::marker when I wasn’t able to achieve what I wanted by using ::before — but simply because I overlooked the possibility to set negative margins…

Thanks again to everybody.

[BLUEFROG]

@vinschger

Additionally, the ability to include multiple files with stylesheet codes for various purposes through transclusion is extremely beneficial. For example, using {{numberedheadings.md}} and {{largerheadings.md}} allows for easy adjustment of the current document’s style with pre-formatted styles as needed. This approach enables the use of a customized stylesheet while incorporating special formatting when necessary.

Do you have illustrations of this?

[vinschger]

I have created a MD document with the style for the numbered headings:

if I need numbered headings, I include it with transclusion (item link) into other MD documents (while still using the customized stylesheet as defined in the DTP markdown settings). This allows me to have one standardized customized stylesheet, and for specific documents quickly add different style elements as needed.

I could add additional styles via transclusion as needed.

With MacOS text replacement function I could define e.g. “countedheadings” to be replaced with {{x-devonthink-item://F883A083-CBD0-4AE8-AC57-FA8F13C026D9}} and define additional text replacements to include further styles from my repository via transclusion.

[BLUEFROG]

@vinschger

I include it with transclusion (item link) into other MD documents

This is confusing me… if that’s an item link to the stylesheet, it would just transclude the contents of the stylesheet, not apply it as a style.

[vinschger]

if you use this in the transcluded file it works on my side:

<!-- Styling -->
<style type="text/css">

</style>

At least for the example as in the screenshot it works smoothly here. Doesn’t it on your side?

[BLUEFROG]

An external stylesheet does not use the <style></style> elements.
So while that may work in this instance (and yes, I see it does), it is certainly non-standard.

Syntax for using styling is covered in the Documents > Markdown Documents section of the built-in Help and manual…

The XHTML Link is what is used in MultiMarkdown metadata.

[vinschger]

absolutely, this is the standard way of doing it.

[chrillek]

@BLUEFROG

An external stylesheet does not use the <style></style> elements.

They transclude an MD file that consists entirely of HTML code, namely an inline style. That would behave as if they were copying that code into the MD file.

[halloleo]

@BLUEFROG

Now updated and a bit more delicate to look at (and based on our DEVONtech color palette )…

Sorry, I must have missed it, but where is the CSS code for this beautiful styling?

[BLUEFROG]

Read this…

Positioning heading numbers in markdown documents through CSS

Here is the document, not a stylesheet. The styling is not complicated, but there are some CSS options I added for flexibility and to make it smarter. As I advocate very often, do the styling inside the document while learning or developing it. This is faster and simpler as you see the changes immediately upon saving, no styling is ever cached, and there is only one document to deal with. Once the styling is working as desired, you can copy the styling to an external stylesheet (whether stored…

[halloleo]

Ups, I overlooked the zip.

Great embedded styles! Thanks.

[BLUEFROG]

You’re welcome. And as noted, you can move the styles to an external stylesheet, as needed.