docs(build): add a plugin to display tag (#11580)

docs/.vitepress/config/plugins.ts

@@ -6,12 +6,13 @@ import { docRoot } from '@element-plus/build-utils'
 import externalLinkIcon from '../plugins/external-link-icon'
 import tableWrapper from '../plugins/table-wrapper'
 import tooltip from '../plugins/tooltip'
+import tag from '../plugins/tag'
 import { ApiTableContainer } from '../plugins/api-table'
 import { highlight } from '../utils/highlight'
 import type Token from 'markdown-it/lib/token'
 import type Renderer from 'markdown-it/lib/renderer'
 
-const localMd = MarkdownIt()
+const localMd = MarkdownIt().use(tag)
 
 interface ContainerOpts {
   marker?: string | undefined
@@ -29,6 +30,7 @@ export const mdPlugin = (md: MarkdownIt) => {
   md.use(externalLinkIcon)
   md.use(tableWrapper)
   md.use(tooltip)
+  md.use(tag)
   md.use(mdContainer, 'demo', {
     validate(params) {
       return !!params.trim().match(/^demo\s*(.*)$/)

docs/.vitepress/plugins/tag.ts

@@ -0,0 +1,36 @@
+import type MarkdownIt from 'markdown-it'
+
+export default (md: MarkdownIt): void => {
+  /**
+   * To enable the plugin to be parsed in the demo description, the content is rendered as span instead of ElTag.
+   */
+  md.renderer.rules.tag = (tokens, idx) => {
+    const token = tokens[idx]
+    const value = token.content
+    /**
+     * Add styles for some special tags
+     * vitepress/styles/content/tag-mark-content.scss
+     */
+    const tagClass = ['beta', 'deprecated', 'a11y'].includes(value) ? value : ''
+    return `<span class="vp-tag ${tagClass}">${value}</span>`
+  }
+
+  md.inline.ruler.before('emphasis', 'tag', (state, silent) => {
+    const tagRegExp = /^\^\(([^)]*)\)/
+    const str = state.src.slice(state.pos, state.posMax)
+
+    if (!tagRegExp.test(str)) return false
+    if (silent) return true
+
+    const result = str.match(tagRegExp)
+
+    if (!result) return false
+
+    const token = state.push('tag', 'tag', 0)
+    token.content = result[1].trim()
+    token.level = state.level
+    state.pos += result[0].length
+
+    return true
+  })
+}

docs/.vitepress/vitepress/styles/base.scss

@@ -60,7 +60,8 @@ h6 {
     position: relative;
 
     // Special case for handling tagged header.
-    .el-tag {
+    .el-tag,
+    .vp-tag {
       margin-left: 8px;
     }
   }

docs/.vitepress/vitepress/styles/content.scss

@@ -2,6 +2,7 @@
 @use './vars' as *;
 @use './content/doc-content';
 @use './content/hero-content';
+@use './content/tag-content';
 
 .page-content {
   @include respond-to('lg') {

docs/.vitepress/vitepress/styles/content/tag-content.scss

@@ -0,0 +1,26 @@
+.vp-tag {
+  --vp-tag-color: var(--el-color-primary);
+  --vp-tag-border-color: var(--el-color-primary);
+
+  display: inline-block;
+  padding: 0 7px;
+  border-radius: 10px;
+  border: 1px solid var(--vp-tag-border-color);
+  font-size: var(--el-font-size-extra-small);
+  color: var(--vp-tag-color);
+  line-height: 18px;
+  white-space: nowrap;
+
+  &.beta {
+    --vp-tag-color: var(--el-color-danger);
+    --vp-tag-border-color: var(--el-color-danger);
+  }
+  &.deprecated {
+    --vp-tag-color: var(--el-color-warning);
+    --vp-tag-border-color: var(--el-color-warning);
+  }
+  &.a11y {
+    --vp-tag-color: var(--purple-color);
+    --vp-tag-border-color: var(--purple-color-light);
+  }
+}

docs/.vitepress/vitepress/styles/css-vars.scss

@@ -29,6 +29,8 @@
   --success-color: var(--el-color-success);
   --warning-color: var(--el-color-warning);
   --danger-color: var(--el-color-danger);
+  --purple-color: #6222c2;
+  --purple-color-light: #9065db;
 
   // header vars
   --header-height: 55px;
@@ -84,4 +86,6 @@
   --bg-color-mute: #2c2c2c;
   --code-tooltip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
   --code-tooltip-color: var(--brand-color);
+  --purple-color: #9065db;
+  --purple-color-light: #6222c2;
 }