Normal Code Demo

Syntax

::: normal-demo Optional title text

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

```js
// js code
```

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

```json
// config (optional)
{
  "jsLib": [
    ...
  ],
  "cssLib":[
    ...
  ]
}
```

:::

Attention

• We use "ShadowDOM" to make style isolation, and we already replace document with shadowRoot. To access the page document, please visit window.document.

Import external styles

• If you need import to external styles (e.g., css files generated by unocss), you can add link tags using html or js blocks. E.g.

html example

<!-- change to your own href -->
<link rel="stylesheet" href="__uno.css" />

js example

// add this to js code block, change to your own href
const linkElem = window.document.createElement("link");

linkElem.setAttribute("rel", "stylesheet");
linkElem.setAttribute("href", "__uno.css");
document.appendChild(linkElem);

Demo

Normal demo

Demo

<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("Very powerful");
});

span {
  color: red;
}

::: 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;
}
```

:::