hexojs/hexo-renderer-markdown-it

permalink in anchors shouldn't be parsed by TOC helper

Closed this issue · 2 comments

noraj commented

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:

image

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.

image

<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

image

No more issue with the toc helper

image

image

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

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

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 (hexojs/hexo-util#174 (comment)).