fix: convert {docsify-ignore} and {docsify-ignore-all} to HTML comments (#1318)

* breaking: convert {docsify-ignore} and {docsify-ignore-all} to HTML comments

Close #441

* chore: add ignore and ignore-all unit tests

Co-authored-by: 沈唁 <[email protected]>

Author: equinusocio

docs/more-pages.md

@@ -114,24 +114,24 @@ A custom sidebar can also automatically generate a table of contents by setting
 
 ## Ignoring Subheaders
 
-When `subMaxLevel` is set, each header is automatically added to the table of contents by default. If you want to ignore a specific header, add `{docsify-ignore}` to it.
+When `subMaxLevel` is set, each header is automatically added to the table of contents by default. If you want to ignore a specific header, add `<!-- {docsify-ignore} -->` to it.
 
 ```markdown
 # Getting Started
 
-## Header {docsify-ignore}
+## Header <!-- {docsify-ignore} -->
 
 This header won't appear in the sidebar table of contents.
 ```
 
-To ignore all headers on a specific page, you can use `{docsify-ignore-all}` on the first header of the page.
+To ignore all headers on a specific page, you can use `<!-- {docsify-ignore-all} -->` on the first header of the page.
 
 ```markdown
-# Getting Started {docsify-ignore-all}
+# Getting Started <!-- {docsify-ignore-all} -->
 
 ## Header
 
 This header won't appear in the sidebar table of contents.
 ```
 
-Both `{docsify-ignore}` and `{docsify-ignore-all}` will not be rendered on the page when used.
+Both `<!-- {docsify-ignore} -->` and `<!-- {docsify-ignore-all} -->` will not be rendered on the page when used.

src/core/render/compiler.js

@@ -208,14 +208,14 @@ export class Compiler {
       let { str, config } = getAndRemoveConfig(text);
       const nextToc = { level, title: str };
 
-      if (/{docsify-ignore}/g.test(str)) {
-        str = str.replace('{docsify-ignore}', '');
+      if (/<!-- {docsify-ignore} -->/g.test(str)) {
+        str = str.replace('<!-- {docsify-ignore} -->', '');
         nextToc.title = str;
         nextToc.ignoreSubHeading = true;
       }
 
-      if (/{docsify-ignore-all}/g.test(str)) {
-        str = str.replace('{docsify-ignore-all}', '');
+      if (/<!-- {docsify-ignore-all} -->/g.test(str)) {
+        str = str.replace('<!-- {docsify-ignore-all} -->', '');
         nextToc.title = str;
         nextToc.ignoreAllSubs = true;
       }

src/core/render/compiler/headline.js

@@ -6,14 +6,14 @@ export const headingCompiler = ({ renderer, router, _self }) =>
     let { str, config } = getAndRemoveConfig(text);
     const nextToc = { level, title: str };
 
-    if (/{docsify-ignore}/g.test(str)) {
-      str = str.replace('{docsify-ignore}', '');
+    if (/<!-- {docsify-ignore} -->/g.test(str)) {
+      str = str.replace('<!-- {docsify-ignore} -->', '');
       nextToc.title = str;
       nextToc.ignoreSubHeading = true;
     }
 
-    if (/{docsify-ignore-all}/g.test(str)) {
-      str = str.replace('{docsify-ignore-all}', '');
+    if (/<!-- {docsify-ignore-all} -->/g.test(str)) {
+      str = str.replace('<!-- {docsify-ignore-all} -->', '');
       nextToc.title = str;
       nextToc.ignoreAllSubs = true;
     }

test/unit/render.test.js

@@ -251,6 +251,43 @@ describe('render', function() {
         </h6>`
       );
     });
+
+    it('ignore', async function() {
+      const { docsify } = await init();
+      const output = docsify.compiler.compile(
+        '## h2 tag <!-- {docsify-ignore} -->'
+      );
+      expectSameDom(
+        output,
+        `
+        <h2 id="h2-tag">
+          <a href="#/?id=h2-tag" data-id="h2-tag" class="anchor">
+            <span>h2 tag </span>
+          </a>
+        </h2>`
+      );
+    });
+
+    it('ignore-all', async function() {
+      const { docsify } = await init();
+      const output = docsify.compiler.compile(
+        `# h1 tag <!-- {docsify-ignore-all} -->` + `\n## h2 tag`
+      );
+      expectSameDom(
+        output,
+        `
+        <h1 id="h1-tag">
+          <a href="#/?id=h1-tag" data-id="h1-tag" class="anchor">
+            <span>h1 tag </span>
+          </a>
+        </h1>
+        <h2 id="h2-tag">
+          <a href="#/?id=h2-tag" data-id="h2-tag" class="anchor">
+            <span>h2 tag</span>
+          </a>
+        </h2>`
+      );
+    });
   });
 
   describe('link', function() {