diff --git a/package-lock.json b/package-lock.json
index 22830edcff..b1e97dd603 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,15 @@
         }
       }
     },
+    "@sindresorhus/slugify": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.8.0.tgz",
+      "integrity": "sha512-Y+C3aG0JHmi4nCfixHgq0iAtqWCjMCliWghf6fXbemRKSGzpcrHdYxGZGDt8MeFg+gH7ounfMbz6WogqKCWvDg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.5",
+        "lodash.deburr": "^4.1.0"
+      }
+    },
     "a-sync-waterfall": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.0.tgz",
@@ -5173,6 +5182,11 @@
       "integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=",
       "dev": true
     },
+    "lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
diff --git a/package.json b/package.json
index 2935f28049..458081c68a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "author": "Jiang Sheng <gisonrg@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@sindresorhus/slugify": "^0.8.0",
     "bluebird": "^3.4.7",
     "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
diff --git a/src/lib/markbind/package-lock.json b/src/lib/markbind/package-lock.json
index 0f5a949365..eb59e4368b 100644
--- a/src/lib/markbind/package-lock.json
+++ b/src/lib/markbind/package-lock.json
@@ -4,6 +4,15 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@sindresorhus/slugify": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.8.0.tgz",
+      "integrity": "sha512-Y+C3aG0JHmi4nCfixHgq0iAtqWCjMCliWghf6fXbemRKSGzpcrHdYxGZGDt8MeFg+gH7ounfMbz6WogqKCWvDg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.5",
+        "lodash.deburr": "^4.1.0"
+      }
+    },
     "a-sync-waterfall": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.0.tgz",
@@ -2225,6 +2234,11 @@
       "integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=",
       "dev": true
     },
+    "lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
diff --git a/src/lib/markbind/package.json b/src/lib/markbind/package.json
index 33a834123f..ec44624da4 100644
--- a/src/lib/markbind/package.json
+++ b/src/lib/markbind/package.json
@@ -13,6 +13,7 @@
   "author": "Jiang Sheng <gisonrg@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@sindresorhus/slugify": "^0.8.0",
     "bluebird": "^3.4.7",
     "cheerio": "^0.22.0",
     "fastmatter": "^2.0.1",
diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js
index f98ac286d1..7dc5932b94 100644
--- a/src/lib/markbind/src/lib/markdown-it/index.js
+++ b/src/lib/markbind/src/lib/markdown-it/index.js
@@ -15,11 +15,12 @@ const markdownIt = require('markdown-it')({
     return '<pre class="hljs"><code>' + markdownIt.utils.escapeHtml(str) + '</code></pre>';
   }
 });
+const slugify = require('@sindresorhus/slugify');
 
 // markdown-it plugins
 markdownIt.use(require('markdown-it-mark'))
   .use(require('markdown-it-ins'))
-  .use(require('markdown-it-anchor'))
+  .use(require('markdown-it-anchor'), {slugify: slugify})
   .use(require('markdown-it-imsize'), {autofill: false})
   .use(require('markdown-it-table-of-contents'))
   .use(require('markdown-it-task-lists'), {enabled: true})
diff --git a/test/test_site/expected/bugs/index.html b/test/test_site/expected/bugs/index.html
index f2d8c95fd5..dee1f89ab6 100644
--- a/test/test_site/expected/bugs/index.html
+++ b/test/test_site/expected/bugs/index.html
@@ -27,7 +27,7 @@
     </navbar>
   </div>
   <div class="website-content">
-    <h2 id="popover-initiated-by-trigger%3A-honor-trigger-attribute">popover initiated by trigger: honor trigger attribute<a class="fa fa-anchor" href="#popover-initiated-by-trigger%3A-honor-trigger-attribute"></a></h2>
+    <h2 id="popover-initiated-by-trigger-honor-trigger-attribute">popover initiated by trigger: honor trigger attribute<a class="fa fa-anchor" href="#popover-initiated-by-trigger-honor-trigger-attribute"></a></h2>
     <p><a href="https://github.com/MarkBind/markbind/issues/49">Issue #49</a></p>
     <p>Repro:</p>
     <p>
diff --git a/test/test_site/expected/index.html b/test/test_site/expected/index.html
index 4baaec247e..92153face2 100644
--- a/test/test_site/expected/index.html
+++ b/test/test_site/expected/index.html
@@ -156,12 +156,12 @@ <h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class
           <span class="keyword">panel keyword</span></panel>
         <h1 id="expanded-panel-without-heading-with-keyword">Expanded panel without heading with keyword<a class="fa fa-anchor" href="#expanded-panel-without-heading-with-keyword"></a></h1>
         <panel header="# Panel without heading with keyword<a class='fa fa-anchor' href='#panel-without-heading-with-keyword'></a>" expanded="">
