Markdown创建页面和目录?

Markdown to create pages and table of contents?

我开始使用markdown做笔记。

我使用标记来查看我的降价笔记及其精美内容。

但是随着笔记变长,我很难找到想要的东西。

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

或者,有降价阅读器/编辑器可以做这种事情。搜索也将是一个很好的功能。

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


您可以尝试一下。

1
2
3
4
5
6
7
8
9
10
11
# 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)


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Table of contents
1. [Introduction](#introduction)
2. [Some paragraph](#paragraph1)
    1. [Sub paragraph](#subparagraph1)
3. [Another paragraph](#paragraph2)

## This is the introduction
Some introduction text, formatted in heading 2 style

## Some paragraph
The first paragraph text

### Sub paragraph
This is a sub paragraph, formatted in heading 3 style

## Another paragraph
The second paragraph text

产品:

目录

  • 介绍
  • 一些段落

  • 子段落
  • 另一段
  • 这是介绍

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

    一些段落

    第一段文字

    子段落

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

    另一段

    第二段文字


    对于Visual Studio Code用户,今天(2020年)使用的最佳选择是Markdown All in One插件。

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

    1
    ext install yzhang.markdown-all-in-one

    要生成TOC,请打开命令面板(Control / a ?? Shift P),然后选择Select Markdown: Create Table of Contents选项。

    另一个选择是Markdown TOC插件。

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

    1
    ext install markdown-toc

    要生成TOC,请打开命令面板(Control / a ?? Shift P)并选择Markdown TOC:Insert/Update选项,或使用Control / a ?? MT


    MultiMarkdown Composer似乎会生成一个目录表以在编辑时提供帮助。

    可能还有一个或另一个库可以生成TOC:请参阅Python Markdown TOC扩展。


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     #!/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


    1
    2
    3
    4
    5
    6
    7
    8
    # 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


    有两种方法可以在降价文档中创建目录(摘要)。

    1.手动

    1
    2
    3
    4
    5
    6
    7
    8
    # My Table of content
    - [Section 1](#id-section1)
    - [Section 2](#id-section2)


    ## Section 1

    ## Section 2

    2.以编程方式

    您可以使用例如为您生成摘要的脚本,看看我在github上的项目-summaryMD-

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


    由不同的Markdown解析器生成的锚标记不均匀。

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

    特征

  • 生成Markdown文件的目录。

    支持的Markdown解析器:

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

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

  • 屏幕截图

    vim-markdown-toc

    用法

    生成目录

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

  • :GenTocGFM

    以GFM链接样式生成目录。

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

  • :GenTocRedcarpet

    以Redcarpet链接样式生成目录。

    此命令适用于Jekyll或将Redcarpet用作Markdown解析器的其他任何地方。

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

  • 手动更新现有目录

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

    下载和文件

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


    您还可以使用pandoc("瑞士军刀")将"一种标记格式转换为另一种标记格式"。如果提供--toc自变量,它将自动在输出文档中生成目录。

    提示:如果要在html输出中显示目录,还需要提供-s来生成独立文档。

    示例shell命令行:

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

    您可以使用此bash单线生成它。假设您的markdown文件称为FILE.md

    1
    2
    3
    4
    5
    6
    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


    为了我们这些人的利益,在Atom中创建README.md文件(我如何找到此线程):

    1
    apm install markdown-toc

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


    如果要使用javascript / node.js工具,请查看markdown-toc。


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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ## 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)

    ----

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

    1
    ### 1.1. Markdown formatting cheatsheet

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

    1
    ### 1.1. Markdown formatting cheatsheet

    渲染示例

    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 text formatting
    • 2.2. Lists, Images, Code

    • 2.3. Special features

    优点

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

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

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

    • 视觉上以粗体显示强调目录中的第一部分。

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

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

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

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


    在Gitlab上,markdown支持以下功能:[[_TOC_]]


    在Visual Studio Code(VSCode)中,可以使用扩展Markdown All in One。

    安装后,请按照以下步骤操作:

  • CTRL SHIFT P
  • 选择Markdown:创建目录
  • 编辑:如今,我使用DocToc生成目录,有关详细信息,请参见我的其他答案。


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

    • md_toc.py(以前是 md_toc.py )

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    $ cat test.md
    Hello
    =====

    ## SECTION ONE ##

    something here

    ### ehSECTION TWO ###

    something else

    #### SECTION THREE

    nothing here

    ### SECTION FOUR

    also...

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

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

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

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


    我写了一个python脚本来解析markdown文件并输出目录作为markdown列表:md-to-toc

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


    我刚刚开始做同样的事情(在Markdown中记笔记)。我将Sublime Text 2与MarkdownPreview插件一起使用。内置的markdown解析器支持[TOC]


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

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

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

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

    Typora通过将[TOC]添加到文档中来生成目录。


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    # @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})\
    "
      end
      table_of_contents
    end

    MultiMarkdown 4.7具有一个{{TOC}}宏,用于插入目录。


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

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

    在第二层,一个简单的选项卡将为您正确地缩进。但它不支持2个标签。相反,您必须使用一个选项卡并根据需要添加任意数量的才能正确对齐第三级。

    这是一个使用4个级别的示例(级别越高,它变得越糟):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # Table of Contents
    1. [Title](#title)
        1.1. [sub-title](#sub_title)
        1.1.1. [sub-sub-title](#sub_sub_title)
        1.1.1.1. [sub-sub-sub-title](#sub_sub_sub_title)

    # Title
    Heading 1

    ## Sub-Title
    Heading 2

    ### Sub-Sub-Title
    Heading 3

    #### Sub-Sub-Sub-Title
    Heading 4

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

    目录

  • 标题
    1.1。字幕
    1.1.1。子标题
    1.1.1.1。子-子-子标题
  • 标题

    标题1

    字幕

    标题2

    子标题

    标题3

    子-子-子标题

    标题4


    如果要将Markdown文件显示在bitbucket.org的存储库中,则应在要目录的位置添加[TOC]。然后它将自动生成。更多信息在这里:

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


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

    书写。

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

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

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

    用法:

    • 在Markdown文件中,添加<toc>,您要将目录放在其中。
    • $python toc.py README.md(使用降价文件名而不是README.md)

    干杯!


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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # 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.

    它生成此目录:

    1
    2
    3
    4
    5
    6
    7
    $ 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)

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


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

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

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

    根据您的工作流程,您可能需要查看捷径

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

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


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

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


    如果使用Sublime Text编辑器,则MarkdownTOC插件可以很好地工作!参见:

  • https://packagecontrol.io/packages/MarkdownTOC
  • https://github.com/naokazuterada/MarkdownTOC
  • 一旦安装,请转到"首选项"->"程序包设置"->" MarkdownTOC"->"设置"-"用户"以自定义设置。您可以选择以下选项:https://github.com/naokazuterada/MarkdownTOC#configuration。

    我建议以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    {
     "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":"<|>|&||"||||||!|#|$|&|'|\\\\(|\\\\)|\\\\*|\\\\+|,|/|:|;|=|\\\\?|@|\\\\[|\\\\]|`|"|\\\\.|\\\\\\\\|<|>|{|}|a?¢|??|??|%",
         "replacement":""
        }
      ],
     "logging": false
    }

    要插入目录,只需在文档顶部单击要插入目录的位置,然后转到工具-> Markdown目录->插入目录。

    它将插入如下内容:

    1
    2
    3
    4
    5
    6
    7
    <!-- MarkdownTOC -->

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

    <!-- /MarkdownTOC -->

    请注意它为您插入的<!-- --> HTML注释。这些特殊标记可帮助程序了解ToC的位置,以便每次保存时自动为您更新它!因此,请保留这些原样。

    要获得更多效果,请在其周围添加一些<details><summary> HTML标签,以使ToC可折叠/展开,如下所示:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <details>
    <summary>Table of Contents (click to open)</summary>
    <!-- MarkdownTOC -->

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

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

    现在,您将获得如下所示的超酷效果。在我的主要eRCaGuy_dotfiles自述文件中,或在此处的Sublime_Text_editor自述文件中,可以对其进行操作。

  • 收合:
    enter


  • 只需添加幻灯片数量!它与markdown ioslides和revealjs演示文稿一起使用

    1
    2
    3
    4
    ## Table of Contents

     1. [introduction](#3)
     2. [section one](#5)

    这是我用于生成TOC的简短PHP代码,并使用锚点丰富所有标题:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    $toc = []; //initialize the toc to an empty array
    $markdown ="... your mardown content here...";

    $markdown = preg_replace_callback("/(#+)\\s*([^\
    ]+)/",function($matches) use (&$toc){
        static $section = [];
        $h = strlen($matches[1]);

        @$section[$h-1]++;
        $i = $h;
        while(isset($section[$i])) unset($section[$i++]);

        $anchor = preg_replace('/\\s+/','-', strtolower(trim($matches[2])));

        $toc[] = str_repeat('  ',$h-1)."* [".implode('.',$section).". {$matches[2]}](#$anchor)";
        return str_repeat('#',$h)."".implode('.',$section).".".$matches[2]."\
    \
    ";
    }, $markdown);

    然后可以打印处理后的降价和目录:

    1
    2
    3
    4
    5
    6
       print(implode("\
    ",$toc));
       print("\
    \
    ");
       print($markdown);

    您可以使用DocToc通过以下命令从命令行生成目录:

    1
    doctoc /path/to/file

    要使链接与Bitbucket生成的锚兼容,请使用--bitbucket参数运行它。


    嗯...用Markdown的标题!?

    即:

    #这等效于

    ##这等效于

    ###这等效于

    许多编辑器将向您显示目录。您还可以grep输入标题标签并创建自己的标题。

    希望有帮助!

    -JF