TOC: add Hexo sulgifyMode

lvhejin commented 1 year ago


- [PPP:abc](#pppabc)
- [P-p:你好](#p-p你好)

## PPP:abc
## P-p:你好

Hello, after the directory is generated, the capital title becomes smaller? And the colon ":" is gone?

yzhang-gh commented 1 year ago

TOC 的链接的作用是跳转到对应的章节，() 中的部分就是该章节的 id。不同的地方生成章节 id 的方法不同，你需要改变 toc.slugifyMode 来保持与 VS Code 或 GitHub 等等的兼容性。

lvhejin commented 1 year ago

@yzhang-gh 你好，在哪里修改toc.slugifyMode这个配置？配置文件在哪里？

lvhejin commented 1 year ago

@yzhang-gh 找到了，谢谢

lvhejin commented 1 year ago

@yzhang-gh 你好，这6种模式，都试过了，冒号“:”还是被过滤掉了，大写字母自动变成小写字母。有没有自定义的方式，不让程序过滤掉？

yzhang-gh commented 1 year ago

不太理解为什么需要修改这里，改了基本就失去链接的功能了。如果你不需要链接，可以选择上图中出现的 toc.plaintext 选项

lvhejin commented 1 year ago

@yzhang-gh 你好，我的博客用的Hexo，然后使用vsCode写md（安装了Markdown All in One插件，功能非常好用，目前只发现自动生成TOC不支持Hexo），发布后生成的HTML描记链接失效。

MD源文件：

**Markdown All in One  自动生成的目录TOC，<mark>导出HTML后描记链接失效</mark>**

- [TOC测试](#toc测试)
  - [ABC](#abc)
  - [A-B:C](#a-b-c)
  - [A：Bc](#a-bc)

**手工写的目录TOC，<mark>导出HTML后描记链接正常</mark>**

- [TOC测试](#TOC测试)
  - [ABC](#ABC)
  - [A-B:C](#A-B:C)
  - [A：Bc](#A：Bc)

# TOC测试

## ABC

## A-B:C

## A：Bc

<div style="height: 2000px;"></div>

生成HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>      
</head>
<body>
  <article class="markdown-body"><p><strong>Markdown All in One  自动生成的目录TOC，<mark>导出HTML后描记链接失效</mark></strong></p>
<ul>
<li><a href="#toc%E6%B5%8B%E8%AF%95">TOC测试</a><ul>
<li><a href="#abc">ABC</a></li>
<li><a href="#a-b-c">A-B:C</a></li>
<li><a href="#a-bc">A：Bc</a></li>
</ul>
</li>
</ul>
<p><strong>手工写的目录TOC，<mark>导出HTML后描记链接正常</mark></strong></p>
<ul>
<li><a href="#TOC%E6%B5%8B%E8%AF%95">TOC测试</a><ul>
<li><a href="#ABC">ABC</a></li>
<li><a href="#A-B:C">A-B:C</a></li>
<li><a href="#A%EF%BC%9ABc">A：Bc</a></li>
</ul>
</li>
</ul>
<h1 class="atx" id="TOC测试">TOC测试</h1>
<h2 class="atx" id="ABC">ABC</h2>
<h2 class="atx" id="A-B:C">A-B:C</h2>
<h2 class="atx" id="A：Bc">A：Bc</h2>
</article>
<div style="height: 2000px;"></div>
</body>
</html>

yzhang-gh commented 1 year ago

这下就清楚了，hexo 用了它独有的生成章节 id 的函数（可选大小写），实现方式在 https://github.com/hexojs/hexo-util/blob/master/lib/slugize.ts

为了提供兼容性可以在我们这里加一个 hexo 的 slugifyMode

lvhejin commented 1 year ago

@yzhang-gh 非常感谢，在slugifyMode中加入hexo，让“Markdown All in One插件”的功能越来越完善、强大。加完后方便通知我一下吗？我好去升级插件

yzhang-gh commented 1 year ago

考虑到我平时没有精力实现，目前只能等待社区的帮助。不过只要有人解决了，就立刻可以安装开发版使用

lvhejin commented 1 year ago

又发现一个问题，估计和这个问题和Hexo生成html是一个模块的问题，所以就把这个问题写到这里了。问题如下： 1、输入命令：Print current document to HTML，生成是HTML中的“A：Bc”描记链接失效。

MD源文件：

**Markdown All in One  自动生成的目录TOC，<mark>导出HTML后描记链接失效</mark>**

- [TOC测试](#toc%E6%B5%8B%E8%AF%95)
  - [ABC](#abc)
  - [A-B:C](#a-bc)
  - [A：Bc](#abc-1)
  - [123](#123)

# TOC测试

## ABC

## A-B:C

## A：Bc
## 123

<div style="height: 2000px;"></div>

生成HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TOC&#x6d4b;&#x8bd5;</title>
</head>

<body class="vscode-body vscode-light">
    <p><strong>Markdown All in One 自动生成的目录TOC，<mark>导出HTML后描记链接失效</mark></strong></p>
    <ul>
        <li><a href="#toc%E6%B5%8B%E8%AF%95">TOC测试</a>
            <ul>
                <li><a href="#abc">ABC</a></li>
                <li><a href="#a-bc">A-B:C</a></li>
                <li><a href="#abc-1">A：Bc</a></li>
                <li><a href="#123">123</a></li>
            </ul>
        </li>
    </ul>
    <h1 id="toc%E6%B5%8B%E8%AF%95">TOC测试</h1>
    <h2 id="abc">ABC</h2>
    <h2 id="a-bc">A-B:C</h2>
    <h2 id="abc">A：Bc</h2>
    <h2 id="123">123</h2>
    <div style="height: 2000px;"></div>
</body>

</html>

yzhang-gh / vscode-markdown

TOC: add Hexo sulgifyMode #1248