This commit is contained in:
2025-12-20 23:28:38 +08:00
parent e5cd753904
commit e857204140
8 changed files with 251 additions and 107 deletions

View File

@@ -1,75 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps({ // 行内代码组件
code: {
type: String,
default: "",
},
language: {
type: String,
default: null,
},
filename: {
type: String,
default: null,
},
highlights: {
type: Array as () => number[],
default: () => [],
},
meta: {
type: String,
default: null,
},
});
</script> </script>
<template> <template>
<div <code
class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl"> class="bg-violet-500/10 text-violet-600 dark:text-violet-400 px-1.5 py-0.5 rounded-md font-mono text-[0.9em]"
<!-- 代码块头部 --> ><slot
<div /></code>
v-if="filename || language"
class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-amber-500/80"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
</div>
<span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400">{{ filename }}</span>
</div>
<span v-if="language" class="text-[10px] font-bold uppercase tracking-widest text-zinc-500">{{
language
}}</span>
</div>
<!-- 代码内容 -->
<div class="relative">
<pre class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar"><slot /></pre>
<!-- 复制按钮 (可选实现) -->
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
<button
class="p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-400 hover:text-white transition-colors">
<Icon name="heroicons:clipboard" class="w-4 h-4" />
</button>
</div>
</div>
</div>
</template> </template>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>

View File

