• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

VuePress markdown 语法

Data: 2019-07-18 19:58:19Form: JournalClick: 1

# markdown 语法

  • Markdown 是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式
  • Markdown 编写的文档后缀为 .md, .markdown
  • 官网:http://www.markdown.cnopen in new window

# 一、文本

# 1、标题

# 这是一级标题

## 这是二级标题

### 这是三级标题

#### 这是四级标题

##### 这是五级标题

###### 这是六级标题

# 2、加粗

**这是加粗的文字**

__这是加粗的文字__

# 3、斜体

*这是加粗的文字*

_这是加粗的文字_

# 4、加粗、斜体

***这是加粗、斜体的文字***

___这是加粗、斜体的文字___

# 5、分割线

***

* * *

*****

- - -

----------

# 6、删除线

~~这是删除的文字~~

**~~这是加粗、删除的文字~~**

***~~这是加粗、斜体、删除的文字~~***

# 7、下划线

<u>带下划线文本</u>

# 8、链接

[欧阳克个人博客](http://www.ouyangke.cn)

# 二、段落

# 1、无序列表

  • 无序列表用 - + * 任何一种都可以,后面要添加一个空格
- 欧阳克
- 郭靖
- 黄蓉

+ 欧阳克
+ 郭靖
+ 黄蓉

* 欧阳克
* 郭靖
* 黄蓉

# 2、有序列表

1. 欧阳克
2. 郭靖
3. 黄蓉

# 3、多级列表

1. 欧阳克
   - 瞬息千里
   - 神驼雪山掌
   - 灵蛇拳法
2. 郭靖
   1. 九阴真经
   2. 降龙十八掌
   3. 左右互搏
3. 黄蓉
   - 落英神剑掌
   - 打狗棒法
   - 九阴真经

# 三、表格

 ID  |  姓名  |   别名
 :-- | :-:  | --:
 1   | 欧阳克 | 小毒物
 2   |  郭靖  | 郭大侠
 3   |  黄蓉  | 黄帮主

| ID  |  姓名  |   别名 |
| :-- | :-:  | --:   |
| 1   | 欧阳克 | 小毒物 |
| 2   |  郭靖  | 郭大侠 |
| 3   |  黄蓉  | 黄帮主 |
  • - 有一个就行
  • :- 居左、 :-: 居中、 -: 居右
  • 文字默认居左
  • 原生的语法两边都要用 | 包起来

# 四、区块

  • 使用 > 符号 ,后面跟一个空格
> 区块

> 欧阳锋
> > 欧阳克

# 五、代码

  • 用 ` 或 `` 包裹起来
`yarn` docs:dev # `npm` run docs:dev

`` yarn docs:dev (`) # npm run docs:dev ``
  • 用 ``` 包裹起来
```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div>欧阳克个人博客</div>
</body>
</html>
```
  • 可以指定代码语言
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div>欧阳克个人博客</div>
    </body>
</html>
```

# 六、图片

  1. 感叹号 ! 开头
  2. 方括号,里面放上图片的替代文字
  3. 普通括号,里面放上图片的网址。标题可选。
![图片名称](图片地址)
![图片名称](图片地址 "标题")

![欧阳克的头像](https://img.php.cn/upload/avatar/000/000/038/608672e86e92c486.jpg)

# 七、VuePress 示例

# VuePress

- 官网:https://www.vuepress.cn
- `VuePress``Vue` 驱动的静态网站生成器

---

## 一、介绍

- 简洁至上
  - 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- `Vue` 驱动
  - 享受 `Vue` + `webpack` 的开发体验,可以在 `Markdown` 中使用 `Vue` 组件,又可以使用 `Vue` 来开发自定义主题。
- 高性能
  - `VuePress` 会为每个页面预渲染生成静态的 `HTML`,同时,每个页面被加载的时候,将作为 `SPA` 运行。

---

## 二、安装 `Node.js`

- `VuePress` 需要 `Node.js` >= 8.6
- 官网:https://nodejs.org

---

## 三、安装 `VuePress`

### 1、创建并进入一个新目录

```php
mkdir vuepress-starter && cd vuepress-starter
```

### 2、包管理器进行初始化

```php
yarn init # npm init
```

```php
# 项目名称
question name (vuepress):
# 项目版本
question version (1.0.0):
# 项目描述
question description:
# 项目入口
question entry point (index.js):
# 项目存储库,如:git
question repository url:
# 项目作者
question author:
# 项目许可证
question license (MIT):
# 项目私有属性
question private:
```

- 根目录会新建一个文件:package.json

### 3、将 `VuePress` 安装为本地依赖

```php
yarn add -D vuepress # npm install -D vuepress
yarn global add vuepress # 或者:npm install -g vuepress
```

### 4、新建目录和文件

```php
mkdir docs && echo '# Hello VuePress' > docs/README.md
```

### 5、`package.json` 添加配置

```php
{
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    }
}
```

### 6、本地启动服务器

```php
yarn docs:dev # npm run docs:dev
```
Name:
<提交>