Skip to content

Instantly share code, notes, and snippets.

@alinnert

alinnert/README.md

Last active November 16, 2017 14:14
Download ZIP

Revisions

  1. alinnert revised this gist Nov 16, 2017. No changes.
  2. Andreas Linnert revised this gist Aug 11, 2017. No changes.
  3. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions markdownpad-github-plus-toc.css
    View file
    Original file line number Diff line number Diff line change
    @@ -93,6 +93,7 @@ body.toc-loaded {
    }

    main {
    display: block;
    max-width: 650px;
    margin: 0 auto;
    }
  4. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,6 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    - replace stylesheet completely.
    2. Include the JavaScript in the HTML head.
    - Tools → Options → Advanced → HTML Head Editor
    - Paste the script and add `<script>` at the beginning and `</script>` at the end of the script.
    - Paste the script and add `<script>` at the beginning and `</script>` at the end of the script. The script must be between those two tags.

    And you're done. Have fun :)
  5. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,10 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    [MarkdownPad](http://markdownpad.com/) is a Markdown Editor for Windows.

    1. Use the included stylesheet in this Gist. Replace an old one or create a new one.
    - Tools &rarr; Options -> Stylesheets -> Add or Edit
    - Tools &rarr; Options &rarr; Stylesheets &rarr; Add or Edit
    - replace stylesheet completely.
    2. Include the JavaScript in the HTML head.
    - Tools -> Options -> Advanced -> HTML Head Editor
    - Tools &rarr; Options &rarr; Advanced &rarr; HTML Head Editor
    - Paste the script and add `<script>` at the beginning and `</script>` at the end of the script.

    And you're done. Have fun :)
  6. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    [MarkdownPad](http://markdownpad.com/) is a Markdown Editor for Windows.

    1. Use the included stylesheet in this Gist. Replace an old one or create a new one.
    - Tools -> Options -> Stylesheets -> Add or Edit
    - Tools &rarr; Options -> Stylesheets -> Add or Edit
    - replace stylesheet completely.
    2. Include the JavaScript in the HTML head.
    - Tools -> Options -> Advanced -> HTML Head Editor
  7. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,10 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    [MarkdownPad](http://markdownpad.com/) is a Markdown Editor for Windows.

    1. Use the included stylesheet in this Gist. Replace an old one or create a new one.
    1. Tools -> Options -> Stylesheets -> Add or Edit
    2. replace stylesheet completely.
    - Tools -> Options -> Stylesheets -> Add or Edit
    - replace stylesheet completely.
    2. Include the JavaScript in the HTML head.
    1. Tools -> Options -> Advanced -> HTML Head Editor
    2. Paste the script and add `<script>` at the beginning and `</script>` at the end of the script.
    - Tools -> Options -> Advanced -> HTML Head Editor
    - Paste the script and add `<script>` at the beginning and `</script>` at the end of the script.

    And you're done. Have fun :)
  8. Andreas Linnert revised this gist Dec 1, 2015. 1 changed file with 11 additions and 3 deletions.
    14 changes: 11 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,15 @@

    If inserted in a HTML document auto-generated from markdown a TOC sidebar gets generated automatically.

    ## to do
    ## How to use it with MarkdownPad

    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [x] add sample CSS.
    [MarkdownPad](http://markdownpad.com/) is a Markdown Editor for Windows.

    1. Use the included stylesheet in this Gist. Replace an old one or create a new one.
    1. Tools -> Options -> Stylesheets -> Add or Edit
    2. replace stylesheet completely.
    2. Include the JavaScript in the HTML head.
    1. Tools -> Options -> Advanced -> HTML Head Editor
    2. Paste the script and add `<script>` at the beginning and `</script>` at the end of the script.

    And you're done. Have fun :)
  9. Andreas Linnert revised this gist Dec 1, 2015. 3 changed files with 363 additions and 3 deletions.
    3 changes: 1 addition & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,5 +5,4 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    ## to do

    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
    - [ ] add sample CSS.
    - [x] add sample CSS.
    361 changes: 361 additions & 0 deletions markdownpad-github-plus-toc.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,361 @@
    /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
    /* Author: Nicolas Hery - http://nicolashery.com */
    /* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
    /* Source: https://github.com/nicolahery/markdownpad-github */

    /* RESET
    =============================================================================*/

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    }

    /* TOC
    =============================================================================*/

    #toc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25vw;
    overflow: auto;
    border-right: 1px solid #cccccc;
    }

    #toc > div {
    border-bottom: 1px solid #cccccc;
    }

    #toc > div a {
    display: block;
    padding: 5px 15px;
    color: #333;
    }

    #toc > .level-1 {
    font-weight: normal;
    font-size: 20px;
    background: #333;
    }
    #toc > .level-1 a {
    color: #ddd;
    padding-top: 20px;
    }

    #toc > .level-2 {
    font-weight: bold;
    background: #e5e5e5;
    }

    #toc > .level-3 {
    padding-left: 15px;
    background: #f5f5f5;
    }

    #toc > .level-4 {
    padding-left: 30px;
    }

    #toc > .level-5 {
    padding-left: 45px;
    }
    #toc > .level-5 a {
    color: #666;
    }

    #toc > .level-6 {
    padding-left: 60px;
    }
    #toc > .level-6 a {
    color: #777;
    }

    /* BODY
    =============================================================================*/

    body {
    font-family: "Calibri", Helvetica, arial, freesans, clean, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    padding: 20px;
    max-width: 650px;
    margin: 0 auto
    }

    body.toc-loaded {
    max-width: initial;
    margin: 0 0 0 25vw;
    }

    main {
    max-width: 650px;
    margin: 0 auto;
    }

    body>*:first-child {
    margin-top: 0 !important;
    }

    body>*:last-child {
    margin-bottom: 0 !important;
    }

    /* BLOCKS
    =============================================================================*/

    p, blockquote, ul, ol, dl, table, pre {
    margin: 15px 0;
    }

    /* HEADERS
    =============================================================================*/

    h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 10px;
    padding: 0;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    }

    h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
    font-size: inherit;
    }

    h1 {
    font-size: 28px;
    color: #000;
    }

    h2 {
    font-size: 24px;
    border-bottom: 1px solid #ccc;
    color: #000;
    }

    h3 {
    font-size: 18px;
    }

    h4 {
    font-size: 16px;
    }

    h5 {
    font-size: 14px;
    }

    h6 {
    color: #777;
    font-size: 14px;
    }

    body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
    margin-top: 0;
    padding-top: 0;
    }

    a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
    }

    h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
    margin-top: 10px;
    }

    /* LINKS
    =============================================================================*/

    a {
    color: #4183C4;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    /* LISTS
    =============================================================================*/

    ul, ol {
    padding-left: 30px;
    }

    ul li > :first-child,
    ol li > :first-child,
    ul li ul:first-of-type,
    ol li ol:first-of-type,
    ul li ol:first-of-type,
    ol li ul:first-of-type {
    margin-top: 0px;
    }

    ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0;
    }

    dl {
    padding: 0;
    }

    dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
    }

    dl dt:first-child {
    padding: 0;
    }

    dl dt>:first-child {
    margin-top: 0px;
    }

    dl dt>:last-child {
    margin-bottom: 0px;
    }

    dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
    }

    dl dd>:first-child {
    margin-top: 0px;
    }

    dl dd>:last-child {
    margin-bottom: 0px;
    }

    /* CODE
    =============================================================================*/

    pre, code, tt {
    font-size: 12px;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    }

    code, tt {
    margin: 0 0px;
    padding: 0px 0px;
    white-space: nowrap;
    border: 1px solid #eaeaea;
    background-color: #f8f8f8;
    border-radius: 3px;
    }

    pre>code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
    }

    pre {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
    }

    pre code, pre tt {
    background-color: transparent;
    border: none;
    }

    kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
    }

    /* QUOTES
    =============================================================================*/

    blockquote {
    border-left: 4px solid #DDD;
    padding: 0 15px;
    color: #777;
    }

    blockquote>:first-child {
    margin-top: 0px;
    }

    blockquote>:last-child {
    margin-bottom: 0px;
    }

    /* HORIZONTAL RULES
    =============================================================================*/

    hr {
    clear: both;
    margin: 15px 0;
    height: 0px;
    overflow: hidden;
    border: none;
    background: transparent;
    border-bottom: 4px solid #ddd;
    padding: 0;
    }

    /* TABLES
    =============================================================================*/

    table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    }

    table th {
    font-weight: bold;
    }

    table th, table td {
    border: 1px solid #ccc;
    padding: 6px 13px;
    }

    table tr {
    border-top: 1px solid #ccc;
    background-color: #fff;
    }

    table tr:nth-child(2n) {
    background-color: #f8f8f8;
    }

    /* IMAGES
    =============================================================================*/

    img {
    max-width: 100%
    }
    2 changes: 1 addition & 1 deletion md-toc.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@ function addTOC() {

    headlineElements = mainElement.querySelectorAll('h1, h2, h3, h4, h5, h6');

    for (i = 1; i < headlineElements.length; i++) {
    for (i = 0; i < headlineElements.length; i++) {
    currentElement = headlineElements[i];
    currentElement.setAttribute('id', i);

  10. Andreas Linnert revised this gist Dec 1, 2015. No changes.
  11. Andreas Linnert revised this gist Dec 1, 2015. 2 changed files with 6 additions and 9 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,6 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g

    ## to do

    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
    - [ ] add sample CSS.
    13 changes: 5 additions & 8 deletions md-toc.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,22 +11,19 @@ function addTOC() {
    mainElement = document.createElement('main');
    mainElement.insertAdjacentHTML('afterbegin', bodyContent);

    generateTOC(tocElement);
    generateTOC(tocElement, mainElement);

    document.body.innerHTML = '';
    document.body.insertAdjacentHTML('afterbegin', tocElement.outerHTML);
    document.body.insertAdjacentHTML('beforeend', mainElement.outerHTML);
    document.body.classList.add('toc-loaded');

    // FUNCTIONS

    function generateTOC(tocElement) {
    var headlineElements,
    currentElement,
    currentHeadlineElement,
    currentHeadlineLinkElement,
    i;
    function generateTOC(tocElement, mainElement) {
    var headlineElements, currentElement, currentHeadlineElement, currentHeadlineLinkElement, i;

    headlineElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headlineElements = mainElement.querySelectorAll('h1, h2, h3, h4, h5, h6');

    for (i = 1; i < headlineElements.length; i++) {
    currentElement = headlineElements[i];
  12. Andreas Linnert revised this gist Nov 30, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,4 +5,5 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g
    ## to do

    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
    - [ ] some parameters to adjust the script more easily.
    - [ ] add sample CSS.
  13. Andreas Linnert revised this gist Nov 30, 2015. No changes.
  14. Andreas Linnert revised this gist Nov 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g

    ## to do

    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
  15. Andreas Linnert revised this gist Nov 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g

    ## to do

    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
  16. Andreas Linnert revised this gist Nov 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g

    ## to do

    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
  17. Andreas Linnert revised this gist Nov 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@ If inserted in a HTML document auto-generated from markdown a TOC sidebar gets g

    ## to do

    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [x] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
  18. Andreas Linnert created this gist Nov 30, 2015.
    8 changes: 8 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    # mdTOC

    If inserted in a HTML document auto-generated from markdown a TOC sidebar gets generated automatically.

    ## to do

    - [ ] headline elements don't receive the `id` attribute because that version of the content gets deleted and replaced by the original one.
    - [ ] some parameters to adjust the script more easily.
    48 changes: 48 additions & 0 deletions md-toc.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    'use strict';

    function addTOC() {
    var tocElement, bodyContent, mainElement;

    tocElement = document.createElement('nav');
    tocElement.setAttribute('id', 'toc');

    bodyContent = document.body.innerHTML;

    mainElement = document.createElement('main');
    mainElement.insertAdjacentHTML('afterbegin', bodyContent);

    generateTOC(tocElement);

    document.body.innerHTML = '';
    document.body.insertAdjacentHTML('afterbegin', tocElement.outerHTML);
    document.body.insertAdjacentHTML('beforeend', mainElement.outerHTML);

    // FUNCTIONS

    function generateTOC(tocElement) {
    var headlineElements,
    currentElement,
    currentHeadlineElement,
    currentHeadlineLinkElement,
    i;

    headlineElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

    for (i = 1; i < headlineElements.length; i++) {
    currentElement = headlineElements[i];
    currentElement.setAttribute('id', i);

    currentHeadlineLinkElement = document.createElement('a');
    currentHeadlineLinkElement.setAttribute('href', '#' + i);
    currentHeadlineLinkElement.innerHTML = currentElement.innerHTML;

    currentHeadlineElement = document.createElement('div');
    currentHeadlineElement.classList.add(currentElement.tagName.replace('H', 'level-'));
    currentHeadlineElement.insertAdjacentHTML('afterbegin', currentHeadlineLinkElement.outerHTML);

    tocElement.insertAdjacentHTML('beforeend', currentHeadlineElement.outerHTML);
    }
    }
    }

    document.addEventListener('DOMContentLoaded', addTOC, false);