Демонстрация кода

Позволяет вставлять демонстрации кода в файл Markdown.

Конфиг

TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        demo: true,
      },
    },
  }),
});

JS

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        demo: true,
      },
    },
  }),
};

Синтаксис

Вы должны использовать следующий синтаксис:

::: [type]-demo Необязательный текст заголовка

```html
<!-- ↑ use available ones -->
<!-- your code here -->
<!-- you can have multiple code block, but each language must appear only once. -->
```

```json
// json block is for config
{
  // your config here (optional)
}
```

:::

Совет

Блок json является необязательным, для конфигурации смотрите конфиг.

Плагин поддерживает три типа:

• normal
• vue
• react

Нормальный

Синтаксис:

::: normal-demo Необязательный текст заголовка

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

```js
// js code
```

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

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

::::

Vue

Синтаксис:

::: vue-demo Необязательный текст заголовка

```vue
<!-- ↑ you can also use html-->
<template>
  <!-- vue template -->
</template>
<script>
export default {
  // vue component
};
</script>
<style>
/* style */
</style>
```

```json
// config (optional)
```

:::

React

Синтаксис:

::: react-demo Необязательный текст заголовка

```js
export default class App extends React.Component {
  // your react component
}
```

```css
/* your css content */
```

```json
// config (optional)
```

:::

Доступные языки

Вы можете использовать другой язык в своем демонстрационном блоке.

Когда вы устанавливаете язык, который не может работать в браузерах, так как плагин не может их разрешить, поэтому отображение демо будет отключено. Плагин покажет только код и предоставит вам кнопку, чтобы открыть его в CodePen.

Доступные языки HTML:

• "html" (по умолчанию)
• "slim"
• "haml"
• "markdown"

Вы также можете использовать md в блоке кода.

Доступные языки JS:

• "javascript" (по умолчанию)
• "coffeescript"
• "babel"
• "livescript"
• "typescript"

Вы также можете использовать js, ts, coffee и ls в блоке кода.

Доступные языки CSS:

• "css" (по умолчанию)
• "less"
• "scss"
• "sass"
• "stylus"

Вы также можете использовать styl в блоке кода.

Демо

Демо

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

:::

Демонстрация React на основе функций

const { useState } = React;

export default () => {
  const [message, setMessage] = useState(" powerful");

  const handler = () => {
    setMessage(` very${message}`);
  };

  return (
    <div className="box">
      <code>vuepress-theme-hope</code> is
      <span id="powerful" onClick={handler}>
        {message}
      </span>!
    </div>
  );
};

.box #powerful {
  color: blue;
}

Код

::: react-demo Демонстрация React на основе функций

```js
const { useState } = React;

export default () => {
  const [message, setMessage] = useState(" powerful");

  const handler = () => {
    setMessage(` very${message}`);
  };

  return (
    <div className="box">
      <code>vuepress-theme-hope</code> is
      <span id="powerful" onClick={handler}>
        {message}
      </span>!
    </div>
  );
};
```

```css
.box #powerful {
  color: blue;
}
```

:::

Демонстрация React на основе классов

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: " powerful" };
  }
  handler() {
    this.setState((state) => ({
      message: ` very${state.message}`,
    }));
  }
  render() {
    return (
      <div className="box">
        <code>vuepress-theme-hope</code> is
        <span id="powerful" onClick={this.handler.bind(this)}>
          {this.state.message}!
        </span>
      </div>
    );
  }
}

.box #powerful {
  color: blue;
}

Код

::: react-demo Демонстрация React на основе классов

```js
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: " powerful" };
  }
  handler() {
    this.setState((state) => ({
      message: ` very${state.message}`,
    }));
  }
  render() {
    return (
      <div className="box">
        <code>vuepress-theme-hope</code> is
        <span id="powerful" onClick={this.handler.bind(this)}>
          {this.state.message}!
        </span>
      </div>
    );
  }
}
```

```css
.box #powerful {
  color: blue;
}
```

:::

Демонстрация композиции Vue

<template>
  <div class="box">
    <code>vuepress-theme-hope</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
const { ref } = Vue;

export default {
  setup() {
    const message = ref("powerful");

    const handler = () => {
      message.value = "very " + message.value;
    };

    return {
      message,
      handler,
    };
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>

Код

::: vue-demo Демонстрация композиции Vue

```vue
<template>
  <div class="box">
    <code>vuepress-theme-hope</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
const { ref } = Vue;

export default {
  setup() {
    const message = ref("powerful");

    const handler = () => {
      message.value = "very " + message.value;
    };

    return {
      message,
      handler,
    };
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>
```

:::

Демонстрация опции Vue

<template>
  <div class="box">
    <code>vuepress-theme-hope</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
export default {
  data: () => ({ message: "powerful" }),
  methods: {
    handler() {
      this.message = "very " + this.message;
    },
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>

Код

::: vue-demo Демонстрация опции Vue

```vue
<template>
  <div class="box">
    <code>vuepress-theme-hope</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
export default {
  data: () => ({ message: "powerful" }),
  methods: {
    handler() {
      this.message = "very " + this.message;
    },
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>
```

:::

Демонстрация с использованием языка, не поддерживаемого браузерами

# Тайтл

очень мощный!

const message: string = "VuePress Theme Hope";

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

h1 {
  font-style: italic;

  + p {
    color: red;
  }
}

Код

::: normal-demo Обычная демонстрация

```md
# Тайтл

очень мощный!
```

```ts
const message: string = "VuePress Theme Hope";

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

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

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

:::