bubkoo
hexo-toc seems to disable "Automatic Headline ID's" feature of hexo-renderer-markdown-it
I'm using hexo with hexo-renderer-markdown-it plugin to get a better markdown renderer.
I also use hexo-toc to get tocs on my posts.
When I'm using both of them, the Automatic Headline ID's feature does not work as expected.
I expect each header to be rendered as:
<h3 id="create-a-new-post"><a class="header-anchor" href="#create-a-new-post">¶</a>Create a new post</h3>
and headers are rendered as:
<h3><span id="create-a-new-post">Create a new post</span></h3>
I can make further tests, but I need help to find out where does this behaviour comes from.
It works with the following config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki/
markdown:
render:
linkify: true
html: true
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: false # 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
# TOC config
## https://github.com/bubkoo/hexo-toc
toc:
maxdepth: 6
class: toc
anchor:
position: after
symbol: '¶'
style: header-anchor
<h2><span id="team">Team</span><a href="#team" class="header-anchor">¶</a></h2>
You can't have both permalink from hexo-renderer-markdown-it and anchor from hexo-toc.
With the following config hexo-toc generate anchor for h1 even if Markdown-it said minimum level level: 2. I think hexo-toc totally ignore markdown-it config and so can generate conflict with it.
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki/
markdown:
render:
linkify: true
html: true
anchors:
level: 2 # 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: false # 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
# TOC config
## https://github.com/bubkoo/hexo-toc
toc:
maxdepth: 6 # Use headings whose depth is at most maxdepth
class: toc # The CSS Class for the toc
anchor:
position: after # Where should the anchor be, before the title, or after the title
symbol: '🔗' # Which symbol you want the anchor be
style: header-anchor # The CSS class for the anchor
I tried to use the config you used, and which is supposed to work. But it doesn't work on my blog.
Here is my _config.yml file:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: just a title
subtitle:
description: a simple blog
author:
language: fr
timezone: Europe/Paris
# redirections
include:
- .htaccess
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.example.org
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 1
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: DD-MM-YYYY
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
linkify: true
html: true
anchors:
# Minimum level for ID creation. (Ex. h2 to h6)
level: 1
# A suffix that is prepended to the number given if the ID is repeated.
collisionSuffix: 'v'
# If `true`, creates an anchor tag with a permalink besides the heading.
permalink: false
# Class used for the permalink anchor tag.
permalinkClass: header-anchor
# The symbol used to make the permalink
permalinkSymbol: '¶'
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: bootstrap-blog
theme_config:
# Header
navbar_brand: false
menu:
accueil: index.html
archives: archives/
rss: /atom.xml
# Content
excerpt_link: Read More
fancybox: true
# Sidebar
widgets:
- tagcloud
- archive
- about # See also: `about_content`
about_widget_content: >
<p>to contact me, send an email to [email protected]</p>
# widget behavior
archive_type: 'monthly'
show_count: true
# Miscellaneous
google_analytics:
favicon:
twitter_id:
google_plus:
fb_admins:
fb_app_id:
# table of content
toc:
maxdepth: 6
class: toc
anchor:
position: after
symbol: '¶'
style: header-anchor
# RSS feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content: true
# Server
server:
port: 8080
alias:
2015/05/03/old-post/: 2015/10/03/new-post/
partie-1/
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
Do you have any idea about the reason is doesn't work for me? Can you reproduce my bug?
As there is no answer from this repo maintainer and as this repo seems to be not maintained any more, I will try to dive into the code and to fix this bug. Any help is welcomed.
I also tried a workaround (see issue #24) pointed by @noraj but it is just a workaround that require a modification of each theme. Besides, I think that such feature should not rely on the theme, but on the blog engine and plugins.