BitYuan
GitHub (opens new window)

Markdown 增强

viken 2022.1.4

markdown 增加样式格式.

# 新增的更多语法

# 上下角标

19th H2O

查看源码 
19^th^ H~2~O
1

# 自定义对齐

我是居中的

我在右对齐

查看源码 
::: center

我是居中的

:::

::: right

我在右对齐

:::
1
2
3
4
5
6
7
8
9
10
11

# 脚注

此文字有脚注[1].

查看源码 
此文字有脚注[^first].

[^first]: 这是脚注内容
1
2
3

# 标记

你可以标记 重要的内容 。

查看源码 
你可以标记 ==重要的内容== 。
1

# 任务列表

Code 
- [x] 计划 1
- [ ] 计划 2
1
2

# 流程图

查看源码 
```flow
cond=>condition: Process?
process=>operation: Process
e=>end: End

cond(yes)->process->e
cond(no)->e
```
1
2
3
4
5
6
7
8

# Tex 语法

∂r∂ωr(yωω)=(yωω){(log⁡y)r+∑i=1r(−1)ir⋯(r−i+1)(log⁡y)r−iωi}\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}

查看源码 
$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
$$
1
2
3
4

# 代码案例

<h1>viken</h1>
<p><span id="very">代码</span> 案例</p>
1
2
document.querySelector("#very").addEventListener("click", () => {
  alert("代码案例");
});
1
2
3
span {
  color: red;
}
1
2
3
查看源码 
::: demo 一个普通 Demo

```html
<h1>viken</h1>
<p><span id="very">代码</span> 案例</p>
```

```js
document.querySelector("#very").addEventListener("click", () => {
  alert("代码案例");
});
```

```css
span {
  color: red;
}
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "代码案例" };
  }
  render() {
    return (
      <div className="box-react">
        viken <span>{this.state.message}</span>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
.box-react span {
  color: red;
}
1
2
3
查看源码 
::: demo [react] 一个 React Demo

```js
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "代码案例" };
  }
  render() {
    return (
      <div className="box-react">
        viken <span>{this.state.message}</span>
      </div>
    );
  }
}
```

```css
.box-react span {
  color: red;
}
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="box">
    viken <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "代码案例" }),
};
</script>
<style>
.box span {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
查看源码 
::: demo [vue] 一个 Vue Demo

```vue
<template>
  <div class="box">
    viken <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "代码案例" }),
};
</script>
<style>
.box span {
  color: red;
}
</style>
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 标题

代码案例
1
2
3
const message: string = "viken";

document.querySelector("h1").innerHTML = message;
1
2
3
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
1
2
3
4
5
6
7
查看源码 
::: demo 一个普通 Demo

```md
# 标题

代码案例
```

```ts
const message: string = "viken";

document.querySelector("h1").innerHTML = message;
```

```scss
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 其他语法

自定义标题

信息容器

自定义标题

提示容器

自定义标题

警告容器

自定义标题

容器可以嵌套使用

嵌套居中容器。

右对齐打开Github (opens new window)。

查看源码 
::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

:::: danger 自定义标题

容器可以嵌套使用

::: center
嵌套居中容器。
:::

::: right
右对齐[打开Github](https://github.com)。
:::

::::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  1. 这是脚注内容 ↩︎

测试