-          <h1 id="keyword-should-be-tagged-to-this-heading%2C-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading%2C-not-the-panel-heading"></a></h1>
+          <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading"></a></h1>
           <p><span class="keyword">panel keyword</span></p>
         </panel>
         <h1 id="unexpanded-panel-with-heading-with-keyword">Unexpanded panel with heading with keyword<a class="fa fa-anchor" href="#unexpanded-panel-with-heading-with-keyword"></a></h1>
         <panel header="# Panel with heading with keyword<a class='fa fa-anchor' href='#panel-with-heading-with-keyword'></a>">
-          <h1 id="keyword-should-be-tagged-to-the-panel-heading%2C-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading%2C-not-this-heading"></a></h1>
+          <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading"></a></h1>
           <p><span class="keyword">panel keyword</span></p>
         </panel>
         <h1 id="heading-with-included-keyword">Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword"></a></h1>
@@ -234,7 +234,7 @@ <h1 id="html-include">HTML include<a class="fa fa-anchor" href="#html-include"><
           <p>This is a HTML document</p>
           <p><span>It is <strong>possible</strong> to use Markdown in HTML</span></p>
         </div>
-        <h1 id="mbd%2C-mbdf-include">Mbd, Mbdf include<a class="fa fa-anchor" href="#mbd%2C-mbdf-include"></a></h1>
+        <h1 id="mbd-mbdf-include">Mbd, Mbdf include<a class="fa fa-anchor" href="#mbd-mbdf-include"></a></h1>
         <div>
           <p><em>MarkBind supports .mbd files.</em></p>
         </div>
diff --git a/test/test_site/expected/requirements/SpecifyingRequirements._include_.html b/test/test_site/expected/requirements/SpecifyingRequirements._include_.html
index cb14f30c57..f09190e433 100644
--- a/test/test_site/expected/requirements/SpecifyingRequirements._include_.html
+++ b/test/test_site/expected/requirements/SpecifyingRequirements._include_.html
@@ -4,7 +4,7 @@ <h1 id="specifying-requirements">Specifying requirements</h1>
     The next phase is to convert requirements into a product specification that specifies how the product will address the requirements. </seg>
 </p>
 <p>Given next are some tools and techniques that can be used to specify requirements. Note that they can also be used for establishing requirements too.</p>
-<h2 id="textual-descriptions-(unstructured-prose)">Textual descriptions (unstructured prose)</h2>
+<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)</h2>
 <p>This is the most straight forward way of describing requirements. A textual description can be used to give a quick overview of the domain/system that is understandable to both the users and the development team. Textual descriptions are especially useful
   when describing the vision of a product. However, lengthy textual descriptions are hard to follow.</p>
 <h2 id="feature-list">Feature list</h2>
diff --git a/test/test_site/expected/siteData.json b/test/test_site/expected/siteData.json
index 4bb7e860ab..0dd35b395a 100644
--- a/test/test_site/expected/siteData.json
+++ b/test/test_site/expected/siteData.json
@@ -14,7 +14,7 @@
         "outer-nested-panel-without-src": "Outer nested panel without src",
         "panel-with-src-from-another-markbind-site-header": "Panel with src from another Markbind site header",
         "unexpanded-panel-header": "Unexpanded panel header",
-        "keyword-should-be-tagged-to-this-heading%2C-not-the-panel-heading": "Keyword should be tagged to this heading, not the panel heading | panel keyword",
+        "keyword-should-be-tagged-to-this-heading-not-the-panel-heading": "Keyword should be tagged to this heading, not the panel heading | panel keyword",
         "panel-without-src-content-heading": "Panel without src content heading",
         "panel-normal-source-content-headings": "Panel normal source content headings",
         "panel-source-segment-content-headings": "Panel source segment content headings",
@@ -45,7 +45,7 @@
         "boilerplate-include": "Boilerplate include",
         "nested-include": "Nested include",
         "html-include": "HTML include",
-        "mbd%2C-mbdf-include": "Mbd, Mbdf include",
+        "mbd-mbdf-include": "Mbd, Mbdf include",
         "include-from-another-markbind-site": "Include from another Markbind site",
         "trimmed-include": "Trimmed include",
         "fragment-with-leading-spaces-and-newline": "Fragment with leading spaces and newline",
@@ -82,7 +82,7 @@
     },
     {
       "headings": {
-        "popover-initiated-by-trigger%3A-honor-trigger-attribute": "popover initiated by trigger: honor trigger attribute",
+        "popover-initiated-by-trigger-honor-trigger-attribute": "popover initiated by trigger: honor trigger attribute",
         "support-multiple-inclusions-of-a-modal": "Support multiple inclusions of a modal",
         "remove-extra-space-in-links": "Remove extra space in links"
       },
diff --git a/test/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html b/test/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
index c61656bc68..ebc62d08a9 100644
--- a/test/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
+++ b/test/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
@@ -1,4 +1,4 @@
 <div id="segment">
   <h3 id="panel-source-segment-content-headings">Panel source segment content headings</h3>
 </div>
-<h3 id="this-heading-is-not-src-of-any-panel%2C-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data</h3>
\ No newline at end of file
+<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data</h3>
\ No newline at end of file