hugo icon indicating copy to clipboard operation
hugo copied to clipboard

Add more markdown render hooks

Open Aerobird98 opened this issue 1 year ago • 3 comments

What i need is the <hr> element, to replace it with an inline svg which has a role="separator" on it like what Sarah did in this post.

I know that it is purely stylistic, but it seems trivial to implement since it does not need much context and useful to have, well i mean it could not hurt anyone to have it.

Also, it would be nice to customize lists with hooks. I mean the <ul> and <ol>. Font awesome has a nice usage for their icons as list markers documented over here.. It needs classes on both ul, ol as well as <li> elements, and icon spans before list item content.

I know that both of these could be more than easily be solved by using shortcodes (as i already solved them) but i do not want to, the whole point of having render hooks is that to have clean and readeable markdown that renders nice with content perfectly decoupled from code. I generaly do not like to use shortcodes (much). They are quite powerful, but with great power comes great responsibility so they quickly overcomplicate documents.

Is these good enough to consider? Also, i would like to know why do we have so few render hook kinds? Is there a reason to have only the ones currently supported? Is there plans to adding more?

Kind regards, Á.

Aerobird98 avatar Jan 31 '24 03:01 Aerobird98

Also, i would like to know why do we have so few render hook kinds? Is there a reason to have only the ones currently supported? Is there plans to adding more?

  • They're costly to implement (relatively).
  • They're relatively slow, so having them for "every element" in Markdown would not be a great situation.

So, for us to even consider it, it needs to be 1. Important enough and 2. Not having a simple workaround.

bep avatar Jan 31 '24 08:01 bep

@Aerobird98

Some of what you ask for is easily accomplished using markdown attributes; this article might be helpful.

config

[markup.goldmark.parser.attribute]
title = true # default is true; applies to h1-h6 elements
block = true # default is false; applies to other block-level elements

markdown

list
- one
- two
- three
{.my-class-a .my-class-b #my-id}

---
{.my-horizontal-rule #my-other-id}

name|age
:--|:--
Spot|3
Rover|5
{.my-class-foo #my-id-foo}

Hugo supports markdown attributes on images and block-level elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables.

jmooring avatar Jan 31 '24 15:01 jmooring

Yeah, that i know. Markdown attributes are indeed useful for styling, but what i realy need, is changing the html output directly.

For horizontal rules, how can i replace the <hr> element with an inline svg without using any javascript or css background image hack? That is the power of markdown hooks, it would let me change the output without sprinkling complicated hugo specific markup in my markdown.

For lists, yeah, i can add the classes to the ol and ul, but not the li, also doing that every time i need to style the list.. not so content creator friendly, markdown hooks are.

I tend to use attributes (and shortcodes) sparingly.

I already claimed that it is easily solvable, i solved both with shortcodes, they are fine, but feels ugly and unelegant, out of place, i need to remember their specialized markup, what classes to use etc.. but thanks anyway.

I still think that, more markdown hooks could be a fine enhancement for hugo, no other static site generators work like this (that i know of).

I stick to using shortcodes for the time being.

Thank you for the realy quick answers and help, Hugo is awesome!

Kind regards, Á.

Aerobird98 avatar Jan 31 '24 17:01 Aerobird98