MarkDown

网站	网址
vuepress-theme-hope	https://vuepress-theme-hope.github.io/v2/zh/
Markdown 增强	https://vuepress-theme-hope.github.io/v2/md-enhance/zh/

目录

[[TOC]]

• 目录
  • 代码块
  • 无序列表
  • 有序列表
  • 链接
  • 图片
  • 表格
• Markdown 扩展
  • 提示
  • 警告
  • 危险
  • 点击查看代码
• vurpress-theme-hope
  • code-demo
  • ECharts

代码块

class Main {
	public static void main(String[] args) {
		System.out.println("hello world !");
	}
}

无序列表

- list 1

* list 2

- list 3

• list 1

• list 2

• list 3

有序列表

1. list1
2. list2

链接

[Github](https://www.github.com/)
[Github][3]
[![DocSearch][1]][2]

[1]: ./static/img/docsearch-logo.svg
[2]: https://docsearch.algolia.com/
[3]: https://www.github.com/

Github

图片

![](@/assets/css/text-yinxiang.png)

表格

|     |     |     |
| :-- | :-: | --: |
|     |     |     |
|     |     |     |
|     |     |     |

左对齐	居中对齐	右对齐
单元格	单元格	单元格
单元格	单元格	单元格

$\color{red}{✗}$ $\color{green}{✓}$

Markdown 扩展

提示

::: tip
这是一个提示
:::

TIP

这是一个提示

警告

::: warning
这是一个警告
:::

::: warning 注意
:::

注意

这是一个警告

危险

::: danger
这是一个危险警告
:::

DANGER

这是一个危险警告

点击查看代码

::: details 点击查看代码

:::

点击查看代码

console.log("Hello javascript!")

:::: code-group

::: code-group-item Python

:::

::: code-group-item JavaScript

:::

::::

print("hello")

console.log("hello!")

::::: details 点击查看代码
:::: code-group

::: code-group-item Python

:::

::: code-group-item JavaScript

:::

::::
:::::

示例

print("Hello World!")

console.log("Hello world!")

vurpress-theme-hope

code-demo

React Demo

export default class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			count: 0,
		}
	}
	handleClick() {
		this.setState((state) => ({
			count: state.count + 1,
		}))
	}
	render() {
		return (
			<div>
				<div>Count: {this.state.count}</div>
				<button onClick={this.handleClick.bind(this)}>Click Me</button>
			</div>
		)
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button {
	padding: 10px 20px;
	margin-top: 20px;
	border-radius: 16px;
	outline: none;
	background: transparent;
	border: 1px solid #323232;
	transiton: background 0.15s ease 0.1s;
}

button:hover {
	background: skyblue;
}

点击查看代码

::: normal-demo Demo 演示
```html
<div>Hello World !</div>
```
```css
* {
	margin: 0;
	paddinh: 0;
	box-sizing: border-box;
}
```
:::

::: vue-demo 一个 Vue Option 演示

```vue
<template>
	<div>{{ message }}</div>
</template>

<script>
	export default {
		data: () => ({ message: "Hello World!" }),
	}
</script>

<style>
	* {
		margin: 0;
		paddinh: 0;
		box-sizing: border-box;
	}
</style>
```
:::

::: react-demo React示例
```js
// import React from 'react'

class Comp extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			name: "coulson",
		}
	}

	render() {
		return <div>Hello, {this.state.name}</div>
	}
}

export default Comp
```
```css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
```
:::

ECharts

一个柱状图案例

雷达图案例