markdown-it 如何順利使用 toc 在 hexo

  1. markdown-it 如何順利使用 toc 在 hexo
    1. 前情提到
    2. 設定 _config.yml
    3. 讓我繞了一圈的這些討論
    4. 修改 toc 文字
  2. 參考資料

markdown-it 如何順利使用 toc 在 hexo

這個文章標題有點難解釋。

首先，這是解決 hexo 的問題。(就是此 blog 產生器的問題)
但是，要改 markdown-it 渲染器才有的問題。
最後，這個問題是 我的 toc 都是 #undefined

前情提到

先前研究的文章中，有提到關於 markdown-it 在 _config.yml 的設定。[1]

設定 _config.yml

1
2
3
4
5
6
7
markdown:
  anchors:
    level: 1 # Minimum level for ID creation. (Ex. h2 to h6)
    collisionSuffix: 'v' # A suffix that is prepended to the number given if the ID is repeated.
    permalink: true # If true, creates an anchor tag with a permalink besides the heading.
    permalinkClass: header-anchor # Class used for the permalink anchor tag.
    permalinkSymbol: '¶' # The symbol used to make the permalink.

只要在 level 設定 1 就會從 1 到後面 (6) 的標題都會加上錨點。因為它是設定最小值，並不是最小標題。[2]

讓我繞了一圈的這些討論

無需安裝任何外掛程式，如下面列表

  • markdown-it-named-headings[3]
  • markdown-it-toc-and-anchor[4]
  • hexo-renderer-markdown-it-plus[4:1]
  • hexo-toc[5]

也不是「官方 markdown-it 好像拒绝实现这个功能，就是不渲染 heading 的 id 导致锚点失效」[6]

修改 toc 文字

因為修改了 _config.yml 讓標題加上 的偽元素。
所以 toc 的文字多了前綴，如圖

所以，要修改 module_package\hexo 套件。
找出 hexo\bin\plugins\helper\toc.js 檔案。

第 29 行改成這樣

29
var text = _.escape($(this).attr('id') || $(this).text());

即可相容舊的，也可以完美的去掉 。

參考資料

  1. Advanced Configuration ↩︎

  2. 根据 markdown 生成的 TOC 锚点的内容是 undefined #34 ↩︎

  3. Cannot render headings with ids? #40 ↩︎

  4. [TOC] anchor problem #4 ↩︎ ↩︎

  5. Content’s link show ‘undefine’ #11 ↩︎

  6. TOC锚点初始化失败？ #974 ↩︎

發表於 
tags:
  • { hexo }