vuejs · ulivz · May 12, 2019 · Mar 13, 2019 · Mar 13, 2019 · Mar 31, 2019
diff --git a/packages/@vuepress/core/lib/client/app.js b/packages/@vuepress/core/lib/client/app.js
@@ -16,7 +16,6 @@ import Content from './components/Content.js'
 import ContentSlotsDistributor from './components/ContentSlotsDistributor'
 import OutboundLink from './components/OutboundLink.vue'
 import ClientOnly from './components/ClientOnly'
-import TOC from './components/TOC.vue'
 
 // suggest dev server restart on base change
 if (module.hot) {
@@ -47,8 +46,6 @@ Vue.component('ClientOnly', ClientOnly)
 // core components
 Vue.component('Layout', getLayoutAsyncComponent('Layout'))
 Vue.component('NotFound', getLayoutAsyncComponent('NotFound'))
-// markdown components
-Vue.component('TOC', TOC)
 
 // global helper for adding base path to absolute urls
 Vue.prototype.$withBase = function (path) {

diff --git a/packages/@vuepress/core/lib/client/components/HeaderList.vue b/packages/@vuepress/core/lib/client/components/HeaderList.vue
diff --git a/packages/@vuepress/core/lib/client/components/TOC.vue b/packages/@vuepress/core/lib/client/components/TOC.vue
diff --git a/packages/@vuepress/markdown/index.js b/packages/@vuepress/markdown/index.js
@@ -15,7 +15,6 @@ const componentPlugin = require('./lib/component')
 const hoistScriptStylePlugin = require('./lib/hoist')
 const convertRouterLinkPlugin = require('./lib/link')
 const snippetPlugin = require('./lib/snippet')
-const tocPlugin = require('./lib/tableOfContents')
 const emojiPlugin = require('markdown-it-emoji')
 const anchorPlugin = require('markdown-it-anchor')
 const {
@@ -32,7 +31,6 @@ module.exports = (markdown = {}) => {
   const {
     externalLinks,
     anchor,
-    toc,
     plugins,
     lineNumbers,
     beforeInstantiate,
@@ -93,10 +91,6 @@ module.exports = (markdown = {}) => {
       }, anchor)])
       .end()
 
-    .plugin(PLUGINS.TOC)
-      .use(tocPlugin, [toc])
-      .end()
-
   if (lineNumbers) {
     config
       .plugin(PLUGINS.LINE_NUMBERS)

diff --git a/packages/@vuepress/markdown/lib/tableOfContents.js b/packages/@vuepress/markdown/lib/tableOfContents.js
diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js
@@ -17,10 +17,19 @@ module.exports = (options, ctx) => ({
     }
   },
 
+  extendMarkdown (md) {
+    if (options.toc !== false) {
+      md.use(require('markdown-it-table-of-contents'), {
+        includeLevel: [2, 3],
+        ...options.toc
+      })
+    }
+  },
+
   plugins: [
     ['@vuepress/active-header-links', options.activeHeaderLinks],
-    '@vuepress/search',
-    '@vuepress/plugin-nprogress',
+    ['@vuepress/search'],
+    ['@vuepress/nprogress'],
     ['container', {
       type: 'tip',
       defaultTitle: {

diff --git a/packages/@vuepress/theme-default/package.json b/packages/@vuepress/theme-default/package.json
@@ -34,6 +34,7 @@
     "@vuepress/plugin-nprogress": "^1.0.0-alpha.47",
     "@vuepress/plugin-search": "^1.0.0-alpha.47",
     "docsearch.js": "^2.5.2",
+    "markdown-it-table-of-contents": "^0.4.3",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vuepress-plugin-container": "^2.0.0"

diff --git a/packages/docs/docs/config/README.md b/packages/docs/docs/config/README.md
@@ -214,21 +214,6 @@ Options for [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-
 
 The key and value pair will be added to `<a>` tags that point to an external link. The default option will open external links in a new window.
 
-### markdown.toc
-
-- Type: `Object`
-
-This attribute will control the behaviour of `[[TOC]]`. It contains the following options:
-
-- includeLevel: [number, number], level of headers to be included, defaults to `[2, 3]`.
-- containerClass: string, the class name for the container, defaults to `table-of-contents`.
-- markerPattern: RegExp, the regular expression for the marker to be replaced with TOC, defaults to `/^\[\[toc\]\]/im`.
-- listType: string or Array, labels for all levels of the list, defaults to `"ul"`.
-- containerHeaderHtml: string, an HTML string for container header, defaults to `""`.
-- containerFooterHtml: string, an HTML string for container footer, defaults to `""`.
-
-We also provide a [global component TOC](../guide/using-vue.md#toc) which allows for more free control by passing props directly to `<TOC>`.
-
 ### markdown.plugins
 
 You can install any markdown-it plugins through `markdown.plugins` option. It is similar with [using VuePress plugins](../plugin/using-a-plugin.html#using-a-plugin). You can either use Babel style or object style. The `markdown-it-` prefix is optional and can omit in the list.

diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md
@@ -101,25 +101,21 @@ For more details, check out the [Front Matter](./frontmatter.md) page.
 
 A list of all emojis available can be found [here](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json).
 
-## Table of Contents
+## Table of Contents <Badge text="default theme"/>
 
 **Input**
 
 ```md
 [[toc]]
 ```
 
-or
-
-```md
-<TOC/>
-```
-
 **Output**
 
 [[toc]]
 
-Rendering of TOC can be configured using the [`markdown.toc`](../config/README.md#markdown-toc) option, or as props of [TOC component](./using-vue.md#toc), like `<TOC list-type="ol" :include-level="[2, Infinity]"/>`.
+Rendering of TOC can be configured using the [`themeConfig.toc`](../theme/default-theme-config.md#table-of-contents) option.
+
+> You can also use the official plugin [vuepress-plugin-toc](https://vuepress.github.io/plugins/toc/) for an advanced `<TOC/>` component.
 
 ## Custom Containers <Badge text="default theme"/>
 

diff --git a/packages/docs/docs/guide/using-vue.md b/packages/docs/docs/guide/using-vue.md
@@ -224,28 +224,6 @@ Specify a specific slot for a specific page (.md) for rendering. This will be ve
 - [Markdown Slot](./markdown-slot.md)
 - [Writing a theme > Content Outlet](../theme/writing-a-theme.md#content-outlet)
 
-### TOC <Badge text="1.0.0-alpha.41+"/>
-
-- **Props**:
-  - `listType` - string or Array, defaults to `"ul"`
-  - `includeLevel` - [number, number], defaults to `[2, 3]`
-
-- **Slots**: `header`, `footer`
-
-- **Usage**:
-
-You can add a custom table of contents by specify some props to this component. `includeLevel` decides which level of headers should be included. `listType` decides the tags of lists. If specified as an array, the component will take the first element as the first-level list type and so on. If there are not enough values provided, the last value will be used for all the remaining list types.
-
-``` md
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>Custom Table of Contents</strong></p>
-</TOC>
-```
-
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>Custom Table of Contents</strong></p>
-</TOC>
-
 ### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/> <Badge text="default theme"/>
 
 - **Props**:

diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
@@ -304,6 +304,26 @@ sidebar: false
 ---
 ```
 
+## Table Of Contents
+
+``` js
+// .vuepress/config.js
+module.exports = {
+  themeConfig: {
+    toc: {
+      sidebar: 'auto'
+    }
+  }
+}
+```
+
+Options for [markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents#options). The default options are `{ includeLevel: [2, 3] }`.
+
+::: tip
+1. You should always use [`markdown.slugify`](../config/#markdown-slugify) instead of `themeConfig.toc.slugify` if you want to customize header ids.
+2. Setting `themeConfig.toc` to `false` will disable the `[[toc]]` syntax (in case you want to switch to other plugins, such as [vuepress-plugin-toc](https://vuepress.github.io/plugins/toc/)).
+:::
+
 ## Search Box
 
 ### Built-in Search

diff --git a/packages/docs/docs/zh/config/README.md b/packages/docs/docs/zh/config/README.md
@@ -206,21 +206,6 @@ VuePress 提供了一种添加额外样式的简便方法。你可以创建一
 
 这个键值对将会作为特性被增加到是外部链接的 `<a>` 标签上，默认的选项将会在新窗口中打开一个该外部链接。
 
-### markdown.toc
-
-- 类型: `Object`
-
-这个值将会控制 `[[TOC]]` 默认行为。它包含下面的选项：
-
-- includeLevel: [number, number]，决定哪些级别的标题会被显示在目录中，默认值为 `[2, 3]`。
-- containerClass: string，决定了目录容器的类名，默认值为 `table-of-contents`。
-- markerPattern: RegExp，决定了标题匹配的正则表达式，默认值为 `/^\[\[toc\]\]/im`。
-- listType: string 或 Array，决定了各级列表的标签，默认值为 `"ul"`。
-- containerHeaderHtml: string，在目录开头插入的 HTML 字符串，默认值为 `""`。
-- containerFooterHtml: string，在目录结尾插入的 HTML 字符串，默认值为 `""`。
-
-此外，我们还提供了[全局组件 TOC](../guide/using-vue.md#toc)，可以通过直接向 `<TOC>` 传递属性实现更加自由的控制。
-
 ### markdown.plugins
 
 你可以使用 `markdown.plugins` 来安装 markdown-it 插件。它的使用方法与[安装一个 VuePress 插件](../plugin/using-a-plugin.html#using-a-plugin)类似。你可以使用 Babel 语法或对象语法。`markdown-it-` 前缀同样是可以忽略的。

diff --git a/packages/docs/docs/zh/guide/markdown.md b/packages/docs/docs/zh/guide/markdown.md
@@ -99,25 +99,21 @@ lang: en-US
 
 :tada: :100:
 
-## 目录
+## 目录 <Badge text="默认主题"/>
 
 **输入**
 
 ```md
 [[toc]]
 ```
 
-或者
-
-```md
-<TOC/>
-```
-
 **输出**
 
 [[toc]]
 
-目录（Table of Contents）的渲染可以通过  [`markdown.toc`](../config/README.md#markdown-toc) 选项来配置，也可以在 [TOC 组件](./using-vue.md#toc)中直接传入，如 `<TOC list-type="ol" :include-level="[2, Infinity]"/>`。
+目录（Table of Contents）的渲染可以通过 [`themeConfig.toc`](../theme/default-theme-config.md#table-of-contents) 选项来配置。
+
+> 如果想要使用高级的 `<TOC/>` 组件，你也可以使用官方提供的 [vuepress-plugin-toc](https://vuepress.github.io/plugins/toc/) 插件。
 
 ## 自定义容器 <Badge text="默认主题"/>