Normal Code Demo
Mr.Hope ... 2021-8-26 Less than 1 minute
# Syntax
::: normal-demo Optional title text
```html
<!-- html code -->
```
```js
// js code
```
```css
/* css code */
```
```json
// config (optional)
{
"jsLib": [
...
],
"cssLib":[
...
]
}
```
::::
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
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
Attention
- We use "ShadowDOM" to make style isolation, and we already replace
documentwithshadowRoot. To access the page document, please visitwindow.document.
# Demo
Demo
<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>
1
2
2
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful");
});
1
2
3
2
3
span {
color: red;
}
1
2
3
2
3
Code
::: normal-demo Demo
```html
<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful");
});
```
```css
span {
color: red;
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20