perf: 优化搜索、内容容器内代码块 UI

docs/2.preview/主题效果预览.md

@@ -44,6 +44,13 @@ _斜体文字_
 
 数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$
 
+$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$
+
+19^th^
+
+H~2~O
+
 ::: center
 内容居中
 :::
@@ -167,18 +174,38 @@ function foo() {
 
 ::: tip 提示
 提示内容
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
 :::
 
 ::: warning 警告
 警告内容
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
 :::
 
 ::: caution 错误
 错误内容
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
 :::
 
 ::: important 重要
 重要内容
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
 :::
 
 ::: info

theme/src/client/components/BlogExtract.vue

@@ -111,6 +111,12 @@ const showBlogExtract = computed(() => {
   }
 }
 
+@media print {
+  .blog-extract {
+    display: none;
+  }
+}
+
 .blog-modal {
   position: fixed;
   top: 0;

theme/src/client/components/LocalNav.vue

@@ -99,6 +99,12 @@ const showLocalNav = computed(() => {
   }
 }
 
+@media print {
+  .local-nav {
+    display: none;
+  }
+}
+
 .menu {
   display: flex;
   align-items: center;

theme/src/client/components/Nav/NavBarSearch.vue

@@ -23,6 +23,7 @@
   }
 }
 
+/* plugin-docsearch */
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1);
   --docsearch-highlight-color: var(--docsearch-primary-color);
@@ -211,4 +212,13 @@
 .dark .DocSearch-Form {
   background-color: var(--vp-c-bg-soft);
 }
+
+/* plugin-docsearch */
+
+/* plugin-search */
+.navbar-search .search-box input {
+  padding: 0 0.3rem 0 1.575rem;
+  background-position: 0.5rem 0.4rem;
+}
+/* plugin-search */
 </style>

theme/src/client/styles/_variables.scss

@@ -1,5 +1 @@
 @import '@vuepress/plugin-palette/palette';
-
-$codeLang: 'c' 'cpp' 'cs' 'dart' 'docker' 'fs' 'go' 'java' 'kt' 'makefile' 'css'
-  'less' 'sass' 'scss' 'styl' 'html' 'js' 'json' 'ts' 'vue' 'jsx' 'md' 'php'
-  'py' 'rb' 'rs' 'sh' 'toml' 'yml' !default;

theme/src/client/styles/md-enhance.scss

@@ -87,7 +87,12 @@
       }
     }
 
-    &.details code {
+    &.note code,
+    &.info code,
+    &.tip code,
+    &.warning code,
+    &.caution code,
+    &.details, code {
       background-color: transparent;
     }
 

theme/src/client/styles/vars.scss

@@ -543,7 +543,7 @@ html[lang='zh-CN'] {
 
 /** Component: Search **/
 :root {
-  --search-bg-color: var(--vp-c-bg-alt);
+  --search-bg-color: var(--vp-c-default-soft);
   --search-text-color: var(--vp-c-text-2);
   --search-item-text-color: var(--vp-c-text-1);
   --search-item-focus-bg-color: var(--vp-c-bg-alt);