How to generate correct Fragment identifier in Jekyll/Kramdown?

Question

I'am using Jekyll with the Minimal Mistakes template and facing a problem with the fragment header generation.

Here is an example..

If you put a header into your *.md page like:

## Fuß- und Radentscheid?

you get this in you final html:

<h2 id="fuß--und-radentscheid">Fuß- und Radentscheid?</h2>

Note that the Fragment identifier was added.

Now I want to set a link that points to this ID:

- [Fuß- und Radentscheid?](#{{ "Fuß- und Radentscheid?" | slugify: "raw" }})

## Fuß- und Radentscheid?

Using the slugify function I try to generate the correct string that matches the one in the fragment identifier.

But Jekyll (or maybe Kramdown) generates that from it:

<ul>
  <li><a href="#fuß--und-radentscheid?">Fuß- und Radentscheid?</a></li>
</ul>

<h2 id="fuß--und-radentscheid">Fuß- und Radentscheid?</h2>

Please note that the question sign is still present in the anchor href.

I've tried all the Slugify options and some combinations with other Liquid filters, but can't find one that generates the same string as the header fragment ID.

I know its easy to work around via delete or replace the question sign but I want to have a solid solution for putting any string in and get the same result as in the automatic generated fragment identifier.

Edit:

Another example:

[foobar?](#{{ "Foo- bar" | slugify  }})

## Foo- bar

generates:

<p><a href="#foo-bar">foobar?</a></p>

<h2 id="foo--bar">Foo- bar</h2>

andrea m. · Answer 1 · 2022-04-29T15:58:43.487

The first question mark in an URL is a reserved character that is interpreted as a separator. It separates the page URL with parameters that are (usually) interpreted at the server-side.

For this reason, I would not want to have question marks in an URL, and it's not clear from your question what exactly you want to achieve, but if you want consistency the best option is probably to avoid using markdown and stick to straight HTML.

While I would not recommend it, I believe what you want can be achieved as follows:

{{ assign slugified = "Fuß- und Radentscheid?" | slugify: "raw" }}

<ul>
  <li><a href="#{{ slugified }}">{{ slugified }}</a></li>
</ul>

<h2 id="{{ slugified }}">Foo- bar</h2>

I would even venture trying this for the link but I find md a bit unpredictable (mostly 'cause I don't know well its rules) so I am not sure it will work

- [{{ slugified }}](#{{ slugified }})

Thank you for your answer. I would like to know/use the exact same function that ist used to build the slugify-ed url. Please take a look at my second example where no question mark is present. — row, Apr 29 '22 at 12:59

How to generate correct Fragment identifier in Jekyll/Kramdown?

1 Answers1