Updated footnotes layout/styles

demo/assets/index.css

@@ -31,7 +31,7 @@ body {
   border-radius: 4px;
 }
 .result-html img {
-  max-width: 50%;
+  max-width: 35%;
 }
 .result-src,
 .result-debug {
@@ -92,6 +92,11 @@ body {
   background: none;
   padding: 0;
 }
+.footnotes {
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  column-count: 2;
+}
 .gh-ribbon {
   display: block;
   position: absolute;

demo/assets/index.styl

@@ -29,7 +29,7 @@ body
   border 1px solid #ccc
   border-radius 4px
   img
-    max-width 50%
+    max-width 35%
 
 .result-src
 .result-debug
@@ -84,6 +84,11 @@ body
   background none
   padding 0
 
+.footnotes
+  -moz-column-count 2
+  -webkit-column-count 2
+  column-count 2
+
 .gh-ribbon
   display block
   position absolute

demo/index.html

@@ -271,7 +271,6 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 ## Images
 
 ![Minion](https://octodex.github.com/images/minion.png)
-
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
 
 Like links, Images also have a footnote style syntax
@@ -283,26 +282,29 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 
 
-## Abbreviations
+## Footnotes
 
-This is HTML abbreviation example. It converts "HTML",
+Footnote 1 link[^first].
-but keep intact partial entries like "xxxHTMLyyy" and so on.
 
-*[HTML]: Hyper Text Markup Language
+Footnote 2 link[^second].
 
+Inline footnote^[Text of inline footnote] definition.
 
-## Footnotes
+Duplicated footnote reference[^second].
 
-Footnote 1 link [^1].
+[^first]: Footnote **can have markup**
 
-Footnote 2 link [^2]. One more time [^2].
+    and multiple paragraphs.
 
-Inline footnote definition ^[Text of inline footnote].
+[^second]: Footnote text.
 
-[^1]: footnote text.
+## Abbreviations
-[^2]: footnote **can have markup**.
 
-    and multiple paragraphs.
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
 </textarea>
         </div>
         <section class="col-xs-6 full-height">

demo/sample.md

@@ -158,7 +158,6 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 ## Images
 
 ![Minion](https://octodex.github.com/images/minion.png)
-
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
 
 Like links, Images also have a footnote style syntax
@@ -170,23 +169,26 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 
 
-## Abbreviations
+## Footnotes
 
-This is HTML abbreviation example. It converts "HTML",
+Footnote 1 link[^first].
-but keep intact partial entries like "xxxHTMLyyy" and so on.
 
-*[HTML]: Hyper Text Markup Language
+Footnote 2 link[^second].
 
+Inline footnote^[Text of inline footnote] definition.
 
-## Footnotes
+Duplicated footnote reference[^second].
 
-Footnote 1 link [^1].
+[^first]: Footnote **can have markup**
 
-Footnote 2 link [^2]. One more time [^2].
+    and multiple paragraphs.
 
-Inline footnote definition ^[Text of inline footnote].
+[^second]: Footnote text.
 
-[^1]: footnote text.
+## Abbreviations
-[^2]: footnote **can have markup**.
 
-    and multiple paragraphs.
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language

lib/renderer.js

@@ -283,17 +283,19 @@ rules.footnote_ref = function (tokens, idx) {
   if (tokens[idx].subId > 0) {
     id += ':' + tokens[idx].subId;
   }
-  return '<a href="#fn' + n + '" class="footnoteRef" id="' + id + '"><sup>' + n + '</sup></a>';
+  return '<sup class="footnote-ref"><a href="#fn' + n + '" id="' + id + '">[' + n + ']</a></sup>';
 };
 rules.footnote_block_open = function (tokens, idx, options) {
-  return '<div class="footnotes">\n' + (options.xhtmlOut ? '<hr />' : '<hr>') + '\n<ol>\n';
+  return (options.xhtmlOut ? '<hr class="footnotes-sep" />\n' : '<hr class="footnotes-sep">\n') +
+         '<section class="footnotes">\n' +
+         '<ol class="footnotes-list">\n';
 };
 rules.footnote_block_close = function () {
-  return '</ol>\n</div>\n';
+  return '</ol>\n</section>\n';
 };
 rules.footnote_open = function (tokens, idx) {
   var id = Number(tokens[idx].id + 1).toString();
-  return '<li id="fn' + id + '">';
+  return '<li id="fn' + id + '"  class="footnote-item">';
 };
 rules.footnote_close = function () {
   return '</li>\n';
@@ -304,7 +306,7 @@ rules.footnote_anchor = function (tokens, idx) {
   if (tokens[idx].subId > 0) {
     id += ':' + tokens[idx].subId;
   }
-  return '<a href="#' + id + '">↩</a>';
+  return ' <a href="#' + id + '" class="footnote-backref">↩</a>';
 };