Skip to content

docs: add refs to custom container #1441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 13, 2019
Merged

docs: add refs to custom container #1441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c840363
update link docs
shigma Mar 13, 2019
a55d744
update markdown.md
shigma Mar 13, 2019
411a49f
Merge branch 'master' into docs/custom-container
shigma Mar 13, 2019
aefbfec
Merge branch 'master' into docs/custom-container
shigma Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions packages/docs/docs/guide/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ or

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]"/>`.

## Custom Containers
## Custom Containers <Badge text="default theme"/>

**Input**

Expand Down Expand Up @@ -165,6 +165,10 @@ Danger zone, do not proceed
Danger zone, do not proceed
:::

**Also see:**

- [@vuepress/plugin-container](../plugin/official/plugin-container.md)

## Syntax Highlighting in Code Blocks

VuePress uses [Prism](https://prismjs.com/) to highlight language syntax in markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
Expand Down Expand Up @@ -291,7 +295,7 @@ module.exports = {
}
</style>

## Import Code Snippets <Badge text="beta" type="warn"/> <Badge text="0.10.1+" type="tip"/>
## Import Code Snippets <Badge text="beta" type="warn"/>

You can import code snippets from existing files via following syntax:

Expand All @@ -316,7 +320,7 @@ It also supports [line highlighting](#line-highlighting-in-code-blocks):
<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}

::: tip
Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of `@` is `process.cwd()`.
Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of `@` is `process.cwd()`.
:::


Expand Down
42 changes: 23 additions & 19 deletions packages/docs/docs/zh/guide/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ lang: en-US

## GitHub 风格的表格

**Input**
**输入**

```
| Tables | Are | Cool |
Expand All @@ -79,7 +79,7 @@ lang: en-US
| zebra stripes | are neat | $1 |
```

**Output**
**输出**

| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
Expand All @@ -89,19 +89,19 @@ lang: en-US

## Emoji

**Input**
**输入**

```
:tada: :100:
```

**Output**
**输出**

:tada: :100:

## 目录

**Input**
**输入**

```md
[[toc]]
Expand All @@ -113,15 +113,15 @@ lang: en-US
<TOC/>
```

**Output**
**输出**

[[toc]]

目录（Table of Contents）的渲染可以通过 [`markdown.toc`](../config/README.md#markdown-toc) 选项来配置，也可以在 [TOC 组件](./using-vue.md#toc)中直接传入，如 `<TOC list-type="ol" :include-level="[2, Infinity]"/>`。

## 自定义容器
## 自定义容器 <Badge text="默认主题"/>

**Input**
**输入**

```
::: tip
Expand All @@ -137,7 +137,7 @@ This is a dangerous warning
:::
```

**Output**
**输出**

::: tip
This is a tip
Expand All @@ -163,11 +163,15 @@ Danger zone, do not proceed
Danger zone, do not proceed
:::

**参考:**

- [@vuepress/plugin-container](../plugin/official/plugin-container.md)

## 代码块中的语法高亮

VuePress 使用了 [Prism](https://prismjs.com/) 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言，你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名：

**Input**
**输入**

````
``` js
Expand All @@ -178,7 +182,7 @@ export default {
```
````

**Output**
**输出**

``` js
export default {
Expand All @@ -187,7 +191,7 @@ export default {
}
```

**Input**
**输入**

````
``` html
Expand All @@ -202,7 +206,7 @@ export default {
```
````

**Output**
**输出**

``` html
<ul>
Expand All @@ -220,7 +224,7 @@ export default {

## 代码块中的行高亮

**Input**
**输入**

````
``` js {4}
Expand All @@ -234,7 +238,7 @@ export default {
```
````

**Output**
**输出**

``` js{4}
export default {
Expand Down Expand Up @@ -290,7 +294,7 @@ module.exports = {
}
</style>

## 导入代码段 <Badge text="beta" type="warn"/> <Badge text="0.10.1+" type="tip"/>
## 导入代码段 <Badge text="beta" type="warn"/>

你可以通过下述的语法导入已经存在的文件中的代码段：

Expand All @@ -304,18 +308,18 @@ module.exports = {
<<< @/filepath{highlightLines}
```

**Input**
**输入**

```
<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}
```

**Output**
**输出**

<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}

::: tip 注意
由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，此处的 `@` 默认值是 `process.cwd()`。
由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，此处的 `@` 默认值是 `process.cwd()`。
:::

## 进阶配置
Expand Down