fix(theme-yun): code diff styles, close #275

This commit is contained in:
YunYouJun 2023-10-07 00:19:27 +08:00
parent 754f0847dc
commit 9ef002e8b8
9 changed files with 114 additions and 29 deletions

View File

@ -7,14 +7,28 @@ categories:
::: tip ::: tip
<div lang="zh-CN">
Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。 Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。
你可以在同一个页面中快速编写中英文博客。 你可以在同一个页面中快速编写中英文博客。
:::
> 如果你想了解实现原理,可参考 [i18n](/posts/i18n)。 > 如果你想了解实现原理,可参考 [i18n](/posts/i18n)。
</div>
<div lang="en">
Valaxy **proposed** a CSS-based i18n solution for blog.
You can quickly write English and Chinese blogs from the same page.
> If you want to know how this works, see [i18n](/posts/i18n).
</div>
:::
::: zh-CN ::: zh-CN
**效果如下**(点击按钮切换): **效果如下**(点击按钮切换):
::: :::

View File

@ -9,7 +9,7 @@ const { t } = useI18n()
<template> <template>
<div flex justify="between" text="sm"> <div flex justify="between" text="sm">
<a flex items="center" :href="editLink.url" target="_blank"> <a flex items="center" class="decoration-none!" :href="editLink.url" target="_blank">
<div i-ri-external-link-line /> <div i-ri-external-link-line />
<span ml-1>{{ editLink.text || t('tooltip.edit_this_page') }}</span> <span ml-1>{{ editLink.text || t('tooltip.edit_this_page') }}</span>
</a> </a>

View File

@ -21,7 +21,7 @@ const { t } = useI18n()
</script> </script>
<template> <template>
<p class="press-lastUpdated"> <p class="press-lastUpdated text-right">
{{ t('tooltip.last_updated') }}: {{ t('tooltip.last_updated') }}:
<time :datetime="isoDatetime">{{ datetime }}</time> <time :datetime="isoDatetime">{{ datetime }}</time>
</p> </p>

View File

@ -44,3 +44,16 @@
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
} }
.vp-doc {
.markdown-body {
a {
text-decoration: inherit;
transition: all 0.4s;
&:hover {
text-decoration: underline;
}
}
}
}

View File

@ -93,3 +93,27 @@
color 0.5s; color 0.5s;
} }
} }
.markdown-body {
.table-container {
table {
thead {
th {
text-align: left;
border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
background-color: rgba(var(--va-c-primary-rgb), 0.1);
}
}
td {
border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
}
tr {
&:hover {
background-color: rgba(var(--va-c-primary-rgb), 0.05);
}
}
}
}
}

View File

@ -190,3 +190,38 @@ html:not(.dark) .vp-code-dark {
opacity: 0; opacity: 0;
} }
} }
// diff
.markdown-body {
[class*='language-'] code .diff {
transition: background-color 0.5s;
margin: 0 -24px;
padding: 0 24px;
width: calc(100% + 2 * 24px);
display: inline-block;
}
[class*='language-'] code .diff::before {
position: absolute;
left: 10px;
}
[class*='language-'] code .diff.remove {
background-color: var(--va-code-line-diff-remove-color);
opacity: 0.7;
}
[class*='language-'] code .diff.remove::before {
content: '-';
color: var(--va-code-line-diff-remove-symbol-color);
}
[class*='language-'] code .diff.add {
background-color: var(--va-code-line-diff-add-color);
}
[class*='language-'] code .diff.add::before {
content: '+';
color: var(--va-code-line-diff-add-symbol-color);
}
}

View File

@ -170,7 +170,6 @@
.custom-block a { .custom-block a {
color: inherit; color: inherit;
font-weight: 600; font-weight: 600;
// text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
transition: opacity 0.25s; transition: opacity 0.25s;
} }

View File

@ -104,7 +104,7 @@
"pascalcase": "^2.0.0", "pascalcase": "^2.0.0",
"pinia": "^2.1.6", "pinia": "^2.1.6",
"qrcode": "^1.5.3", "qrcode": "^1.5.3",
"sass": "^1.68.0", "sass": "^1.69.0",
"shiki": "^0.14.4", "shiki": "^0.14.4",
"star-markdown-css": "^0.4.2", "star-markdown-css": "^0.4.2",
"unconfig": "^0.3.11", "unconfig": "^0.3.11",

