VuePress normal-demo 代码演示容器格式

格式

::: normal-demo 可选的标题文字

```html
<!-- html code -->
```

```js
// js code
```

```css
/* css code */
```

```json
// 配置 (可选)
{
  "jsLib": [
    ...
  ],
  "cssLib":[
    ...
  ]
}
```

:::

注意事项

我们使用 "ShadowDOM" 进行样式隔离，并已经将 document 替换为了 shadowRoot 对象。如果需要访问页面的 document，请访问 window.document。

例子

Demo 演示

<h1>VuePress Theme Hope</h1>
<p>
  <span id="very">非常</span>
  强大!
</p>

document.querySelector('#very').addEventListener('click', () => {
  alert('非常强大');
});

span {
  color: red;
}

代码

::: normal-demo Demo 演示

```html
<h1>VuePress Theme Hope</h1>
<p>
  <span id="very">非常</span>
  强大!
</p>
```

```js
document.querySelector('#very').addEventListener('click', () => {
  alert('非常强大');
});
```

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

:::