diff --git a/docs/kitchen/sink.md b/docs/kitchen/sink.md deleted file mode 100644 index e5825bfc..00000000 --- a/docs/kitchen/sink.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -foo: 123 -bar: 234 ---- - -# Kitchen Sink - -## Relative Links - -- [Go home](../README.md) -- [Setup](../setup.md) - -## Syntax Highlighting - -``` js -const a = 123 -``` - -``` html{2,10-13} -
-

Original message: "{{ message }}"

-

Computed reversed message: "{{ reversedMessage }}"

-
- - -``` - -## Interpolation - -- Foo is {{ $page.frontmatter.foo }} -- Bar is {{ $page.frontmatter.bar }} - -## Using Site Data - -logo diff --git a/docs/markdown.md b/docs/markdown.md index b5761d2f..0fd31b3f 100644 --- a/docs/markdown.md +++ b/docs/markdown.md @@ -1,17 +1,100 @@ # Markdown Extensions -[[toc]] - ## Links +- Inbound links ending in `.md` or `.html` are converted to `` for SPA navigation. + + - [Home](/) + - [Setup](./setup.md#quickstart) + +- Outbound links automatically gets `target="_blank"`: [vuejs.org](https://vuejs.org) + ## Header Anchors +Headers automatically get anchor links applied. + ## Table of Contents +**Input** + +``` markdown +[[toc]] +``` + +**Output** + +[[toc]] + ## Custom Containers -## Configuration +**Input** -## Syntax Highlighting +``` markdown +::: tip +This is a tip +::: -Highlight lines +::: warning +This is a warning +::: + +::: danger +This is a dangerous thing +::: +``` + +**Output** + +::: tip +This is a tip +::: + +::: warning +This is a warning +::: + +::: danger +This is a dangerous thing +::: + +## Line Highlighting in Code Blocks + +**Input** + +```` markdown +``` js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +```` + +**Output** + +``` js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` + +## Emoji + +**Input** + +``` markdown +:tada: :100: +``` + +**Output** + +:tada: :100: + +## Custom Configuration diff --git a/docs/test.md b/docs/test.md deleted file mode 100644 index 75fc70e4..00000000 --- a/docs/test.md +++ /dev/null @@ -1,5 +0,0 @@ -## Dynamic Component - -
- -
diff --git a/docs/using-vue.md b/docs/using-vue.md index b0c6fb1a..243ba442 100644 --- a/docs/using-vue.md +++ b/docs/using-vue.md @@ -2,11 +2,57 @@ ## Templating +Each markdown file is first compiled into HTML and then passed on as a Vue component to `vue-loader`. This means you can use Vue-style interpolation in text: + +**Input** + +``` markdown +{{ 1 + 1 }} +``` + +**Output** + +
{{ 1 + 1 }}
+ +Directives also work: + +**Input** + +``` markdown +{{ i }} +``` + +**Output** + +
{{ i }}
+ +The compiled component does not have any private data but do have access to the [site metadata](./theming.md#site-and-page-metadata). For example: + +**Input** + +``` markdown +{{ $page }} +``` + +**Output** + +
{{ $page }}
+ +## Escaping + +By default, fenced code blocks are automatically wrapped with `v-pre`. If you want to display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container: + +``` markdown +::: v-pre +`{{ This will be displayed as-is }}` +::: +``` + ## Using Components Any `*.vue` file found in `.vuepress/components` are automatically registered as global async components. For example: -``` bash +``` . └── .vuepress    └── components @@ -22,9 +68,11 @@ Inside any markdown file you can then use the component like so: ``` ::: warning -Note **components must be nested inside a `
`**, because otherwise they'd be automatically wrapped inside a `

`, which can only contain inline elements. +Note **components must be nested inside a `

`**, because otherwise they'd be automatically wrapped inside a `

`, which can only contain inline elements. If your component contains block level elements (it mostly likely does), it will cause hydration mismatch in static builds. ::: -## Style & Script +## Script & Style Hoisting (TODO) + +Sometimes you may need to apply some JavaScript or CSS only to the current page. In those case you can directly write root-level `