Harder Better Faster Stronger

Appearance

Markdown ​

Comments ​

注释不会渲染在页面上

syntax

txt
<!-- This is a comment, it's not rendered on the page. -->

output

Paragraphs ​

syntax

txt
这一行和下一行在渲染后不会换行，
即使在编辑器中已经换行且不会格式化为一行

想要换行需要空行

output

这一行和下一行在渲染后不会换行， 即使在编辑器中已经换行且不会格式化为一行

想要换行需要空行

Headings ​

SyntaxOutput
# h1

h1

## h2

h2

### h3

h3

#### h4

h4

##### h5
h5
###### h6
h6

Styling text ​

SyntaxOutput
**bold**bold
_italic_italic
~~strikethrough~~strikethrough

只要是链接，在 Github 中的渲染结果没有区别

下面的外部链接后边有图标是因为 VitePress 的特殊处理

SyntaxOutput
[外部链接](https://google.com)外部链接
[内部链接，跳转页面](/)内部链接，跳转页面
[内部链接，页面内跳转](#headings)内部链接，页面内跳转

Quoting text ​

syntax

txt
> nested depth 0
>
> > nested depth 1
> >
> > > nested depth 2
> > >
> > > > nested depth 3
> > > >
> > > > nested depth 3
> >
> > nested depth 1
>
> nested depth 0

output

nested depth 0

nested depth 1

nested depth 2

nested depth 3

nested depth 3

nested depth 1

nested depth 0

Table ​

下面看到的语法中的空格不是必要的，是 VsCode 插件格式化的结果

对齐方式是由:确定的

不可合并单元格，仅支持简单表格，因为复杂表格用这个语法非常难写，所以从设计上就不应该支持，虽然某些插件也可以做到

syntax

txt
| head0    | head1    |
| :------- | :------- |
| content0 | content1 |
| content2 | content3 |
| content4 | content5 |

|    head0 |    head1 |
| -------: | -------: |
| content0 | content1 |
| content2 | content3 |
| content4 | content5 |

| head0    |    head1 |
| :------- | -------: |
| content0 | content1 |
| content2 | content3 |
| content4 | content5 |

|    head0 | head1    |
| -------: | :------- |
| content0 | content1 |
| content2 | content3 |
| content4 | content5 |

|  head0   |  head1   |
| :------: | :------: |
| content0 | content1 |
| content2 | content3 |
| content4 | content5 |

output

head0head1
content0content1
content2content3
content4content5
head0head1
content0content1
content2content3
content4content5
head0head1
content0content1
content2content3
content4content5
head0head1
content0content1
content2content3
content4content5
head0head1
content0content1
content2content3
content4content5

Emoji ​

所有支持的 emoji 在这里

SyntaxOutput
:tada:🎉
:x:❌

Image ​

Github 不支持定义图片大小

syntax

txt
![这里可以为空，目的是图片挂掉时显示这里的内容，这里是内部资源](./assets/github-mark.png)
![这里是外部资源](https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png)

[![这里是内部资源，且设置了图片大小，且是个链接](./assets/github-mark.png =30x30)](https://github.com)
![这里是外部资源，且设置了图片大小](https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png =30x30)

output

这里可以为空，目的是图片挂掉时显示这里的内容，这里是内部资源这里是外部资源

这里是内部资源，且设置了图片大小，且是个链接这里是外部资源，且设置了图片大小

List ​

无序链表的子项相比于父项是缩进2 个空格

有序链表的子项相比于父项是缩进3 个空格

syntax

txt
- 1
  - 10
  - 11
  - 12
- 2
  - 20
    - 200
  - 21
- 3

---

1. 1
   1. 10
   2. 11
   3. 12
2. 2
   1. 20
      1. 200
   2. 21
3. 3

---

- [ ] 1
  - [ ] 10
  - [ ] 11
  - [x] 12
- [ ] 2
  - [x] 20
    - [ ] 200
  - [ ] 21
- 3

---

1. [ ] 1
   1. [ ] 10
   2. [ ] 11
   3. [x] 12
2. [ ] 2
   1. [x] 20
      1. [ ] 200
   2. [ ] 21
3. 3

output

  • 1
    • 10
    • 11
    • 12
  • 2
    • 20
      • 200
    • 21
  • 3
  1. 1
    1. 10
    2. 11
    3. 12
  2. 2
    1. 20
      1. 200
    2. 21
  3. 3
  • 1
    • 10
    • 11
    • 12
  • 2
    • 20
      • 200
    • 21
  • 3
  1. 1
    1. 10
    2. 11
    3. 12
  2. 2
    1. 20
      1. 200
    2. 21
  3. 3

Container ​

与Quoting text语法很相似

下面高亮的语法不可在 Github 使用

syntax

txt
> [!NOTE]
> content

> [!NOTE] rename
> content

> [!TIP]
> content

> [!TIP] rename
> content

> [!IMPORTANT]
> content

> [!IMPORTANT] rename
> content

> [!WARNING]
> content

> [!WARNING] rename
> content

> [!CAUTION]
> content

> [!CAUTION] rename
> content

::: details
content
:::

::: details rename
content
:::

output

NOTE

content

rename

content

TIP

content

rename

content

IMPORTANT

content

rename

content

WARNING

content

rename

content

CAUTION

content

rename

content

Details

content

rename

content

Inline code ​

与下面的Quoting code不同，这里的 code 没有语言标识符来高亮关键字，一般用于简短的命令

syntax

txt
`pnpm add -g pnpm@latest`

`brew install axel`

`flutter pub get`

更常用的是在一段话中夹杂着 inline code，比如当你要运行这个文档时，先进行`git clone 这个仓库的地址`，然后在这个项目的根目录运行`pnpm i`来安装依赖，接着运行`pnpm start`来启动项目并将 terminal 中输出的网址复制到浏览器就可以看到运行结果了，最后当你需要上传修改后的代码时先运行`git add .`以添加所有已修改文件到暂存区，然后运行`git commit -m`这个版本的信息'将代码提交到本地，然后运行`git push origin main`将修改后的代码同步到服务器。

output

pnpm add -g pnpm@latest

brew install axel

flutter pub get

更常用的是在一段话中夹杂着 inline code，比如当你要运行这个文档时，先进行git clone 这个仓库的地址，然后在这个项目的根目录运行pnpm i来安装依赖，接着运行pnpm start来启动项目并将 terminal 中输出的网址复制到浏览器就可以看到运行结果了，最后当你需要上传修改后的代码时先运行git add .以添加所有已修改文件到暂存区，然后运行git commit -m这个版本的信息'将代码提交到本地，然后运行git push origin main将修改后的代码同步到服务器。

Quoting code ​

所有支持的语言在这里

syntax

txt
```html
<!-- 注意看标注语言是html，表示这是HTML代码 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>
```

```css
/* 注意看标注语言是css，表示这是CSS代码 */
html,
body {
  margin: 0;
}
```

```js
// 注意看标注语言是js，表示这是JavaScript代码
const sum = (a, b) => a + b;
export default sum;
```

```ts
// 注意看标注语言是ts，表示这是TypeScript代码
const sum = (a: string, b: string) => a + b;
export default sum;
```

```dart
// 注意看标注语言是dart，表示这是Dart代码
void main() {
  print('Hello, World!');
}
```

```rs
// 注意看标注语言是rs，表示这是Rust代码
fn main() {
  println!("Hello, World!");
}
```

```sh
# 注意看标注语言是sh，表示这是Shell代码
#! /bin/bash
mkdir dir
touch dir/file.txt
```

```mermaid
flowchart
A --> B
```

output

html
<!-- 注意看标注语言是html，表示这是HTML代码 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>
css
/* 注意看标注语言是css，表示这是CSS代码 */
html,
body {
  margin: 0;
}
js
// 注意看标注语言是js，表示这是JavaScript代码
const sum = (a, b) => a + b;
export default sum;
ts
// 注意看标注语言是ts，表示这是TypeScript代码
const sum = (a: string, b: string) => a + b;
export default sum;
dart
// 注意看标注语言是dart，表示这是Dart代码
void main() {
  print('Hello, World!');
}
rs
// 注意看标注语言是rs，表示这是Rust代码
fn main() {
  println!("Hello, World!");
}
sh
# 注意看标注语言是sh，表示这是Shell代码
#! /bin/bash
mkdir dir
touch dir/file.txt
null

Code groups ​

还是Quoting code中 syntax 的代码，这次以 tab 的方式显示

在语言标识符后面改名，一般是一个小项目的所有文件放在一起看，所以文件名也跟重要

syntax

txt
:::code-group

```html [index.html]
<!-- 注意看标注语言是html，表示这是HTML代码 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>
```

```css [index.css]
/* 注意看标注语言是css，表示这是CSS代码 */
html,
body {
  margin: 0;
}
```

```js [main.js]
// 注意看标注语言是js，表示这是JavaScript代码
const sum = (a, b) => a + b;
export default sum;
```

```ts [main.ts]
// 注意看标注语言是ts，表示这是TypeScript代码
const sum = (a: string, b: string) => a + b;
export default sum;
```

```dart [main.dart]
// 注意看标注语言是dart，表示这是Dart代码
void main() {
  print('Hello, World!');
}
```

```rs [main.rs]
// 注意看标注语言是rs，表示这是Rust代码
fn main() {
  println!("Hello, World!");
}
```

```sh [deploy.sh]
# 注意看标注语言是sh，表示这是Shell代码
#! /bin/bash
mkdir dir
touch dir/file.txt
```

:::

output

html
<!-- 注意看标注语言是html，表示这是HTML代码 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>
css
/* 注意看标注语言是css，表示这是CSS代码 */
html,
body {
  margin: 0;
}
js
// 注意看标注语言是js，表示这是JavaScript代码
const sum = (a, b) => a + b;
export default sum;
ts
// 注意看标注语言是ts，表示这是TypeScript代码
const sum = (a: string, b: string) => a + b;
export default sum;
dart
// 注意看标注语言是dart，表示这是Dart代码
void main() {
  print('Hello, World!');
}
rs
// 注意看标注语言是rs，表示这是Rust代码
fn main() {
  println!("Hello, World!");
}
sh
# 注意看标注语言是sh，表示这是Shell代码
#! /bin/bash
mkdir dir
touch dir/file.txt

Import code snippets ​

当某些代码是外部文件或你需要将某些文件拆分，因为某些文件不属于当前.md或当前.md太大，那么就需要引入

引入一个文件可以是渲染过的，也可以是不渲染的，因为当你拆分你的.md然后把 n 个拆分后的.md引入主.md中是肯定是需要不渲染的

WARNING

不能引入项目外的文件，比如 Github 中某个库的某个远程文件

syntax

txt
渲染

<<< ../../../../.vitepress/config.mts {ts}

不渲染

import markdownItImsize from "markdown-it-imsize";
import markdownItTaskLists from "markdown-it-task-lists";
import { withMermaid } from "vitepress-plugin-mermaid";
import postcss from "../postcss.config";
import nav from "./nav";
import sidebar from "./sidebar";

export default withMermaid({
	title: "Harder Better Faster Stronger",
	lastUpdated: true,
	cleanUrls: true,
	srcDir: "./src",
	ignoreDeadLinks: true,
	vite: {
		css: {
			postcss,
		},
	},
	markdown: {
		theme: {
			light: "github-light",
			dark: "github-dark",
		},
		lineNumbers: true,
		config: (md) => {
			md.use(markdownItImsize);
			md.use(markdownItTaskLists);
		},
	},
	themeConfig: {
		outline: "deep",
		externalLinkIcon: true,
		editLink: {
			pattern:
				"https://github.com/instant-crush/stack/blob/main/docs/_/src/:path",
		},
		search: {
			provider: "local",
		},
		socialLinks: [
			{
				icon: "github",
				link: "https://github.com/instant-crush/_",
			},
		],
		nav,
		sidebar,
	},
});

output

ts
import markdownItImsize from "markdown-it-imsize";
import markdownItTaskLists from "markdown-it-task-lists";
import { withMermaid } from "vitepress-plugin-mermaid";
import postcss from "../postcss.config";
import nav from "./nav";
import sidebar from "./sidebar";

export default withMermaid({
	title: "Harder Better Faster Stronger",
	lastUpdated: true,
	cleanUrls: true,
	srcDir: "./src",
	ignoreDeadLinks: true,
	vite: {
		css: {
			postcss,
		},
	},
	markdown: {
		theme: {
			light: "github-light",
			dark: "github-dark",
		},
		lineNumbers: true,
		config: (md) => {
			md.use(markdownItImsize);
			md.use(markdownItTaskLists);
		},
	},
	themeConfig: {
		outline: "deep",
		externalLinkIcon: true,
		editLink: {
			pattern:
				"https://github.com/instant-crush/stack/blob/main/docs/_/src/:path",
		},
		search: {
			provider: "local",
		},
		socialLinks: [
			{
				icon: "github",
				link: "https://github.com/instant-crush/_",
			},
		],
		nav,
		sidebar,
	},
});

Line highlighting ​

syntax

txt
```rs {2,5,9,15-19}
fn main() {
    let width1 = 30;
    let height1 = 50;

    println("Hello, World!");
    println!("");

    println!("Hello, World!");
    println!(
        "The area of the rectangle is {} square pixels.",
        area(width1, height1)
    );
}

fn area(width: u32, height: u32) -> u32 {
    width * height
}
```
md
<<< ../../../../.vitepress/config.mts {3,5,8,10-20,22 ts}

output

rs
fn main() {
    let width1 = 30;
    let height1 = 50;

    println("Hello, World!");
    println!("");

    println!("Hello, World!");
    println!(
        "The area of the rectangle is {} square pixels.",
        area(width1, height1)
    );
}

fn area(width: u32, height: u32) -> u32 {
    width * height
}
ts
import markdownItImsize from "markdown-it-imsize";
import markdownItTaskLists from "markdown-it-task-lists";
import { withMermaid } from "vitepress-plugin-mermaid";
import postcss from "../postcss.config";
import nav from "./nav";
import sidebar from "./sidebar";

export default withMermaid({
	title: "Harder Better Faster Stronger",
	lastUpdated: true,
	cleanUrls: true,
	srcDir: "./src",
	ignoreDeadLinks: true,
	vite: {
		css: {
			postcss,
		},
	},
	markdown: {
		theme: {
			light: "github-light",
			dark: "github-dark",
		},
		lineNumbers: true,
		config: (md) => {
			md.use(markdownItImsize);
			md.use(markdownItTaskLists);
		},
	},
	themeConfig: {
		outline: "deep",
		externalLinkIcon: true,
		editLink: {
			pattern:
				"https://github.com/instant-crush/stack/blob/main/docs/_/src/:path",
		},
		search: {
			provider: "local",
		},
		socialLinks: [
			{
				icon: "github",
				link: "https://github.com/instant-crush/_",
			},
		],
		nav,
		sidebar,
	},
});