First of all, thank you very much for this project as well as jekyll-TOC, your work is excellent and just filling the gap that is missing in jekyll for GH-Pages.

When having an anchor in headings and using %heading% in anchorTitle, the generated HTML breaks.

Markdown

### The [`match`](#match) Expression

Snippet Usage

{% include anchor_headings.html
  beforeHeading=false
  h_min=2
  html=content
  anchorClass="permalink icon-link"
  anchorBody=""
  anchorTitle="Permalink for '%heading%'"
%}

Expected HTML

<h3 id="the-match-expression">
    The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression
    <a href="#the-match-expression" class="permalink icon-link" title="Permalink for 'The match Expression'"></a>
</h3>

Actual HTML

<h3 id="the-match-expression">
    The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression
    <a href="#the-match-expression" class="permalink icon-link"
        title="Permalink for 'The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression'">
    </a>
</h3>

Notes

To fix this, I added | strip_html in line 111 for if include.anchorTitle:

{% if include.anchorTitle %}
  {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header | strip_html }}"{% endcapture %}
{% endif %}

I am not firm with liquid, I have had this issue only with anchorTitle, but maybe this will pop up elsewhere as well.

The <hr> tag (and possibly other HTML tags starting with "h") is butchered.

All that is left turns out the be a sad and lonely

r />

:(

If headings don't have an ID (creating manually with raw HTML), an anchor shouldn't be generated for them.

Hey, @allejo .

I'm gonna switch to your package for Bootstrap. While at it, I noticed we could use an optional element wrapping support for the a tags.

Do you think this would be possible without too many changes?

Thanks in advance!

/CC @MartijnCuppens

I don't have any confidence, but it seems to me that > should be added to the end of this line. When I open this source, my editor warns me that there is no >.

@allejo: after making the switch I just noticed that the only way to limit the target anchors is their header level.

Do you think it would be possible to add a parent class as a limit, like .content > h2?

Example: https://twbs-bootstrap4.netlify.com/docs/4.1/utilities/image-replacement/#warning

No big deal if it's hard to add such feature, we'll use JS or CSS to handle this, but I thought I'd ask :)

/CC @MartijnCuppens

Hey,

Great plugin. Very useful for a JS-free solution.

I was wondering if it was possible to add Aria support, or to pass along custom attributes?

I'm finding that screenreaders can take a lot longer to read out with an extra anchor after each header. I think it'd be easier to mark them as aria-hidden="true", or find another role to deemphasize them.

I'm not seeing how I'd pass this along without editing the script file itself though. Would you consider making an attribute for aria, or accepting arbitrary attributes+values?

Thanks!

My Markdown

<header>
  <h1 id="goodbye-world">Goodbye World</h1>
  <p>some header text</p>
</header>

Snippet Usage

{% capture markdown %}
<header>
  <h1 id="goodbye-world">Goodbye World</h1>
  <p>some header text</p>
</header>
{% endcapture %}
{% assign text = markdown | markdownify %}

<div>
{% include anchor_headings.html html=text %}
</div>

Expected HTML

<div>
  <header>
    <h1 id="goodbye-world">Goodbye World <a href="#goodbye-world"></a></h1>
    <p>some header text</p>
  </header>
</div>

Actual HTML

<div>
<header>
      <h1 id="goodbye-world">
        
        
          Goodbye World <a href="#goodbye-world"></a>
        
        
      </header>

</div>

Notes

Various Jekyll themes use this pattern of HTML for posts in blogs – even Minima. The test for the fix for issue #13 doesn't include nested elements.

Similar to how jekyll-toc works, allow users to restrict the range of headings that will have anchors generated for them. e.g. Don't generate anchors for <h3> and below.

My Markdown

---
title: Getting started
layout: en

---

This is a very short guide to using Travis CI with your GitHub hosted code repository.
If you're new to continuous integration or would like some more information on
what Travis CI does, start with [Core Concepts for Beginners](/user/for-beginners)
instead.



## Prerequisites

To start using Travis CI, make sure you have *all* of the following:

Snippet Usage

{% include toc.html h_min=2 h_max=2 class="list-language" santize=true  html=content %}

Expected HTML

This is a very short guide to using Travis CI with your GitHub hosted code repository. If you’re new to continuous integration or would like some more information on what Travis CI does, start with Core Concepts for Beginners instead.

Prerequisites

To start using Travis CI, make sure you have all of the following:

Actual HTML

Prerequisites

To start using Travis CI, make sure you have all of the following:

Notes

Write here.

Hi. After the solution in issue #29, again a new accessibility issue https://web.dev/aria-hidden-focus/. I use the headings ID only for a few posts to create a Table of Contents. Is there a way to edit the code to retain the ID but remove the <a></a> link?

Description

Now that IDs are parsed also in HTML files, it would be super useful to exclude some headings with a specific class.

Sample Usage
<h3 class='exclude'>Heading to exclude</h3> won’t have any ID generated.

I am getting this accessibility error "Links do not have a discernible name" for all links created from headings (you can try testing a post from your test site using web.dev). Would you consider correcting it to address the issue? https://web.dev/link-name/?utm_source=lighthouse&utm_medium=lr

My Markdown HTML

Some text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples</h2>

Snippet Usage

{% include anchor_headings.html html=content %}

Expected HTML

Some text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples <a href="#examples"></a></h2>

Actual HTML

<hSome text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples <a href="#examples"></a></h2>

Notes

Reported by the @sfzformat team

THANK YOU!

Really! For the simplicity of your idea, for addressing this issue, for making it available for others. I will definitively mind your Sponsor button, eheh.

Keep on the good work,
and thnks!