Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hexo-toc seems to disable "Automatic Headline ID's" feature of hexo-renderer-markdown-it #20

Open
oupala opened this issue Feb 18, 2018 · 5 comments

Comments

@oupala
Copy link

oupala commented Feb 18, 2018

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.

@oupala
Copy link
Author

oupala commented Feb 26, 2018

See also hexo-renderer-markdown-it issue tracker.

@noraj
Copy link

noraj commented May 10, 2018

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.

@noraj
Copy link

noraj commented May 10, 2018

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

@oupala
Copy link
Author

oupala commented May 23, 2018

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 blog@example.org</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?

@oupala
Copy link
Author

oupala commented Nov 26, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants