Markdown创建页面和目录?


356

我开始使用markdown做笔记。

我使用标记来查看我的降价记录及其美观。

但是随着我的笔记越来越长,我发现很难找到想要的东西。

我知道markdown可以创建表,但是它能够创建目录,跳到各节或在markdown中定义页面节吗?

另外,是否有降价阅读器/编辑器可以做到这一点。搜索也将是一个很好的功能。

简而言之,我想使它成为我很棒的笔记工具和功能,就像写书等一样。


2
如果您想使用javascript / node.js工具,请尝试marked-toc
jonschlinkert,2014年

@jonschlinkert您应该提交它作为答案!目前,答案仅建议使用非免费工具或Python工具。并不是一个很好的选择。
米(Domi)2014年

8
我也许应该提到在LaTeX中,这是通过实现的\tableofcontents。如果要重新设计轮子,最好复制好零件。
Eero Aaltonen


同样,reStructuredText具有用于目录的内置指令,该指令的最简单形式类似于just .. contents::
saaj

Answers:



393

您可以尝试一下。

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


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

10
上面的第三个示例不起作用。 ## Example ## "Example2" ## Third Example<a name="third-example" /> 到目前为止,我是唯一可以吞噬空间的方法。#Third在上面的代码段中,第3个标记肯定会解释为-- 后跟一个空格-然后是示例字?连字符根本不起作用。谢谢
twobob '16

该示例可以用作一个以上单词的示例。所有单词都分解为无大写字母和空格。
瑞克

6
在RStudio中工作正常。只是想补充一下,德国的变音符,例如ü需要在变音符中没有变音符,即1. [Einführung](#einfuhrung)
steinbock

4
在Bitbucket v4.5.2
Mike

1
第四个例子就是我想要的。谢谢!
kenecaswell

218

这是一个有用的方法。应该在任何MarkDown编辑器中产生可点击的引用。

# Table of 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 paragraph, formatted in heading 3 style

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

产生:

目录

  1. 介绍
  2. 一些段落
    1. 子段落
  3. 另一段

这是介绍

一些介绍文字,格式为标题2的样式

一些段落

第一段文字

子段落

这是一个子段落,标题3格式

另一段

第二段文字


21
我喜欢将锚标记放在标题上方的行上,因此单击链接时,标题会显示在页面上。
mgarey '17

4
这对我来说是唯一有用的。对于长标题,没有锚标记是不可能做到的。
马特·弗莱彻

真的很好 我开始在所有Jupyter笔记本中放置一个目录,以便在各个部分之间快速导航。
jackdbd

@mgarey只需将锚点放在第一位:## <a name="foo" /> Foo
tobias_k

40

对于Visual Studio Code用户,一个好主意是使用Markdown TOC插件。

要安装它,请启动VS Code快速打开(Control/⌘+ P),粘贴以下命令,然后按Enter。

ext install markdown-toc

要生成目录,请打开命令选项板(Control/⌘+ Shift+ P)并选择Markdown TOC:Insert/Update option或使用Control/⌘+ MT


7
注意:我刚刚发现,使用常规VSCode可以建立到标头的markdown链接:[Section Foo](#foo-header-title)它甚至可以在预览模式之外使用(即在普通markdown中)。
kitsu.eb

4
VSCode的另一种选择是vscode-markdown,它具有多种功能,其中包括ToC
CiprianTomoiagă18-10-26

26

您可以尝试使用此ruby脚本从markdown文件生成TOC。

 #!/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 if 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

大!仅需注意,可能要在其他预处理器指令中将ifndefinclude和和添加endif到禁止单词列表中。同样,在循环范围之外定义列表避免了每次迭代都必须重新实例化它。另外,这将获取使用#注释语法(包括Ruby)的任何语言的注释,这不是很好。如果您愿意,我愿意进行编辑。但是,这是一个很好的开始,并且对我而言效果很好。非常感谢!
杰夫·克莱因

这仅适用于atx标题(即以开头的标题#),不适用于setext 标题(带下划线的标题)。
gozzilli '16

谢谢你,如果你正在使用它作为栏杆上的红地毯,那你应该选择 title.parameterizehref,谢谢!
亚历克西斯

25

在减价文档中有两种创建目录(摘要)的方法。

1.手动

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

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

2.以编程方式

您可以使用,例如,对于您汇总生成一个脚本,看看我的项目在GitHub上- summarizeMD -

我也尝试了其他脚本/ npm模块(例如doctoc),但是没有人使用工作锚来重现TOC。


``<div id = ...`无法被MarkdownPad2(Windows)识别
chmike

仅适用于同一文件夹,不适用于setext标题。
gozzilli '16

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

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

如果您额外使用markdown,请别忘了可以为链接,标题,代码围栏和图像添加特殊属性。
https://michelf.ca/projects/php-markdown/extra/#spe-attr


11

由不同的Markdown解析器生成的Anchor标签不是偶数。

如果您正在使用Markdown解析器GFM(GitHub Flavored Markdown)或Redcarpet,我编写了一个Vim插件来处理目录。

特征

  1. 生成Markdown文件的目录。

    支持的Markdown解析器:

    • GFM(GitHub风味Markdown)
    • 红地毯
  2. 更新现有目录。

  3. 保存时自动更新现有目录。

屏幕截图

vim-markdown-toc

用法

生成目录

将光标移到要追加目录的行,然后在适合您的位置下面键入命令。光标进入目录后,该命令将生成标题。

  1. :GenTocGFM

    以GFM链接样式生成目录。

    该命令适用于GitHub存储库中的Markdown文件,例如README.md,以及适用于GitBook的Markdown文件。

  2. :GenTocRedcarpet

    以Redcarpet链接样式生成目录。

    该命令适用于Jekyll或其他使用Redcarpet作为其Markdown解析器的地方。

    您可以在此处查看以了解GFM和Redcarpet样式目录链接之间的区别。

手动更新现有目录

通常,您不需要这样做,默认情况下,现有目录将在保存时自动更新。如果要手动执行,只需使用:UpdateToc命令。

下载和文件

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





7

您可以使用此bash单线生成它。假设您的markdown文件称为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

这很棒。值得将其重写为一个适当的脚本,并以文件名作为参数,也许还要处理子节。
MasterScrat

6

我刚刚对扩展进行了编码,该扩展python-markdown使用其解析器来检索标题,并以Markdown格式输出带有本地链接的无序列表,生成一个TOC。该文件是

...,并且应将其放置在markdown/extensions/markdown安装目录中。然后,您要做的就是键入<a>带有id="..."属性作为参考的锚标记-对于这样的输入文本:

$ 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...

...扩展名可以这样称呼:

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

...然后您可以将此目录粘贴回markdown文档中(或在文本编辑器中使用快捷方式,该快捷方式将调用当前打开的文档中的脚本,然后将生成的目录插入到同一文档中)。

请注意,较旧的版本python-markdown没有__main__.py模块,因此,上述命令行调用不适用于那些版本。


6

如其他答案所述,有多种方法可以自动生成目录。大多数都是开源软件,可以适应您的需求。

但是,我所缺少的是使用Markdown提供的有限选项的目录格式,其外观具有视觉吸引力。我们提出以下内容:

## 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. Basic text formatting](#heading--2-1)

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

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

----

在文档内部,您将放置目标子部件标记,如下所示:

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

根据您在哪里使用Markdown以及如何使用Markdown,以下内容也应该起作用,并提供美观的Markdown代码:

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

渲染示例

内容

1.降价

2. BBCode格式


优点

  • 您可以根据需要添加任意数量的章节和子章节。在目录中,这些将显示为更深层的嵌套无序列表。

  • 不使用有序列表。这些将创建缩进,不链接数字,并且不能用于创建十进制分类编号(如“ 1.1”)。

  • 第一层不使用列表。在这里,可以使用无序列表,但不是必须的:缩进和项目符号只会增加视觉混乱,并且此处没有任何功能,因此我们根本不使用列表作为第一个ToC级别。

  • 视觉上用粗体突出显示目录中的第一部分。

  • 在浏览器的URL栏中看起来“漂亮”的简短,有意义的子部分标记,例如#heading--1-1包含实际标题的已转换部分的标记,而不是标记。

  • 该代码将H2标题(## …)用于部分,将H3标题(### …)用于子标题等。这使源代码更易于阅读,因为## …与以H1标题开头的部分相比,滚动时提供了更强的视觉提示(# …)。当您使用H1标题作为文档标题本身时,它在逻辑上仍然保持一致。

  • 最后,我们添加了一个很好的水平规则,以将目录与实际内容分开。

有关此技术以及我们如何在论坛软件Discourse中使用它的更多信息,请参见此处


5

我编写了一个Python脚本,用于解析markdown文件并输出目录作为markdown列表:md-to-toc

与我发现的其他脚本不同,md-to-toc正确支持重复的标题。它还不需要互联网连接,因此它可用于任何md文件,而不仅限于公共仓库中可用的文件。






4

只需将文本编辑器与插件配合使用即可。

您的编辑器很可能有一个软件包/插件来为您处理。例如,在Emacs中,您可以安装markdown-toc TOC生成器。然后在编辑时,只需反复调用M-x markdown-toc-generate-or-refresh-toc。如果您想经常这样做,则值得进行键绑定。擅长生成简单的目录,而不会用HTML锚点污染文档。

其他编辑器也有类似的插件,因此受欢迎的列表如下:


2

基于albertodebortoli的答案创建了带有附加检查和标点符号替换功能。

# @fn       def generate_table_of_contents markdown # {{{
# @brief    Generates table 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
  # to track markdown code sections, because e.g. ruby comments also start with #
  inside_code_section = false
  markdown.each_line do |line|
    inside_code_section = !inside_code_section if 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


2

对我来说,@ Tum提出的解决方案就像一个魅力,适用于具有2个级别的目录。但是,对于第3级,它不起作用。它没有显示前两个级别的链接,而是显示纯文本3.5.1. [bla bla bla](#blablabla) <br>

我的解决方案是@Tum解决方案的补充(非常简单),适用于需要3级或以上目录的人们。

在第二级,一个简单的选项卡将为您正确地缩进。但它不支持2个标签。相反,您必须使用一个标签并添加尽可能多的标签&nbsp;自己所需的数量,以便正确对齐第三级。

这是一个使用4个级别的示例(更高的级别,太糟糕了):

# 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)

# Title <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

这给出了以下结果,其中目录的每个元素都是指向其相应部分的链接。另请注意<br>,为了添加新行而不是位于同一行。

目录

  1. 标题
    1.1。标题
           1.1.1。子标题
                     1.1.1.1。子-子-子标题

标题

标题1

字幕

标题2

子标题

标题3

子-子-子标题

标题4


1

根据您的工作流程,您可能需要考虑简化

这是原始目录(http://strapdownjs.com)的一个分支,它添加了目录的生成。

如果您不愿意编写html文件,则回购文件上有一个apache配置文件(可能尚未正确更新),可以即时打包纯净的markdown。


1

我不确定降价的官方文件是什么。交叉引用可以只写在方括号中[Heading],也可以用空括号括起来[Heading][]

两者都可以使用pandoc。因此,我创建了一个快速的bash脚本,它将md文件中的$ TOC替换为其TOC。(您将需要envsubst,这可能不是您发行版的一部分)

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

1

如果碰巧使用Eclipse,则可以使用Ctrl+ O(概述)快捷方式,这将显示与目录等效的内容,并允许在节标题中进行搜索(自动完成)。

您也可以打开“大纲”视图(“窗口”->“显示视图”->“大纲”),但没有自动完成搜索。


1

使用toc.py是一个很小的python脚本,它会为您的markdown生成目录。

用法:

  • 在Markdown文件中,添加<toc>目录的放置位置。
  • $python toc.py README.md(使用markdown文件名而不是README.md

干杯!


您的脚本不错,但是不会在每个标题之前创建锚点。至少在位桶中是必需的。
Paul Rougieux

1

我使用了https://github.com/ekalinin/github-markdown-toc,它提供了一个命令行实用程序,可从markdown文档自动生成目录。

没有插件,宏或其他依赖项。安装实用程序后,只需将实用程序的输出粘贴到文档中您想要目录的位置。使用非常简单。

$ cat README.md | ./gh-md-toc -


1

有一个名为mdtoc.rb的Ruby脚本可以自动生成GFM 降价目录,它与此处发布的其他一些脚本类似但略有不同。

给定一个输入Markdown文件,例如:

# Lorem Ipsum

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

## Et cum

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

### His ut

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

### Doctus voluptua

Doctus voluptua his eu, 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 scripta alterum pri, nam audiam labitur reprehendunt at. No alia putent est. Eos diam bonorum oportere ad. Sit ad admodum constituto, vide democritum id eum. Ex singulis laboramus vis, ius no minim libris deleniti, euismod sadipscing vix id.

它生成以下目录:

$ 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)

另请参阅我关于此主题的博客文章

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.