Merge pull request #172 from curbengh/custom-anchor

feat: anchorAlias option to set custom header id

README.md

@@ -29,6 +29,7 @@ marked:
   smartypants: true
   quotes: '“”‘’'
   modifyAnchors: 0
+  anchorAlias: false
   autolink: true
   mangle: true
   sanitizeUrl: false
@@ -59,6 +60,9 @@ marked:
   * This is to obscure email address from _basic_ crawler used by spam bot, while still readable to web browsers.
 - **sanitizeUrl** - Remove URLs that start with `javascript:`, `vbscript:` and `data:`.
 - **headerIds** - Insert header id, e.g. `<h1 id="value">text</h1>`. Useful for inserting anchor link to each paragraph with a heading.
+- **anchorAlias** - Enables custom header id
+  * Example: `## [foo](#bar)`, id will be set as "bar".
+  * Requires **headerIds** to be enabled.
 - **lazyload** - Lazy loading images via `loading="lazy"` attribute.
 - **prependRoot** - Prepend root value to (internal) image path.
   * Example `_config.yml`:

index.js

@@ -15,6 +15,7 @@ hexo.config.marked = Object.assign({
   mangle: true,
   sanitizeUrl: false,
   headerIds: true,
+  anchorAlias: false,
   lazyload: false,
   // TODO: enable prependRoot by default in v3
   prependRoot: false,

lib/renderer.js

@@ -6,6 +6,7 @@ const { encodeURL, slugize, stripHTML, url_for, isExternalLink } = require('hexo
 const MarkedRenderer = marked.Renderer;
 const MarkedTokenizer = marked.Tokenizer;
 const { basename, dirname, extname, join } = require('path').posix;
+const rATag = /<a(?:\s+?|\s+?[^<>]+\s+?)?href=["'](?:#)([^<>"']+)["'][^<>]*>/i;
 
 const anchorId = (str, transformOption) => {
   return slugize(str.trim(), {transform: transformOption});
@@ -20,7 +21,7 @@ class Renderer extends MarkedRenderer {
 
   // Add id attribute to headings
   heading(text, level) {
-    const { headerIds, modifyAnchors } = this.options;
+    const { anchorAlias, headerIds, modifyAnchors } = this.options;
     const { _headingId } = this;
 
     if (!headerIds) {
@@ -31,13 +32,25 @@ class Renderer extends MarkedRenderer {
     let id = anchorId(stripHTML(text), transformOption);
     const headingId = _headingId;
 
+    const anchorAliasOpt = anchorAlias && text.startsWith('<a href="#');
+    if (anchorAliasOpt) {
+      const customAnchor = text.match(rATag)[1];
+      id = anchorId(stripHTML(customAnchor), transformOption);
+    }
+
     // Add a number after id if repeated
     if (headingId[id]) {
       id += `-${headingId[id]++}`;
     } else {
       headingId[id] = 1;
     }
 
+    if (anchorAliasOpt) {
+      text = text.replace(rATag, (str, alias) => {
+        return str.replace(alias, id);
+      });
+    }
+
     // add headerlink
     return `<h${level} id="${id}"><a href="#${id}" class="headerlink" title="${stripHTML(text)}"></a>${text}</h${level}>`;
   }

test/index.js

@@ -74,6 +74,39 @@ describe('Marked renderer', () => {
     ].join(''));
   });
 
+  describe('anchorAlias', () => {
+    beforeEach(() => { hexo.config.marked.anchorAlias = true; });
+
+    it('default', () => {
+      const body = '## [foo](#alias)';
+
+      const result = r({text: body});
+      result.should.eql('<h2 id="alias"><a href="#alias" class="headerlink" title="foo"></a><a href="#alias">foo</a></h2>');
+    });
+
+    it('duplicate anchors', () => {
+      const body = [
+        '## [foo](#alias)',
+        '## [bar](#alias)'
+      ].join('\n');
+
+      const result = r({text: body});
+      result.should.eql([
+        '<h2 id="alias"><a href="#alias" class="headerlink" title="foo"></a><a href="#alias">foo</a></h2>',
+        '<h2 id="alias-1"><a href="#alias-1" class="headerlink" title="bar"></a><a href="#alias-1">bar</a></h2>'
+      ].join(''));
+    });
+
+    it('modifyAnchors', () => {
+      hexo.config.marked.modifyAnchors = 2;
+      const body = '## [foo](#alias)';
+
+      const result = r({text: body});
+      result.should.eql('<h2 id="ALIAS"><a href="#ALIAS" class="headerlink" title="foo"></a><a href="#ALIAS">foo</a></h2>');
+    });
+  });
+
+
   it('should handle duplicate headings properly', () => {
     const body = [
       '## foo',