The header_ids option generates very difficult html to style

[ericarthurc]

Using the .extension.header_ids method on ComrakOptions produces some very interesting Html that is difficult to target with css for styling if I only want to target a specific header by the specific id.

The rust code:

options.extension.header_ids = Some(String::from(""));

The markdown:

### Eric Christensen 

The HTML:

<h3>
  <a href="#eric-christensen" aria-hidden="true" class="anchor" id="eric-christensen"></a>
  "Eric Christensen"
</h3>

So when you turn on header_ids, it places an empty <a> tag inside the headers. So if I want to target the <h3> text in css by the id I have to use, something like below which uses the :has() psuedo-class; and this is not fully supported on all browsers, and requires the latest versions of Chromium

h3:has(> #eric-christensen) {
  color: red;
}

It would be better if the id was just rendered on the header tag itself like:

<h3 id="eric-christensen">
  "Eric Christensen"
</h3>

[kivikakk]

Hi Eric, thanks for opening this issue!

As it happens, I totally agree with you — it's very convoluted HTML. This extension moreorless exists solely to provide compatibility with GitHub's own generation of header IDs. Of course, they've continued to change their product, but it's still relatively close, if you ignore all the SVG:

-comrak
-<h3><a href="#mac--linux-binaries" aria-hidden="true" class="anchor" id="user-content-mac--linux-binaries"></a>Mac &amp; Linux Binaries</h3>
+<h3 dir="auto"><a id="user-content-mac--linux-binaries" class="anchor" aria-hidden="true" href="#mac--linux-binaries"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Mac &amp; Linux Binaries</h3>
+github

I'd be happy to accept PRs that made the generated HTML easier to work with, like your suggestion, and perhaps relegate this output to a GitHub-compatibility mode — maybe even only enabling it when --gfm is specified, even.