Add support for GFM footnotes

examples/acme-docs/data/guides/markdown-syntax/syntax/index.md

@@ -133,3 +133,16 @@ Ac tortor vitae purus faucibus ornare suspendisse. Egestas sed tempus urna et ph
 ##### Level 5 Title
 
 ###### Level 6 Title
+
+---
+
+# Footnote Sample
+
+This sentence has two[^foo] footnotes[^bar].
+
+[^foo]: This is an example footnote.
+[^bar]: Note that it has to be defined **on a single line**, but using `<br/>`<br/>you can still make it multiline if needed.
+
+---
+
+\[End of document\]

gulpfile.js

@@ -14,6 +14,9 @@ var del                  = require("del");
 var glob                 = require("glob");
 var merge                = require("merge-stream");
 var marked               = require("marked").marked;
+var markedFootnote       = require("marked-footnote");
+var markedGfmHeadingId         = require("marked-gfm-heading-id").gfmHeadingId;
+var markedMangle               = require("marked-mangle").mangle;
 var remove_markdown      = require("@tommoor/remove-markdown");
 var MiniSearch           = require("minisearch");
 var Feed                 = require("feed").Feed;
@@ -114,6 +117,9 @@ marked.use({
     marked_extensions.embed
   ]
 });
+marked.use(markedFootnote());
+marked.use(markedGfmHeadingId());
+marked.use(markedMangle());
 
 
 // Tasks

package.json

@@ -40,50 +40,53 @@
     "test": "./bin/chappe.js lint --example=acme-docs"
   },
   "dependencies": {
+    "@tommoor/remove-markdown": "0.3.x",
     "babel-preset-es2015": "6.9.x",
-    "ora": "5.4.x",
     "del": "6.0.x",
+    "drafter.js": "3.2.x",
+    "escape-html": "1.0.x",
+    "feed": "4.2.x",
     "glob": "7.2.x",
-    "sass": "1.89.x",
     "gulp": "4.0.x",
-    "gulp-connect": "5.7.x",
+    "gulp-babel": "6.1.x",
     "gulp-bower": "0.0.15",
+    "gulp-clean-css": "4.3.x",
+    "gulp-concat": "2.6.x",
+    "gulp-connect": "5.7.x",
     "gulp-file": "0.4.x",
-    "gulp-pug": "5.0.x",
-    "gulp-babel": "6.1.x",
-    "gulp-sass": "6.0.x",
-    "gulp-sass-variables": "1.2.x",
-    "gulp-sitemap": "8.0.x",
+    "gulp-header": "2.0.x",
     "gulp-inline-image": "1.0.x",
+    "gulp-jscs": "4.1.x",
+    "gulp-jshint": "2.1.x",
+    "gulp-noop": "1.0.x",
+    "gulp-notify": "4.0.x",
     "gulp-ogimage": "2.0.x",
-    "gulp-concat": "2.6.x",
-    "gulp-clean-css": "4.3.x",
-    "gulp-uglify": "3.0.x",
-    "gulp-header": "2.0.x",
+    "gulp-pug": "5.0.x",
+    "gulp-pug-lint": "0.1.x",
     "gulp-rename": "2.0.x",
     "gulp-replace": "1.1.x",
-    "gulp-pug-lint": "0.1.x",
-    "gulp-stylelint-esm": "3.0.x",
-    "gulp-jshint": "2.1.x",
-    "gulp-jscs": "4.1.x",
+    "gulp-sass": "6.0.x",
+    "gulp-sass-variables": "1.2.x",
+    "gulp-sitemap": "8.0.x",
     "gulp-sizereport": "1.2.x",
-    "gulp-notify": "4.0.x",
-    "gulp-noop": "1.0.x",
+    "gulp-stylelint-esm": "3.0.x",
+    "gulp-uglify": "3.0.x",
+    "http-status-codes": "2.2.x",
     "jshint": "2.13.x",
-    "stylelint-config-standard-scss": "16.0.x",
-    "marked": "4.0.x",
+    "lodash": "4.17.x",
     "markdown-toc": "1.2.x",
-    "drafter.js": "3.2.x",
-    "feed": "4.2.x",
+    "marked": "7.0.x",
+    "marked-footnote": "1.4.x",
+    "marked-gfm-heading-id": "3.2.x",
+    "marked-mangle": "1.1.x",
+    "merge-stream": "2.0.x",
     "minisearch": "3.1.x",
+    "ora": "5.4.x",
+    "sass": "1.89.x",
     "slug": "5.2.x",
+    "stylelint-config-standard-scss": "16.0.x",
     "trunc-text": "1.0.x",
-    "escape-html": "1.0.x",
-    "http-status-codes": "2.2.x",
-    "merge-stream": "2.0.x",
-    "lodash": "4.17.x",
-    "yargs": "4.8.x",
-    "@tommoor/remove-markdown": "0.3.x"
+    "yargs": "4.8.x"
   },
   "keywords": [
     "docs",

src/stylesheets/common/_content.scss

@@ -73,7 +73,7 @@
         }
       }
 
-      [id] {
+      [id]:not([data-footnote-ref], .footnotes *) {
         $anchor-offset-top: ($header-height-outer + 16px);
 
         pointer-events: none;

src/stylesheets/common/_markdown.scss

@@ -527,6 +527,29 @@
       }
     }
   }
+
+  sup:has([data-footnote-ref]) {
+    display: inline-block;
+    vertical-align: baseline;
+    font-size: smaller;
+    position: relative;
+    top: -0.4em;
+  }
+
+  .footnotes {
+    ol {
+      list-style: none;
+
+      li {
+        counter-increment: footnote-counter;
+
+        &::before {
+          content: counter(footnote-counter) ".";
+          top: 1px;
+        }
+      }
+    }
+  }
 }