View File

@ -174,7 +174,7 @@ importers:
version: 3.0.1 version: 3.0.1
vite: vite:
specifier: ^4.4.11 specifier: ^4.4.11
version: 4.4.11(@types/node@20.8.2)(sass@1.68.0) version: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vitepress: vitepress:
specifier: 1.0.0-rc.20 specifier: 1.0.0-rc.20
version: 1.0.0-rc.20(@types/node@20.8.2)(search-insights@2.8.1) version: 1.0.0-rc.20(@types/node@20.8.2)(search-insights@2.8.1)
@ -338,8 +338,8 @@ importers:
specifier: ^1.5.3 specifier: ^1.5.3
version: 1.5.3 version: 1.5.3
sass: sass:
specifier: ^1.68.0 specifier: ^1.69.0
version: 1.68.0 version: 1.69.0
shiki: shiki:
specifier: ^0.14.4 specifier: ^0.14.4
version: 0.14.4 version: 0.14.4
@ -360,7 +360,7 @@ importers:
version: 17.8.4 version: 17.8.4
vite: vite:
specifier: ^4.4.11 specifier: ^4.4.11
version: 4.4.11(@types/node@20.8.2)(sass@1.68.0) version: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vite-plugin-pages: vite-plugin-pages:
specifier: ^0.31.0 specifier: ^0.31.0
version: 0.31.0(vite@4.4.11) version: 0.31.0(vite@4.4.11)
@ -3410,7 +3410,7 @@ packages:
'@unocss/core': 0.56.5 '@unocss/core': 0.56.5
'@unocss/reset': 0.56.5 '@unocss/reset': 0.56.5
'@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11) '@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11)
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
dev: false dev: false
@ -3601,7 +3601,7 @@ packages:
chokidar: 3.5.3 chokidar: 3.5.3
fast-glob: 3.3.1 fast-glob: 3.3.1
magic-string: 0.30.3 magic-string: 0.30.3
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
dev: false dev: false
@ -3613,7 +3613,7 @@ packages:
vite: ^4.0.0 vite: ^4.0.0
vue: ^3.2.25 vue: ^3.2.25
dependencies: dependencies:
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vue: 3.3.4 vue: 3.3.4
dev: false dev: false
@ -5352,7 +5352,7 @@ packages:
/eslint-import-resolver-node@0.3.9: /eslint-import-resolver-node@0.3.9:
resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
dependencies: dependencies:
debug: 3.2.7(supports-color@5.5.0) debug: 3.2.7(supports-color@8.1.1)
is-core-module: 2.13.0 is-core-module: 2.13.0
resolve: 1.22.4 resolve: 1.22.4
transitivePeerDependencies: transitivePeerDependencies:
@ -5381,7 +5381,7 @@ packages:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/parser': 6.7.4(eslint@8.50.0)(typescript@5.2.2) '@typescript-eslint/parser': 6.7.4(eslint@8.50.0)(typescript@5.2.2)
debug: 3.2.7(supports-color@5.5.0) debug: 3.2.7(supports-color@8.1.1)
eslint: 8.50.0 eslint: 8.50.0
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
transitivePeerDependencies: transitivePeerDependencies:
@ -5435,7 +5435,7 @@ packages:
peerDependencies: peerDependencies:
eslint: ^7.2.0 || ^8 eslint: ^7.2.0 || ^8
dependencies: dependencies:
debug: 3.2.7(supports-color@5.5.0) debug: 3.2.7(supports-color@8.1.1)
doctrine: 2.1.0 doctrine: 2.1.0
eslint: 8.50.0 eslint: 8.50.0
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
@ -8551,8 +8551,8 @@ packages:
/safer-buffer@2.1.2: /safer-buffer@2.1.2:
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
/sass@1.68.0: /sass@1.69.0:
resolution: {integrity: sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==} resolution: {integrity: sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:
@ -9538,7 +9538,7 @@ packages:
'@unocss/transformer-directives': 0.56.5 '@unocss/transformer-directives': 0.56.5
'@unocss/transformer-variant-group': 0.56.5 '@unocss/transformer-variant-group': 0.56.5
'@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11) '@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11)
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
transitivePeerDependencies: transitivePeerDependencies:
- postcss - postcss
- rollup - rollup
@ -9707,7 +9707,7 @@ packages:
mlly: 1.4.2 mlly: 1.4.2
pathe: 1.1.1 pathe: 1.1.1
picocolors: 1.0.0 picocolors: 1.0.0
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
transitivePeerDependencies: transitivePeerDependencies:
- '@types/node' - '@types/node'
- less - less
@ -9737,7 +9737,7 @@ packages:
open: 9.1.0 open: 9.1.0
picocolors: 1.0.0 picocolors: 1.0.0
sirv: 2.0.3 sirv: 2.0.3
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
- supports-color - supports-color
@ -9760,7 +9760,7 @@ packages:
json5: 2.2.3 json5: 2.2.3
local-pkg: 0.4.3 local-pkg: 0.4.3
picocolors: 1.0.0 picocolors: 1.0.0
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
yaml: 2.3.1 yaml: 2.3.1
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -9777,7 +9777,7 @@ packages:
debug: 4.3.4(supports-color@8.1.1) debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.1 fast-glob: 3.3.1
pretty-bytes: 6.1.1 pretty-bytes: 6.1.1
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
workbox-build: 7.0.0 workbox-build: 7.0.0
workbox-window: 7.0.0 workbox-window: 7.0.0
transitivePeerDependencies: transitivePeerDependencies:
@ -9794,7 +9794,7 @@ packages:
'@vue/compiler-sfc': 3.3.4 '@vue/compiler-sfc': 3.3.4
debug: 4.3.4(supports-color@8.1.1) debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.1 fast-glob: 3.3.1
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vue: 3.3.4 vue: 3.3.4
vue-router: 4.2.5(vue@3.3.4) vue-router: 4.2.5(vue@3.3.4)
transitivePeerDependencies: transitivePeerDependencies:
@ -9829,7 +9829,7 @@ packages:
jsdom: 22.1.0 jsdom: 22.1.0
kolorist: 1.8.0 kolorist: 1.8.0
prettier: 3.0.3 prettier: 3.0.3
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vue: 3.3.4 vue: 3.3.4
vue-router: 4.2.5(vue@3.3.4) vue-router: 4.2.5(vue@3.3.4)
yargs: 17.7.2 yargs: 17.7.2
@ -9840,7 +9840,7 @@ packages:
- utf-8-validate - utf-8-validate
dev: false dev: false
/vite@4.4.11(@types/node@20.8.2)(sass@1.68.0): /vite@4.4.11(@types/node@20.8.2)(sass@1.69.0):
resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true hasBin: true
@ -9872,7 +9872,7 @@ packages:
esbuild: 0.18.20 esbuild: 0.18.20
postcss: 8.4.31 postcss: 8.4.31
rollup: 3.29.0 rollup: 3.29.0
sass: 1.68.0 sass: 1.69.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
@ -9898,7 +9898,7 @@ packages:
mark.js: 8.11.1 mark.js: 8.11.1
minisearch: 6.1.0 minisearch: 6.1.0
shiki: 0.14.4 shiki: 0.14.4
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vue: 3.3.4 vue: 3.3.4
transitivePeerDependencies: transitivePeerDependencies:
- '@algolia/client-search' - '@algolia/client-search'
@ -9979,7 +9979,7 @@ packages:
strip-literal: 1.3.0 strip-literal: 1.3.0
tinybench: 2.5.0 tinybench: 2.5.0
tinypool: 0.7.0 tinypool: 0.7.0
vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0) vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
vite-node: 0.34.6(@types/node@20.8.2) vite-node: 0.34.6(@types/node@20.8.2)
why-is-node-running: 2.2.2 why-is-node-running: 2.2.2
transitivePeerDependencies: transitivePeerDependencies: