permalink in anchors shouldn't be parsed by TOC helper

noraj commented 4 years ago

Issue / current behavior

Currently permalinks are added as a link inside the title, for example:

<h3 id="create-a-new-post">
  <a class="header-anchor" href="#create-a-new-post">#</a>
  Create a new post
</h3>

This will produce something like:

The problem is the permalink symbol will be part of the title.

So when you use, for example, the toc helper, the permalink symbol will be added in the title too.

<ol class="toc">
    <li class="toc-item toc-level-2"><a class="toc-link" href="#quick-start"><span class="toc-number">1.</span> <span class="toc-text">#Quick Start</span></a>
        <ol class="toc-child">
            <li class="toc-item toc-level-3"><a class="toc-link" href="#create-a-new-post"><span class="toc-number">1.1.</span> <span class="toc-text">#Create a new post</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#run-server"><span class="toc-number">1.2.</span> <span class="toc-text">#Run server</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#generate-static-files"><span class="toc-number">1.3.</span> <span class="toc-text">#Generate static files</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#deploy-to-remote-sites"><span class="toc-number">1.4.</span> <span class="toc-text">#Deploy to remote sites</span></a></li>
        </ol>
    </li>
</ol>

Idea of fixing / workaround

My workaround was to set a null symbol permalinkSymbol: '' and to add some css (sass here):

h1,h2,h3,h4,h5,h6 
  a::before
    content: '#'

So this display the same and is still clickable but there is no more content in the title.

Same look

No more issue with the toc helper

But I think it can't be fixed like this because this plugin only generates html, no css.

Alternative idea

Fix the toc helper to select only text content and not other sub-elements like links.

https://github.com/hexojs/hexo/issues/4057

Environment

Happening with both hexo: 4.2.0 and hexo: 4.1.1

curbengh commented 4 years ago

Currently permalinks are added as a link inside the title

I assume you enabled permalink? It's disabled by default in v4 (of this plugin).

markdown:
  anchors:
    permalink: true

The problem is the permalink symbol will be part of the title.

What is the expected behavior?

Show permalink symbol in heading, but not in toc?

noraj commented 4 years ago

I assume you enabled permalink? It's disabled by default in v4 (of this plugin).

Yeah I enabled permalink because I want them.

What is the expected behavior?

Show permalink symbol in heading, but not in toc?

Exactly. I see you confirmed the issue is coming from cheerio (https://github.com/hexojs/hexo-util/issues/174#issuecomment-573373405).

hexojs / hexo-renderer-markdown-it