vscode-markdown-pdf icon indicating copy to clipboard operation
vscode-markdown-pdf copied to clipboard

ToC broken because of underscore

Open lufinima opened this issue 6 years ago • 5 comments

When an underscore is used in a header, the table-of-content link will not be generated properly in pdf or html.

Using: - [Section print\_forms](#section-print_forms) or - [Section print_forms](#section-print_forms)

In ToC the link will not work.

In the html source the id seems to be generated incorrectly <h1 id="section-printforms">Section print_forms</h1> or <h1 id="section-printforms">Section <code>print_forms</code></h1>

Apparently if i change the id to "section-print_forms" seems to fix the issue

lufinima avatar Apr 20 '18 00:04 lufinima

Same issue here, + not only the underscores break the ToC but also letters with accents like "é" In the html the links seem to be correctly genereted but the id of the divs they refer to are broken (URI format ?) E.g. <h3 id="base-de-donn%C3%A9es">Base de données</h3>

Ashe-ashe avatar May 03 '18 14:05 Ashe-ashe

Issue For what I could gather, anything that is part of the table of content that contains characters that get exported as a %xx encoded character in the source html file will break their links.

There are probably other examples, but here is a significant sample.

Repro Use the following markdown headers, generate the ToC. The links work in MD and VSCode preview.

Export to html and pdf will have the links for breaking example not working

Repro ToC Generation issue

  1. Repro TOC Generation issue
    1. Examples that work
      1. ç
      2. Á
    2. Breaking Examples
      1. Colon: breaks
      2. Arabic مرحبا يا عالم
      3. ⚠️ Unicode Misc symbol

Examples that work

ç

Á

Breaking Examples

Colon: breaks

Arabic مرحبا يا عالم

⚠️ Unicode Misc symbol

FDerudderVL avatar May 09 '18 09:05 FDerudderVL

+1 In the generated html file(I assume that this tool first convert markdown to html and then convert the html to pdf), it appears that the id attribute of the header attributes such as <h1> does'not contain the symbol _ (maybe some check during the renderring?)

For those who want the feature right now, you can manually add _ in the id attribute and convert it to pdf...

eggachecat avatar Aug 21 '18 06:08 eggachecat

This is a really old issue but please consider a fix. While the @eggachecat solution is helpful, generating the PDF in Chrome doesn't work well with multi-page Mermaid flowcharts.

ann--b avatar Mar 15 '24 20:03 ann--b

I've faced the same issue. It may be caused by the following line.

https://github.com/yzane/vscode-markdown-pdf/blob/1.5.0/extension.js#L307

After removing \_ from this line, I could confirm each section in .html modified to such as <h2 id="foo_bar"> from <h2 id="foobar"> (Please reload VSCode after this modification)

- .replace(/[\]\[\!\'\#\$\%\&\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~\`。,、;:?!…—·ˉ¨‘’“”々~‖∶"'`>|〃〔〕〈〉《》「」『』.〖〗【】()[]{}]/g, '') // Remove known punctuators
+ .replace(/[\]\[\!\'\#\$\%\&\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\{\|\}\~\`。,、;:?!…—·ˉ¨‘’“”々~‖∶"'`|〃〔〕〈〉《》「」『』.〖〗【】()[]{}]/g, '') // Remove known punctuators

Of course this can be applied for other symbols (unintentionally) regarded as punctuators.

mdj982 avatar Apr 22 '24 01:04 mdj982