Multiple Themes

Two themes are built in, so you can switch between the default theme and the Element Plus theme. The default theme requires no extra dependency, while the Element Plus theme mirrors the official Element Plus documentation style. Make sure Element Plus is installed before enabling its theme.

The default container may feel less polished and not fully aligned with a customized documentation style, but it requires zero additional setup and is good enough for most scenarios.

Quick Start

To use the Element Plus theme, first register the container components inside the VitePress theme entry:

import ElementPlus from 'element-plus'
import {
  VitepressEpDemoBox,
  VitepressEpDemoPlaceholder
} from 'vitepress-better-demo-plugin/theme/element-plus'
import Theme from 'vitepress/theme'
import './style.scss'
import 'element-plus/dist/index.css'

export default {
  ...Theme,
  enhanceApp({ app }) {
    app.use(ElementPlus)
    app.component('VitepressEpDemoBox', VitepressEpDemoBox)
    app.component('VitepressEpDemoPlaceholder', VitepressEpDemoPlaceholder)
  },
} as typeof Theme

Then pass the related props to switch the theme on any demo:

<demo
  react="../demos/demo.tsx"
  wrapperComponentName="VitepressEpDemoBox"
  placeholderComponentName="VitepressEpDemoPlaceholder"
/>

Rendered output:

import React, { useState } from 'react';
import styled from '@emotion/styled';

const Container = styled.div`
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
    'sans-serif';
  font-size: 14px;
  line-height: 20px;
`;
const Title = styled.div`
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
`;

const Button = styled.button`
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 4px;
  line-height: 20px;
  padding: 4px 16px;
  margin: 12px 0;
`;
const ButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 24px;
`;

export default function Demo() {
  const [count, setCount] = useState<number>(0);

  const increment: () => void = () => {
    setCount(count + 1);
  };

  const decrement: () => void = () => {
    setCount(count - 1);
  };

  return (
    <Container>
      <Title>This is a React counter</Title>
      <ButtonContainer>
        <Button onClick={increment}>+1</Button>
        <Button onClick={decrement}>-1</Button>
      </ButtonContainer>
      <div>Current count: {count}</div>
    </Container>
  );
}

With this configuration you can mix both container styles on the same documentation site. When no props are supplied the default container is used:

<demo react="../demos/demo.tsx" />

import React, { useState } from 'react';
import styled from '@emotion/styled';

const Container = styled.div`
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
    'sans-serif';
  font-size: 14px;
  line-height: 20px;
`;
const Title = styled.div`
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
`;

const Button = styled.button`
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 4px;
  line-height: 20px;
  padding: 4px 16px;
  margin: 12px 0;
`;
const ButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 24px;
`;

export default function Demo() {
  const [count, setCount] = useState<number>(0);

  const increment: () => void = () => {
    setCount(count + 1);
  };

  const decrement: () => void = () => {
    setCount(count - 1);
  };

  return (
    <Container>
      <Title>This is a React counter</Title>
      <ButtonContainer>
        <Button onClick={increment}>+1</Button>
        <Button onClick={decrement}>-1</Button>
      </ButtonContainer>
      <div>Current count: {count}</div>
    </Container>
  );
}

loading

Use It Globally

To avoid repeating the props, set up the container components globally inside the plugin config:

md.use<VitepressDemoBoxConfig>(vitepressDemoPlugin, {
  // ...
  wrapperComponentName: 'vitepress-ep-demo-box',
  placeholderComponentName: 'vitepress-ep-demo-placeholder',
  // ...
})

Disable Default Container Registration

For convenience the plugin registers the default container automatically. If you are sure it will never be used you can disable the auto import:

md.use<VitepressDemoBoxConfig>(vitepressDemoPlugin, {
  // ...
  autoImportWrapper: false,
  // ...
})

This slightly reduces the final bundle size. An extra benefit is that a custom component registered as vitepress-demo-box and vitepress-demo-placeholder can take over seamlessly when auto import is off, so you no longer need to configure component names manually.

Custom Containers

You can always build your own container components, register them in VitePress, and pass their names to the plugin so they match the visual language of your documentation.