Render Test Page ​

This page verifies that the theme's built-in Markdown extensions and plugins work correctly. Follow each section to confirm the theme behaves as expected in local or deployed environments.

1. Demo containers and example components ​

The demo below is generated by vitepress-better-demo-plugin. Focus on:

• The preview renders packages/docs/demo/demo.vue.
• Code folding, copy, StackBlitz/CodeSandbox/GitHub/GitLab buttons appear in the top-right.
• The vue tab is selected by default and syntax highlighting is correct.

<template>
  <div>Test Demo Page <a href="#">vp-raw href link</a></div>
</template>

2. Code block title icons (vitepress-plugin-group-icons) Demo ​

Single code blocks inject an icon based on keywords in the title:

pnpm add vitepress-theme-element-plus

Code groups also support keywords or explicit Iconify names (e.g. ~logos:vitejs~). Vite will hot-reload virtual:group-icons.css after save:

import Theme from 'vitepress-theme-element-plus'
import { createApp } from 'vue'

pnpm -C packages/docs dev

3. Tags, tooltips, and external links ​

• ^(beta) and ^(deprecated) should render as colored badges.
• ^[prop-name]string should generate the <api-typing> component for type hints.
• External links should include icons and the vp-link style, e.g. Element Plus.

Example paragraph:

This feature is currently beta. The color prop accepts color(string). For more information, visit Element Plus.

4. API tables and scroll containers ​

mdTableWrapper wraps tables in .vp-table so narrow viewports get horizontal scrolling. Verify table borders, hover states, and tooltip interactions:

5. Callouts and lists 1.1.0 ​

vitepress-theme-element-plus inherits VitePress callout styling. Use the sections below to verify title, body text, and list alignment:

After the checks above, you can be confident the theme's core rendering works. If you need more coverage, add sections using the same "description + expected behavior" structure.

6. Markdown syntax examples ​

This section showcases default VitePress Markdown rendering so you can check baseline formatting.

Unordered and ordered lists ​

• List items starting with -, *, or + should render as unordered lists.
• Keep 4px spacing between items, and nested paragraphs should inherit line height.
  • Second-level lists should align with proper indentation. Inline code like const foo = 'bar' should remain monospaced.
• You can mix bold, italic, or strikethrough text.

1. Ordered lists should auto-number.
2. Multi-digit numbers should align with the paragraph text.
3. Check colors and states with external links or kbd styling.

Blockquotes and nested content ​

A top-level quote highlights a paragraph.

You can nest quotes and include lists:

• Task 1
• Task 2

Emphasis and inline elements ​

Text like bold, italic, inline code, and link text should follow the theme's primary colors. Inline HTML such as ^sup or _sub should render properly. Inline MathJax (e.g. $E=m{c}^2$) should align to the baseline if enabled.

Headings and outline levels Demo Demo ​

Headings now keep ElTag badges inside the outline so the styling matches the content.

Because the theme’s options extend VitePress, you can adjust outline depth via frontmatter, but avoid rendering more than two nested levels to prevent layout issues.

Horizontal rules and definition lists ​

Insert three hyphens to render a divider and check spacing:

Term one : The definition should align left and match paragraph font size.

Term two : Multi-line definitions should align with the first line on wrap.