perf: 优化代码块样式交互

plugins/plugin-auto-frontmatter/src/node/plugin.ts

@@ -14,7 +14,7 @@ import { readMarkdown, readMarkdownList } from './readFiles.js'
 import { ensureArray, isEmptyObject } from './utils.js'
 
 export function autoFrontmatterPlugin({
-  include = ['**/*.{md,MD}'],
+  include = ['**/*.md'],
   exclude = ['.vuepress/**/*', 'node_modules'],
   frontmatter = {},
 }: AutoFrontmatterOptions = {}): Plugin {

theme/src/client/components/Sidebar.vue

@@ -73,6 +73,8 @@ watch(
     opacity 0.5s,
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   transform: translateX(-100%);
+
+  scrollbar-width: thin;
 }
 
 .sidebar-wrapper.open {

theme/src/client/styles/code.scss

@@ -203,6 +203,33 @@ div[class*="language-"] {
   }
 }
 
+.plume-content [class*="language-"] code .highlighted-word {
+  padding: 1px 3px;
+  margin: -1px -3px;
+  background-color: var(--vp-c-gray-soft);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+}
+
+.plume-content [class*="language-"] code {
+  .tab,
+  .space {
+    position: relative;
+  }
+
+  .tab::before {
+    position: absolute;
+    content: "⇥";
+    opacity: 0.3;
+  }
+
+  .space::before {
+    position: absolute;
+    content: "·";
+    opacity: 0.3;
+  }
+}
+
 .plume-content [class*="language-"] code .diff {
   display: inline-block;
   width: calc(100% + 2 * 24px);
@@ -249,13 +276,3 @@ div[class*="language-"] {
   filter: blur(0);
   opacity: 1;
 }
-
-// narrow mobile
-// @media (max-width: 419px) {
-//   .plume-content {
-//     div[class*="language-"] {
-//       margin: 0.85rem -1.5rem;
-//       border-radius: 0;
-//     }
-//   }
-// }

theme/src/client/styles/normalize.scss

@@ -58,6 +58,8 @@ body {
   transition-timing-function: ease;
   transition-duration: 0.25s;
   transition-property: color, background-color;
+
+  scrollbar-width: thin;
 }
 
 main {