From f72903b576160a27eb79e3e9da2a826ae2d1b691 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 12 Nov 2023 09:45:04 +0800
Subject: [PATCH] docs(Highlight): add version tip (#12438)

---
 packages/vant/src/highlight/README.md       |  2 +-
 packages/vant/src/highlight/README.zh-CN.md |  2 +-
 packages/vant/src/highlight/demo/index.vue  | 14 +++++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/highlight/README.md b/packages/vant/src/highlight/README.md
index 6a5685998..51278d029 100644
--- a/packages/vant/src/highlight/README.md
+++ b/packages/vant/src/highlight/README.md
@@ -2,7 +2,7 @@
 
 ### Intro
 
-Highlight the specified text content.
+Highlight the specified text content. Please upgrade `vant` to >= v4.8.0 before using this component.
 
 ### Install
 
diff --git a/packages/vant/src/highlight/README.zh-CN.md b/packages/vant/src/highlight/README.zh-CN.md
index 7d43b86c1..a45aabe30 100644
--- a/packages/vant/src/highlight/README.zh-CN.md
+++ b/packages/vant/src/highlight/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-高亮指定文本内容。
+高亮指定文本内容。请升级 `vant` 到 >= 4.8.0 版本来使用该组件。
 
 ### 引入
 
diff --git a/packages/vant/src/highlight/demo/index.vue b/packages/vant/src/highlight/demo/index.vue
index b84f25a09..8f2543ece 100644
--- a/packages/vant/src/highlight/demo/index.vue
+++ b/packages/vant/src/highlight/demo/index.vue
@@ -42,11 +42,15 @@ const t = useTranslate({
 </template>
 
 <style lang="less">
-.van-highlight {
-  padding: 0 16px;
-}
+.demo-highlight {
+  background: var(--van-background-2);
 
-.custom-class {
-  color: red;
+  .van-highlight {
+    padding: 0 16px;
+  }
+
+  .custom-class {
+    color: red;
+  }
 }
 </style>