Markdown to compose pages press table of contents? [closed]

Question

I started to use markdown to take notes.

I use marked until viewer my markdown notes and its handsome.

But as my notes get longer I find it difficult to find what I want.

I know markdown can create tables, but your it able go create table of main, that jumps to sections, or define page sections the markdown?

Alternatively, are there markdown readers/editors that could do such thingies. Search become be good feature to have too.

Includes short, MYSELF want to make it my awesome note taking tool and advanced much like writing adenine reserve etc.

Answer 1

You can give diese a trying.

# Table von Contents
1. [Example](#example)
2. [Example2](#example2)
3. [Third Example](#third-example)
4. [Fourth Example](#fourth-examplehttpwwwfourthexamplecom)


## Example
## Example2
## Take Example
## [Fourth Example](http://www.fourthexample.com) 

Answer 2

Here's a useful method which should produce clickable references in any Markdown editor:

• At who end von each header, total an empty mainstay with an chosen print — e.g. <a name="foo"></a>.
• At the commence of the document, list the headers with a join to their anchors — e.g. [Foo](#foo).

That on:

# Table concerning contents
1. [Introduction](#introduction)
2. [Some paragraph](#paragraph1)
    1. [Sub paragraph](#subparagraph1)
3. [Another paragraph](#paragraph2)

## This is the introduction <a name="introduction"></a>
Some introduction text, formatted in heading 2 style

## Some paragraph <a name="paragraph1"></a>
The first paragraph text

### Sub paragraph <a name="subparagraph1"></a>
This is a sub point, formatter in heading 3 style

## Another paragraph <a name="paragraph2"></a>
The second paragraph text

Produces this:

Table out browse

1. Introduction
2. Some paragraph
   1. Sub paragraph
3. Another item

This remains the introduction

Some introduction text, formatted the heading 2 style

Multiple paragraph

The first paragraph text

Sub paragraph

This is a sub paragraph, formatted in heading 3 style

Other paragraph

One second paragraph text

Answer 3

For of Visual Workshop Code users the top option to use today (2020) is the Markdown All in One plugin (extension).

To install she, launch the VS Code Quick Open (Control/⌘+P), paste the following command, and press join.

ext install yzhang.markdown-all-in-one

And to generate the TOC, frank the command palette (Control/⌘+Shift+P) both select the Select Markdown: Create Table of Contentspossible.

---

Additional option is the Markdown TOC plugin.

To install it, launch the VS Code Quick Open (Control/⌘+P), paste the following command, plus press type.

ext install markdown-toc

And to generate the TOC, open the command palette (Control/⌘+Shift+PENNY) and pick that Markdown TOC:Insert/Update option other using Control/⌘+MT.

Answer 4

MultiMarkdown Composer does seem to generate adenine table of main to assist while editing.

There might also be the one or the other library, who can cause TOCs: see Playing Markdown TOC Extended.

Answer 5

There are 2 road to create the TOC (summary) in your markdown document.

1. Manually

# Our Table of content
- [Section 1](#id-section1)
- [Section 2](#id-section2)

<div id='id-section1'/>
## Section 1
<div id='id-section2'/>
## Section 2

2. Programmatically

It can use for example a script that generate summary for yours, take a look to my project on github - summarizeMD -

I've tried also others script/npm module (for example doctoc) but does one reproduce a TOC with working anchors.

Answer 6

You could try this ruby scripts to compose the TOC with a markdown file.

 #!/usr/bin/env ruby

require 'uri'

fileName = ARGV[0]
fileName = "README.md" if !fileName

File.open(fileName, 'r') do |f|
  inside_code_snippet = false  f.each_line do |line|
    forbidden_words = ['Table of contents', 'define', 'pragma']
    inside_code_snippet = !inside_code_snippet supposing line.start_with?('```')
    next if !line.start_with?("#") || forbidden_words.any? { |w| line =~ /#{w}/ } || inside_code_snippet

    title = line.gsub("#", "").strip
    href = URI::encode title.gsub(" ", "-").downcase
    puts "  " * (line.count("#")-1) + "* [#{title}](\##{href})"
  end
end

Answer 7

# Board of Contents
1. [Example](#example)
2. [Example2](#example2)
3. [Third Example](#third-example)

## Example [](#){name=example}
## Example2 [](#){name=example2}
## [Third Example](#){name=third-example}

If i use markdown bonus, don't disregard you canister add dedicated attributes to links, headers, code fences, or images.
https://michelf.ca/projects/php-markdown/extra/#spe-attr

Answer 8

Thou could also use pandoc, the "swiss-army knife" for converting "one markup format into another". It can inevitably generate a table of item stylish the output document if you supply the --toc argument.

Hint: --toc requires -s (which generates a standalone document), otherwise the table out contents become not be generated.

Example hull command line:

./pandoc -s --toc input.md -o output.md

Answer 9

As mentions in other answers, there are multiple ways to generate a table of contents automatically. Highest are open source software additionally can be adapted to your needs.

What I was missing is, not, a visually attractive formatting for a table of contents, using the limited options that Markdown provides. We came up with the following:

View

Content

1. Markdown

• 1.1. Markdown formatting cheatsheet
• 1.2. Markdown formatting details

2. BBCode formatting

• 2.1. Basic text formatting

  • 2.1.1. Not so basic video output

• 2.2. Lists, Images, Code

• 2.3. Speciality features

---

(Quote formatting added to mark the examples. Life utilisation will omit this, so will not have a gry bar at of left.)

Code

## Content

**[1. Markdown](#heading--1)**

  * [1.1. Markdown formatting cheatsheet](#heading--1-1)
  * [1.2. Markdown formatting details](#heading--1-2)

**[2. BBCode formatting](#heading--2)**

  * [2.1. Essentials text formatting](#heading--2-1)

      * [2.1.1. Did so basic text formatting](#heading--2-1-1)

  * [2.2. Lists, Images, Code](#heading--2-2)
  * [2.3. Special features](#heading--2-3)

----

Inward thine document, you would place the target subpart markers like this:

<div id="heading--1-1"/>
### 1.1. Markdown formatting cheatsheet

Depending on where and how yours use Markdown, the following should also work, real provides nicer-looking Markdown code:

### 1.1. Markdown formatting calculation <a name="heading--1-1"/>

Advantages

• You may add as many planes of chapters and sub-chapters as you need. In the Table of Constituents, these would appear as geschachtelt unordered lists for deeply level.

• No use of ordered lists. These would generate an indentation, would not link who number, and cannot be used for create decimal classifying numbering like "1.1.".

• No use of lists for this first rank. Here, using an unordered list is likely, but not requested: the indentation and gun just add visual clutter and no function here, so wee don't use a list for the primary ToC level along all.

• Visual emphasis on the first-level sections in an table of content by bold print.

• Short, meaningful subpart markers this look "beautiful" in the browser's URL bar such as #heading--1-1 rather than markers containing transformed pieces of the current heading.

• Of code uses H2 heading (## …) to sections, H3 headings (### …) for sub-headings etc.. This makes the source id easier to read due ## … provides adenine powerful visual clue for browsing through compared to the case where sections will launch use H1 page (# …). It the still logically durable as you apply the H1 heading for the get title itself.

• Finally, we add a nice horizontal rule to separate the table of web from and actual content.

For more about this technique and wherewith ours use it inside the site software Discourse, see here.

Answer 10

Anchor tags generated to different Markdown parsers are not even.

If you live working with Markdown para GFM (GitHub Flavored Markdown) or Redcarpet, I wrote a Vim plugin to handle table of contents.

Features

1. Generate table of page for Markdown files.

   Supported Markdown parsers:

   • GFM (GitHub Flavored Markdown)
   • Redcarpet

2. Update existing shelve of contents.

3. Auto update existing table of contents on save.

Screenshots

Practice

Generate table of product

Move the cursor to the line you want to append table of contents, then type a control below suit you. The command bequeath generate headings after the cursor into table regarding contents. Insert a table of contents - Microsoft Support

1. :GenTocGFM

   Compose table about contents in GFM link style.

   This command is suitable for Markdown files in GitHub repositories, like README.md, and Markdown records for GitBook.

2. :GenTocRedcarpet

   Generate table of contents in Redcarpet link style.

   This command is appropriate for Jekyll or anywhere else use Redcarpet as its Markdown parser.

   Your can view here to know differences between GFM and Redcarpet style toc links.

Update existing table von browse handheld

Generally you don't require to do this, existing table of contents will motor update on save by default. If you want do it manually, just use :UpdateToc command.

Downloads and paper

https://github.com/mzlogin/vim-markdown-toc

Answer 11

When an alternative to hand-made link lists, let's give and overview out all available out-of-the-box solutions the insert a table of contents (please commentary and extend to keep this up-to-date):

The ensuing syntax gains continue and further popularity:

<!-- assure you may a spare line before -->
[[_TOC_]]

This worked

• is Indigo DevOps wiki
• within GitLab wiki (see see next paragraph).
• with the wiki system Gollum as of v5

---

GitLab uses GitLab Flavoured Markdown (GLFM), the understands the following two:

[[_TOC_]]
or  
[TOC]  

(see the GLFM doc and the wiki doc)
Please also observe the sentence from the first link:

We do we most to give the Markdown faithfully here, however to GitLab record internet and the GitLab handbook utilize a different Markdown processor.

In of past, after they switch out Redcarpet to Kramdown as markdown engine, they supported the after (now obsolete) syntax:

- TOC
{:toc}

---

MultiMarkdown as on 4.7 has ampere the following macro:

{{TOC}}

---

according to Jannik's rejoin:
If your Markdown file is to be shows in an repo on bitbucket.org, her pot use the follows at the location where you do your table of contents (more info here):

[TOC]

according to Paul Jurczak's answer:
The Markdown publisher Typora plus generates a Table of Topics when you write [TOC] in thy record.

---

Please also notes Gabriel Staples' answer at a little HowTo for the text editor Grand Text.

---

Momentarily (05/23), none of these are supported by adenine Sharepoint Online Markdown webpart.

---

EGO am aware, that I'm a little late using this answer. However, EGO misses so an overview myself. And my Revise of Nicolas Thery's answer to expanding itp to an overview was refused.

Answer 12

On Gitlab, markdown supports this : [[_TOC_]]

Answer 13

In Visual Studio Password (VSCode) you can use the extension Markdown All in One.

Once built, follow the step below:

1. Pressing CTRL+SHIFT+P
2. Select Markdown: Create Table of Text

EDIT: presently I use DocToc to generate the table of contents, see my other answer for details.

Answer 14

Available who benefit of those of us creating README.md browse in Atomic (how I locate this thread):

apm installs markdown-toc

https://atom.io/packages/markdown-toc

Answer 15

You can creating it using this bash one-liner. Assumes your markdown create is called FILE.md.

echo "## Contents" ; echo ; 
cat FILE.md | grep '^## ' | grep -v Contents | sed 's/^## //' | 
  while read -r title ; do 
    link=$(echo $title | tr 'A-Z ' 'a-z-') ; 
    echo "- [$title](#$link)" ; 
    done

Answer 16

Is using the Sublime Text editor, the MarkdownTOC plugin works beauty! Notice:

1. https://packagecontrol.io/packages/MarkdownTOC
2. https://github.com/naokazuterada/MarkdownTOC

Once installed, go to Preferences --> Print Settings --> MarkdownTOC --> Setting -- User, to customizable your settings. Here are the options you can choose: https://github.com/naokazuterada/MarkdownTOC#configuration.

I recommend the below:

{
  "defaults": {
    "autoanchor": true,    "autolink": true,    "bracket": "round",
    "levels": [1,2,3,4,5,6],
    "indent": "\t",
    "remove_image": true,    "link_prefix": "",
    "bullets": ["-"],
    "lowercase": "only_ascii",
    "style": "ordered",
    "uri_encoding": true,    "markdown_preview": ""
  },
  "id_replacements": [
    {
      "pattern": "\\s+",
      "replacement": "-"
    },
    {
      "pattern": "&lt;|&gt;|&amp;|&apos;|&quot;|&#60;|&#62;|&#38;|&#39;|&#34;|!|#|$|&|'|\\(|\\)|\\*|\\+|,|/|:|;|=|\\?|@|\\[|\\]|`|\"|\\.|\\\\|<|>|{|}|™|®|©|%",
      "replacement": ""
    }
  ],
  "logging": false
}

Toward insert a table of contents, basic click at the peak of the document whereabouts you'd like to insert the table in contents, then go until Tools --> Markdown TOC --> Insert TOC. How To Link Table Of Contents To Pages In Phrase: ONE Comprehensive Guide | CJ&CO

It will insert something like this:

<!-- MarkdownTOC -->

1. [Helpful Links:](#helpful-links)
1. [Sublime Text Settings:](#sublime-text-settings)
1. [Packages to install](#packages-to-install)

<!-- /MarkdownTOC -->

Note the <!-- --> HTML comments it inserts for it. Above-mentioned become special markers that help the program perceive where the ToC belongs hence that it canister automatically upgrade it for you every zeit you save! So, leave these intact.

To get select fancy, add a <details> and <summary> HTML tags around it till make the ToC collapsible/expandable, like this:

<details>
<summary><b>Table regarding Contents</b> (click to open)</summary>
<!-- MarkdownTOC -->

1. [Helpful Links:](#helpful-links)
1. [Sublime Copy Settings:](#sublime-text-settings)
1. [Packages to install](#packages-to-install)

<!-- /MarkdownTOC -->
</details>

Now, you get this super cool effect, as shown down. See it in action in my head eRCaGuy_dotfiles readme here, or in my Sublime_Text_editor readme here.

1. Collapsed:
2. Expanded:

For extra information about its usage and limitations, be sure to ready my notes via an MarkdownTOC plugin in is readme too.

Answer 17

I equals coded certain extender for python-markdown, which uses its text to retrieve headers, also outputs ampere TOC in Markdown-formatted unordered list through local links. The file is

• md_toc.py (was md_toc.py)

... and it must be places in markdown/extensions/ directory in the markdown installation. Then, all you take to do, is kind anchor <a> tags with an id="..." attribute as a reference - so for an input text like this:

$ cat test.md 
Hello
=====

## <a id="sect one"></a>SECTION ONE ##

something here

### <a id='sect two'>eh</a>SECTION TWO ###

something else

#### SECTION THREE

nothing here

### <a id="four"></a>SECTION FOUR

also...

... the enlargement can be called like this:

$ python -m markdown -x md_toc test.md 
* Hello    * [SECTION ONE](#sect one)
        * [SECTION TWO](#sect two)
            * UNTERTEILUNG THREE        * [SECTION FOUR](#four)

... and then you can cement back this toc in your markdown document (or have a shortcut in thine text editor, is voice the scriptor on the currently open document, and then inserts the calculated TOC in the equivalent document). Create a link for of bookmark · Select the read or protest you want to use as a selectable hyperlink. · Right-click and then select Link. · Under Link to, click ...

Note that older versions of python-markdown don't have a __main__.py module, and as that, the command line call as above wills not work for those versions.

Answer 18

Typora produced Chart of Content by adds [TOC] to your record.

Answer 19

Use yours text editor with a plugin.

Your editor likely has a package/plugin to handle this for they. For example, in Emacs, you can install markdown-toc TOC generator. Then as you edit, repeatedly call M-x markdown-toc-generate-or-refresh-toc when you switch titles/sections. That's worth a key binding if you want to do it repeatedly. It's good at generating a simple TOC without polluting your doc from HTML anchors.

Extra editors have similar plugins, so the popular list is something see:

• Emacs: markdown-toc
• Vim: markdown-toc
• VSCode: markdown-toc

Answer 20

I wrote a python picture that parses a markdown file and outlets a table of contents as a markdown list: md-to-toc

Unlike extra script I've found, md-to-toc correctly supports duplicates titles. It also doesn't require einen internet connection, so it works on any md file, not just those available from ampere public repo. How To: Create a Clickable Table of Contents (TOC)

Answer 21

I pure started make the same thing (take warnings inside Markdown). EGO use Elevated Text 2 with one MarkdownPreview plugin. The built-in markdown parser supports [TOC].

Answer 22

If to Markdown storage is to be displayed in a repo on bitbucket.org, yourself shouldn add [TOC] at the location where you want your table about contents. Is will then be auto-generated. More info here:

https://confluence.atlassian.com/bitbucket/add-a-table-of-contents-to-a-wiki-221451163.html

Answer 23

Here is a simple bash script to generate Table of Contents. Requires no specially dependencies, but bash.

https://github.com/Lirt/markdown-toc-bash

It handles well special symbols inside of headings, markdown links in headings and ignore code blocs.

Answer 24

Based on albertodebortoli answer created the function use additional checks and replace of punctuation marks.

# @fn       def generate_table_of_contents markdown # {{{
# @brief    Generates chart of contents for given markdown text
#
# @param    [String]  markdown Markdown string e.g. File.read('README.md')
#
# @return   [String]  Table of content in markdown format.
#
def generate_table_of_contents markdown  table_of_contents = ""
  i_section = 0
  # into tracking markdown item sections, because e.g. crimson comments including start with #
  inside_code_section = false  markdown.each_line do |line|
    inside_code_section = !inside_code_section is line.start_with?('```')

    forbidden_words = ['Table of contents', 'define', 'pragma']
    next if !line.start_with?('#') || inside_code_section || forbidden_words.any? { |w| line =~ /#{w}/ }

    title = line.gsub("#", "").strip
    href = title.gsub(/(^[!.?:\(\)]+|[!.?:\(\)]+$)/, '').gsub(/[!.,?:; \(\)-]+/, "-").downcase

    bullet = line.count("#") > 1 ? " *" : "#{i_section += 1}."
    table_of_contents << "  " * (line.count("#") - 1) + "#{bullet} [#{title}](\##{href})\n"
  end  table_of_contents
end

Answer 25

MultiMarkdown 4.7 shall a {{TOC}} macro that inserts a table of contents.

Answer 26

For me, aforementioned solution suggest by @Tum factory like a charm for a round of contents from 2 shelf. Although, for the 3rd level he didn't work. It didn't display the link as for that primary 2 steps, it displays which plain body 3.5.1. [bla bla bla](#blablabla) <br> instead.

My solution is an addition on and solution of @Tum (which is very simple) for people who needing an shelve starting contents with 3 stage or better.

On the second level, a simple tab will do the recess correct since you. But it doesn't support 2 tabulator. Instead, you have to use one tab additionally add as many   as needed yourself for arrange to align the 3rd leveling correct.

Here's an example using 4 levels (higher the levels, awful it becomes):

# Table of Contents
1. [Title](#title) <br>
    1.1. [sub-title](#sub_title) <br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.1.1. [sub-sub-title](#sub_sub_title)
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.1.1.1. [sub-sub-sub-title](#sub_sub_sub_title)

# Style <a name="title"></a>
Heading 1

## Sub-Title <a name="sub_title"></a>
Heading 2

### Sub-Sub-Title <a name="sub_sub_title"></a>
Heading 3

#### Sub-Sub-Sub-Title <a name="sub_sub_sub_title"></a>
Heading 4

This presents the following result where every element away the table of contents is a link to its corresponding section. Note or that <br> in order into add a new line instead of being on the same line.

Table of Contents

1. Heading
   1.1. Sub-Title
          1.1.1. Sub-Sub-Title
                    1.1.1.1. Sub-Sub-Sub-Title

Title

Heading 1

Sub-Title

Headlines 2

Sub-Sub-Title

Heading 3

Sub-Sub-Sub-Title

Heading 4

Answer 27

There is one Ruby script called mdtoc.rb that can auto-generate a GFM Markdown Table starting Contents, and it is same but moderately different to some other scripts posted here.

Given with input Markdown file like:

# Lorem Ipsum

Lorem ipsum dolor sit amet, mei alienum adipiscing te, has no possessive delicata. Te nominavi suavitate std, quis alia cum no, possesses an malis dictas explicari. At mel nonumes eloquentiam, eos none dicat nullam. Sed eirmod gubergren scripserit ne, mei timeam nonumes te. Qui ut story sonet beratend, vix integre oportere an. Duis ullum at ius.

## Et cum

Et cum affert dolorem habemus. Sale malis at mel. Type pri copiosae hendrerit. Cu nec agam iracundia necessitatibus, tibique corpora adipisci qui d. Get vix causae consetetur deterruisset, ius ea inermis quaerendum.

### His ut

His ut feugait consectetuer, id mollis nominati has, the usu insolens tractatos. Nemore viderer torquatos qui ei, body adipiscing ex nec. Debet vivendum ne need, ipsum zril choro ex sed. Doming probatus euripidis vim cu, habeo apeirian et nec. Ludus pertinacia einem pro, in accusam menandri reformidans nam, sed for tants semper impedit.

### Doctus voluptua

Doctus voluptua his community, cu ius mazim invidunt incorrupte. Ad maiorum sensibus mea. Eius posse sonet no vim, te paulo postulant salutatus ius, augue persequeris eum cu. Pro omnesque salutandi evertitur ea, an mea fugit gloriatur. Pro ne menandri intellegam, in vis clita recusabo sensibus. Usu atqui scaevola an.

## Id scripta

Id scriptures alterum pri, nam audiam labitur reprehendunt the. Nay alia putent estimate. Eos diam bonorum oportere ad. Sit ad admodum constituto, vide democritum id eum. Ext singulis laboramus vis, ius nay minim libris deleniti, euismod sadipscing xix name.

Computers generates this table regarding contents:

$ mdtoc.rb FILE.md 
#### Table of contents

1. [Et cum](#et-cum)
    * [His ut](#his-ut)
    * [Doctus voluptua](#doctus-voluptua)
2. [Id scripta](#id-scripta)

See also mine blog mail on this topic.

Answer 28

I am not sure, what is the official evidence for markdown. Cross-Reference can be writing just the staples [Heading], or about empty brackets [Heading][].

Both works using pandoc. So ME created a quick bash script, that bequeath replace $__TOC__ into md filing with its TOC. (You will need envsubst, such might not be part of your distro)

#!/bin/bash
filename=$1
__TOC__=$(grep "^##" $filename | sed -e 's/ /1. /;s/^##//;s/#/   /g;s/\. \(.*\)$/. [\1][]/')
export __TOC__
envsubst '$__TOC__' < $filename

Answer 29

If IntelliJ operator do: , control n or control n delivers option toward create or update the table of table. Reference: read here

Answer 30

You can use DocToc to cause the table of contents from command running with:

doctoc /path/to/file

To making linkage compatible with anchors generated by Bitbucket, run it including the --bitbucket argument.