Example preview

The current page combines the use of @shikijs/markdown-it and @shikijs/vitepress-twoslash.

Render Empty

this is a empty component

收起

Render Vue SFC component

ViewSfc Render

a component description

<template>
	<button class="xbtn">TS XButton</button>
</template>
<script setup lang="ts">
	// @ts-ignore
	import { Prop, ref } from "vue";
	interface Props {
		text: string;
	}

	const p: Props = { text: "" };
</script>
<style scoped lang="scss">
	.xbtn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

Render JSX SFC component

JSX Render

a component description

// @ts-nocheck
import { defineComponent } from "vue";

export default defineComponent({
	setup() {
		return () => (
			<div>
				<button style={{ border: "1px solid black", padding: "10px" }}>
					React component
				</button>
			</div>
		);
	}
});

收起

Custom component rendering

*Custom component rendering

*a component description

<template>
	<button class="xbtn">TS XButton</button>
</template>
<script setup lang="ts">
	// @ts-ignore
	import { Prop, ref } from "vue";
	interface Props {
		text: string;
	}

	const p: Props = { text: "" };
</script>
<style scoped lang="scss">
	.xbtn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

resolveAlias

ViewSfc Render

a component description

<template>
	<button class="btn">Button</button><button class="btn">Button</button
	><button class="btn">Button</button> <button class="btn">Button</button
	><button class="btn">Button</button><button class="btn">Button</button>
	<button class="btn">Button</button><button class="btn">Button</button
	><button class="btn">Button</button> <button class="btn">Button</button
	><button class="btn">Button</button><button class="btn">Button</button>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
	.btn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

or use ::: tag

:::ViewSfc
src=./components/c-button.vue
title=ViewSfc Container Render
description=a component description with container
:::

to:

ViewSfc Container Render

a component description with container

<template>
	<button class="btn">C-Button</button>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
	.btn {
		outline: none;
		border: 1px solid #ff2b2b;
		background-color: #ededed;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #9f5c5c;
		}
	}
</style>

收起