@@ -0,0 +1,119 @@
<script setup lang="ts">
const props = defineProps({
code: {
type: String,
default: "",
},
language: {
type: String,
default: null,
},
filename: {
type: String,
default: null,
},
highlights: {
type: Array as () => number[],
default: () => [],
},
meta: {
type: String,
default: null,
},
});
const { copy, copied } = useClipboard({ source: props.code });
</script>
<template>
<div
class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-[#282a36] shadow-2xl line-numbers">
<!-- 代码块头部 -->
<div
v-if="filename || language"
class="flex items-center justify-between px-4 py-2 bg-black/20 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-[#ff5f56] shadow-[0_0_8px_rgba(255,95,86,0.2)]"></div>
<div
class="w-3 h-3 rounded-full bg-[#ffbd2e] shadow-[0_0_8px_rgba(255,189,46,0.2)]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f] shadow-[0_0_8px_rgba(39,201,63,0.2)]"></div>
</div>
<span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400 truncate max-w-[200px]">{{
filename
}}</span>
</div>
<div class="flex items-center gap-3">
<span
v-if="language"
class="text-[10px] font-bold uppercase tracking-widest text-zinc-500"
>{{ language }}</span
>
<!-- 复制按钮 -->
<button
class="p-1.5 rounded-md hover:bg-white/10 text-zinc-400 hover:text-white transition-all duration-200 active:scale-95"
:class="{ 'text-emerald-400': copied }"
@click="copy()">
<Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard'" class="w-3.5 h-3.5" />
</button>
</div>
</div>
<!-- 代码内容 -->
<div class="relative group/code">
<pre
class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar font-mono text-sm leading-relaxed selection:bg-violet-500/30"><slot /></pre>
</div>
</div>
</template>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* 行号实现 */
.line-numbers :deep(code) {
counter-reset: step;
counter-increment: step 0;
display: grid;
min-width: 100%;
}
.line-numbers :deep(.line) {
display: inline-flex;
min-height: 1.5rem;
}
.line-numbers :deep(.line::before) {
content: counter(step);
counter-increment: step;
width: 2rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: rgba(255, 255, 255, 0.15);
user-select: none;
font-size: 0.75rem;
flex-shrink: 0;
}
/* 高亮行样式 */
.line-numbers :deep(.line.highlight) {
background-color: rgba(139, 92, 246, 0.1);
margin: 0 -1rem;
padding: 0 1rem;
border-left: 2px solid #bd93f9;
width: calc(100% + 2rem);
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { footerData, socialLinks } from "~/data"; import { footerData } from "~/data";
</script> </script>
<template> <template>

View File

@@ -62,24 +62,6 @@ useHead({
</template> </template>
</ContentRenderer> </ContentRenderer>
</div> </div>
<!-- 分享区域 -->
<div class="mt-16 pt-8 border-t border-white/10 dark:border-white/5">
<h3 class="text-lg font-bold text-zinc-800 dark:text-zinc-100 mb-6 flex items-center gap-2">
<Icon name="heroicons:share" class="w-5 h-5 text-violet-500" />
Share this post
</h3>
<div class="flex flex-wrap gap-3">
<SocialShare
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
:key="network"
:network="network"
:styled="true"
:label="true"
class="!rounded-xl !bg-white/40 dark:!bg-slate-800/40 !backdrop-blur-md !border !border-white/20 dark:!border-white/5 !text-zinc-700 dark:!text-zinc-300 hover:!bg-violet-500/10 hover:!text-violet-600 transition-all duration-300"
aria-label="Share with {network}" />
</div>
</div>
</div> </div>
<!-- 侧边目录 --> <!-- 侧边目录 -->

View File

@@ -41,4 +41,57 @@ It may take some time for the DNS records to propagate, so be patient. Once the
### Conclusion ### Conclusion
`print("1")`
```c
int main() {
printf("1");
}
```
Some references:
* Commit: f8083175fe890cbf14f41d0a06e7aa35d4989587
* Commit (fork): foo@f8083175fe890cbf14f41d0a06e7aa35d4989587
* Commit (repo): remarkjs/remark@e1aa9f6c02de18b9459b7d269712bcb50183ce89
* Issue or PR (`#`): #1
* Issue or PR (`GH-`): GH-1
* Issue or PR (fork): foo#1
* Issue or PR (project): remarkjs/remark#1
* Mention: @wooorm
Some links:
* Commit: <https://github.com/remarkjs/remark/commit/e1aa9f6c02de18b9459b7d269712bcb50183ce89>
* Commit comment: <https://github.com/remarkjs/remark/commit/ac63bc3abacf14cf08ca5e2d8f1f8e88a7b9015c#commitcomment-16372693>
* Issue or PR: <https://github.com/remarkjs/remark/issues/182>
* Issue or PR comment: <https://github.com/remarkjs/remark-github/issues/3#issue-151160339>
* Mention: <https://github.com/ben-eb>
# GFM
## Autolink literals
<www.example.com>, <https://example.com>, and <contact@example.com>.
## Footnote
A note[^1]
[^1]: Big note.
## Strikethrough
~one~ or ~~two~~ tildes.
## Table
| a | b | c | d |
| - | :- | -: | :-: |
## Tasklist
* [ ] to do
* [x] done
Connecting your Namecheap domain to your Vercel app is a relatively simple process. By following the steps outlined in this blog, you'll be able to connect your custom domain in no time. Remember to be patient as it may take some time for the DNS records to propagate. If you run into any issues, don't hesitate to reach out to Vercel support for assistance. Connecting your Namecheap domain to your Vercel app is a relatively simple process. By following the steps outlined in this blog, you'll be able to connect your custom domain in no time. Remember to be patient as it may take some time for the DNS records to propagate. If you run into any issues, don't hesitate to reach out to Vercel support for assistance.

View File

@@ -61,9 +61,20 @@ export default defineNuxtConfig({
experimental: { nativeSqlite: true }, experimental: { nativeSqlite: true },
build: { build: {
markdown: { markdown: {
toc: {
depth: 3,
},
highlight: { highlight: {
theme: "dracula", theme: "dracula",
langs: ["c"],
}, },
remarkPlugins: {
"remark-gfm": {},
"remark-rehype": {},
},
// rehypePlugins: {
// "rehype-prism": {},
// },
}, },
}, },
}, },

View File

@@ -43,6 +43,7 @@
"nuxt-og-image": "^5.1.13", "nuxt-og-image": "^5.1.13",
"prettier": "^3.7.4", "prettier": "^3.7.4",
"prettier-eslint": "^16.4.2", "prettier-eslint": "^16.4.2",
"remark-github": "^12.0.0",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"unenv": "^1.10.0", "unenv": "^1.10.0",
"vue": "^3.5.26" "vue": "^3.5.26"

79
pnpm-lock.yaml generated
View File

@@ -7,13 +7,6 @@ settings:
importers: importers:
.: .:
dependencies:
better-sqlite3:
specifier: ^12.5.0
version: 12.5.0
vue:
specifier: ^3.5.26
version: 3.5.26(typescript@5.9.3)
devDependencies: devDependencies:
'@formkit/auto-animate': '@formkit/auto-animate':
specifier: ^0.9.0 specifier: ^0.9.0
@@ -102,12 +95,18 @@ importers:
prettier-eslint: prettier-eslint:
specifier: ^16.4.2 specifier: ^16.4.2
version: 16.4.2(typescript@5.9.3) version: 16.4.2(typescript@5.9.3)
remark-github:
specifier: ^12.0.0
version: 12.0.0
typescript: typescript:
specifier: ^5.9.3 specifier: ^5.9.3
version: 5.9.3 version: 5.9.3
unenv: unenv:
specifier: ^1.10.0 specifier: ^1.10.0
version: 1.10.0 version: 1.10.0
vue:
specifier: ^3.5.26
version: 3.5.26(typescript@5.9.3)
packages: packages:
@@ -5067,6 +5066,9 @@ packages:
remark-gfm@4.0.1: remark-gfm@4.0.1:
resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==, tarball: https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz} resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==, tarball: https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz}
remark-github@12.0.0:
resolution: {integrity: sha512-ByefQKFN184LeiGRCabfl7zUJsdlMYWEhiLX1gpmQ11yFg6xSuOTW7LVCv0oc1x+YvUMJW23NU36sJX2RWGgvg==, tarball: https://registry.npmjs.org/remark-github/-/remark-github-12.0.0.tgz}
remark-mdc@3.9.0: remark-mdc@3.9.0:
resolution: {integrity: sha512-hRbVWknG8V6HCfWz+YHUQaNey6AchYIi0jheYTUk9Y2XcMrc7ON5uVQOIhnBVQg2zKFm6bIlx4JoETUMM0Pq3g==, tarball: https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.9.0.tgz} resolution: {integrity: sha512-hRbVWknG8V6HCfWz+YHUQaNey6AchYIi0jheYTUk9Y2XcMrc7ON5uVQOIhnBVQg2zKFm6bIlx4JoETUMM0Pq3g==, tarball: https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.9.0.tgz}
@@ -5521,6 +5523,9 @@ packages:
resolution: {integrity: sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==, tarball: https://registry.npmjs.org/to-valid-identifier/-/to-valid-identifier-1.0.0.tgz} resolution: {integrity: sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==, tarball: https://registry.npmjs.org/to-valid-identifier/-/to-valid-identifier-1.0.0.tgz}
engines: {node: '>=20'} engines: {node: '>=20'}
to-vfile@8.0.0:
resolution: {integrity: sha512-IcmH1xB5576MJc9qcfEC/m/nQCFt3fzMHz45sSlgJyTWjRbKW1HAkJpuf3DgE57YzIlZcwcBZA5ENQbBo4aLkg==, tarball: https://registry.npmjs.org/to-vfile/-/to-vfile-8.0.0.tgz}
toidentifier@1.0.1: toidentifier@1.0.1:
resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==, tarball: https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz} resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==, tarball: https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz}
engines: {node: '>=0.6'} engines: {node: '>=0.6'}
@@ -8586,6 +8591,7 @@ snapshots:
dependencies: dependencies:
bindings: 1.5.0 bindings: 1.5.0
prebuild-install: 7.1.3 prebuild-install: 7.1.3
optional: true
binary-extensions@2.3.0: {} binary-extensions@2.3.0: {}
@@ -8600,6 +8606,7 @@ snapshots:
buffer: 5.7.1 buffer: 5.7.1
inherits: 2.0.4 inherits: 2.0.4
readable-stream: 3.6.2 readable-stream: 3.6.2
optional: true
boolbase@1.0.0: {} boolbase@1.0.0: {}
@@ -8636,6 +8643,7 @@ snapshots:
dependencies: dependencies:
base64-js: 1.5.1 base64-js: 1.5.1
ieee754: 1.2.1 ieee754: 1.2.1
optional: true
buffer@6.0.3: buffer@6.0.3:
dependencies: dependencies:
@@ -8751,7 +8759,8 @@ snapshots:
dependencies: dependencies:
readdirp: 5.0.0 readdirp: 5.0.0
chownr@1.1.4: {} chownr@1.1.4:
optional: true
chownr@3.0.0: {} chownr@3.0.0: {}
@@ -9000,10 +9009,12 @@ snapshots:
decompress-response@6.0.0: decompress-response@6.0.0:
dependencies: dependencies:
mimic-response: 3.1.0 mimic-response: 3.1.0
optional: true
deep-equal@1.0.1: {} deep-equal@1.0.1: {}
deep-extend@0.6.0: {} deep-extend@0.6.0:
optional: true
deep-is@0.1.4: {} deep-is@0.1.4: {}
@@ -9121,6 +9132,7 @@ snapshots:
end-of-stream@1.4.5: end-of-stream@1.4.5:
dependencies: dependencies:
once: 1.4.0 once: 1.4.0
optional: true
engine.io-client@6.6.3: engine.io-client@6.6.3:
dependencies: dependencies:
@@ -9484,7 +9496,8 @@ snapshots:
strip-final-newline: 4.0.0 strip-final-newline: 4.0.0
yoctocolors: 2.1.2 yoctocolors: 2.1.2
expand-template@2.0.3: {} expand-template@2.0.3:
optional: true
exsolve@1.0.8: {} exsolve@1.0.8: {}
@@ -9635,7 +9648,8 @@ snapshots:
fresh@2.0.0: {} fresh@2.0.0: {}
fs-constants@1.0.0: {} fs-constants@1.0.0:
optional: true
fs-extra@9.1.0: fs-extra@9.1.0:
dependencies: dependencies:
@@ -9708,7 +9722,8 @@ snapshots:
dependencies: dependencies:
git-up: 8.1.1 git-up: 8.1.1
github-from-package@0.0.0: {} github-from-package@0.0.0:
optional: true
github-slugger@2.0.0: {} github-slugger@2.0.0: {}
@@ -10045,7 +10060,8 @@ snapshots:
inherits@2.0.4: {} inherits@2.0.4: {}
ini@1.3.8: {} ini@1.3.8:
optional: true
ini@4.1.1: {} ini@4.1.1: {}
@@ -10848,7 +10864,8 @@ snapshots:
mimic-fn@4.0.0: {} mimic-fn@4.0.0: {}
mimic-response@3.1.0: {} mimic-response@3.1.0:
optional: true
mini-svg-data-uri@1.4.4: {} mini-svg-data-uri@1.4.4: {}
@@ -10884,7 +10901,8 @@ snapshots:
mitt@3.0.1: {} mitt@3.0.1: {}
mkdirp-classic@0.5.3: {} mkdirp-classic@0.5.3:
optional: true
mlly@1.8.0: mlly@1.8.0:
dependencies: dependencies:
@@ -10915,7 +10933,8 @@ snapshots:
nanotar@0.2.0: {} nanotar@0.2.0: {}
napi-build-utils@2.0.0: {} napi-build-utils@2.0.0:
optional: true
napi-postinstall@0.3.4: {} napi-postinstall@0.3.4: {}
@@ -11028,6 +11047,7 @@ snapshots:
node-abi@3.85.0: node-abi@3.85.0:
dependencies: dependencies:
semver: 7.7.3 semver: 7.7.3
optional: true
node-addon-api@7.1.1: {} node-addon-api@7.1.1: {}
@@ -11758,6 +11778,7 @@ snapshots:
simple-get: 4.0.1 simple-get: 4.0.1
tar-fs: 2.1.4 tar-fs: 2.1.4
tunnel-agent: 0.6.0 tunnel-agent: 0.6.0
optional: true
prelude-ls@1.2.1: {} prelude-ls@1.2.1: {}
@@ -11814,6 +11835,7 @@ snapshots:
dependencies: dependencies:
end-of-stream: 1.4.5 end-of-stream: 1.4.5
once: 1.4.0 once: 1.4.0
optional: true
punycode@2.3.1: {} punycode@2.3.1: {}
@@ -11840,6 +11862,7 @@ snapshots:
ini: 1.3.8 ini: 1.3.8
minimist: 1.2.8 minimist: 1.2.8
strip-json-comments: 2.0.1 strip-json-comments: 2.0.1
optional: true
react-is@18.3.1: {} react-is@18.3.1: {}
@@ -11862,6 +11885,7 @@ snapshots:
inherits: 2.0.4 inherits: 2.0.4
string_decoder: 1.3.0 string_decoder: 1.3.0
util-deprecate: 1.0.2 util-deprecate: 1.0.2
optional: true
readable-stream@4.7.0: readable-stream@4.7.0:
dependencies: dependencies:
@@ -11980,6 +12004,15 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
remark-github@12.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-find-and-replace: 3.0.2
mdast-util-to-string: 4.0.0
to-vfile: 8.0.0
unist-util-visit: 5.0.0
vfile: 6.0.3
remark-mdc@3.9.0: remark-mdc@3.9.0:
dependencies: dependencies:
'@types/mdast': 4.0.4 '@types/mdast': 4.0.4
@@ -12244,13 +12277,15 @@ snapshots:
signal-exit@4.1.0: {} signal-exit@4.1.0: {}
simple-concat@1.0.1: {} simple-concat@1.0.1:
optional: true
simple-get@4.0.1: simple-get@4.0.1:
dependencies: dependencies:
decompress-response: 6.0.0 decompress-response: 6.0.0
once: 1.4.0 once: 1.4.0
simple-concat: 1.0.1 simple-concat: 1.0.1
optional: true
simple-git@3.30.0: simple-git@3.30.0:
dependencies: dependencies:
@@ -12393,7 +12428,8 @@ snapshots:
strip-indent@4.1.1: {} strip-indent@4.1.1: {}
strip-json-comments@2.0.1: {} strip-json-comments@2.0.1:
optional: true
strip-json-comments@3.1.1: {} strip-json-comments@3.1.1: {}
@@ -12501,6 +12537,7 @@ snapshots:
mkdirp-classic: 0.5.3 mkdirp-classic: 0.5.3
pump: 3.0.3 pump: 3.0.3
tar-stream: 2.2.0 tar-stream: 2.2.0
optional: true
tar-stream@2.2.0: tar-stream@2.2.0:
dependencies: dependencies:
@@ -12509,6 +12546,7 @@ snapshots:
fs-constants: 1.0.0 fs-constants: 1.0.0
inherits: 2.0.4 inherits: 2.0.4
readable-stream: 3.6.2 readable-stream: 3.6.2
optional: true
tar-stream@3.1.7: tar-stream@3.1.7:
dependencies: dependencies:
@@ -12570,6 +12608,10 @@ snapshots:
'@sindresorhus/base62': 1.0.0 '@sindresorhus/base62': 1.0.0
reserved-identifiers: 1.2.0 reserved-identifiers: 1.2.0
to-vfile@8.0.0:
dependencies:
vfile: 6.0.3
toidentifier@1.0.1: {} toidentifier@1.0.1: {}
totalist@3.0.1: {} totalist@3.0.1: {}
@@ -12599,6 +12641,7 @@ snapshots:
tunnel-agent@0.6.0: tunnel-agent@0.6.0:
dependencies: dependencies:
safe-buffer: 5.2.1 safe-buffer: 5.2.1
optional: true
type-check@0.4.0: type-check@0.4.0:
dependencies: dependencies: