feat(cli): improve code highlight (#11569)

* fix(popover): location update

* fix(popover): update

packages/vant-cli/site/common/style/highlight.less

@@ -6,7 +6,7 @@ code {
   color: var(--van-doc-code-color);
   font-weight: 400;
   font-size: 14px;
-  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+  font-family: var(--van-doc-code-font-family);
   line-height: 26px;
   white-space: pre-wrap;
   word-wrap: break-word;

packages/vant-cli/site/common/style/vars.less

@@ -12,6 +12,7 @@
   --van-doc-gray-8: #323233;
   --van-doc-blue: #1989fa;
   --van-doc-green: #07c160;
+  --van-doc-purple: #8e69d3;
 
   // sizes
   --van-doc-padding: 32px;
@@ -21,6 +22,10 @@
   --van-doc-simulator-width: 360px;
   --van-doc-simulator-height: 620px;
   --van-doc-header-top-height: 64px;
+
+  // fonts
+  --van-doc-code-font-family: 'Menlo', 'Source Code Pro', 'Monaco',
+    'Inconsolata', monospace;
 }
 
 .van-doc-theme-light {

packages/vant-cli/site/desktop/components/Content.vue

@@ -245,7 +245,7 @@ export default {
       display: inline-block;
       color: var(--van-doc-green);
       font-size: 14px;
-      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+      font-family: var(--van-doc-code-font-family);
       font-style: normal;
       max-width: 300px;
       -webkit-font-smoothing: auto;
@@ -291,13 +291,12 @@ export default {
   > table code {
     display: inline;
     margin: 0 2px;
-    padding: 2px 5px;
+    padding: 3px 7px;
     font-size: 14px;
-    font-family: inherit;
-    font-weight: 600;
     word-break: keep-all;
-    border-radius: 4px;
-    -webkit-font-smoothing: antialiased;
+    border-radius: 6px;
+    -webkit-font-smoothing: auto;
+    font-family: var(--van-doc-code-font-family);
   }
 
   > blockquote {

packages/vant/src/popover/Popover.tsx

@@ -17,6 +17,7 @@ import { Instance, createPopper, offsetModifier } from '@vant/popperjs';
 import {
   pick,
   extend,
+  inBrowser,
   truthProp,
   numericProp,
   unknownProp,
@@ -137,6 +138,10 @@ export default defineComponent({
 
         if (!popper) {
           popper = createPopperInstance();
+          if (inBrowser) {
+            window.addEventListener('animationend', updateLocation);
+            window.addEventListener('transitionend', updateLocation);
+          }
         } else {
           popper.setOptions(getPopoverOptions());
         }
@@ -217,6 +222,10 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       if (popper) {
+        if (inBrowser) {
+          window.removeEventListener('animationend', updateLocation);
+          window.removeEventListener('transitionend', updateLocation);
+        }
         popper.destroy();
         popper = null;
       }