When using jekyll-toc, HTML entities are rendered verbatim

I have a content file that is HTML (as opposed to markdown). I am using soft hyphens for some words that the CSS hyphenation misses.

I am also using the jekyll plugin jekyll-toc to automatically generate tables of contents.

Take the German word “EU-Daten­schutz­grund­ver­ordnung”, for example. With appropriately placed soft hyphen entities, it looks like this: EU-Daten&shyschutz&shygrund&shyver&shyordnung

When I render the page without using jekyll-toc, it works fine.

Within the following, however

layout: default
robots: noindex
    <div id="table-of-contents">
        <a class="anchor" id="toc" aria-hidden="true"><span></span></a>
        <h1>{{ page.title }}</h1>
      {{ content | toc_only }}
    <div id="markdown-content">
      {{ content | inject_anchors }}

jekyll will render the HTML so that it appears verbatim.

The rendered output looks like this:

And the HTML looks like this:

Is there any way to prevent this?

This turned out to have a simple fix. While some HTML entities can be used without a trailing semicolon, GitHub markdown does not allow them:

Although HTML5 does accept some entity references without a trailing semicolon (such as &copy), these are not recognized here, because it makes the grammar too ambiguous:

Example 324

Simply writing Daten&shy;schutz&shy;grund&shy;ver&shy;ord&shy;nung results in properly formatted HTML.