From a9aa96d5e452f66ea1ed3fc40b3fd933ed33f1bf Mon Sep 17 00:00:00 2001 From: oxwazz Date: Sun, 28 Apr 2024 23:31:18 +0700 Subject: [PATCH] feat: support line highlighter --- astro.config.ts | 9 ++++-- package.json | 1 + pnpm-lock.yaml | 11 ++++++-- .../index.mdx | 14 +++++++++- src/styles/twoslash.css | 28 ++++++++++++++++++- 5 files changed, 56 insertions(+), 7 deletions(-) diff --git a/astro.config.ts b/astro.config.ts index c8cd78f..632572d 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -5,16 +5,16 @@ import tailwind from "@astrojs/tailwind"; import sitemap from "@astrojs/sitemap"; import prefetch from "@astrojs/prefetch"; import remarkUnwrapImages from "remark-unwrap-images"; -// @ts-ignore:next-line import { remarkReadingTime } from "./src/utils/remark-reading-time.mjs"; import { transformerTwoslash, rendererRich } from "@shikijs/twoslash"; +import { transformerNotationDiff, transformerNotationHighlight } from "@shikijs/transformers"; -// https://astro.build/config export default defineConfig({ // ! Please remember to replace the following site property with your own domain site: "https://oxwazz.com/", markdown: { syntaxHighlight: "shiki", + // @ts-expect-error remarkPlugins: [remarkUnwrapImages, remarkReadingTime], remarkRehype: { footnoteLabelProperties: { className: [""] } }, shikiConfig: { @@ -23,9 +23,12 @@ export default defineConfig({ dark: "vitesse-dark", }, transformers: [ + // @ts-expect-error transformerTwoslash({ renderer: rendererRich(), }), + transformerNotationDiff(), + transformerNotationHighlight(), ], }, }, @@ -48,7 +51,7 @@ export default defineConfig({ function rawFonts(ext: Array) { return { name: "vite-plugin-raw-fonts", - // @ts-ignore:next-line + // @ts-expect-error transform(_, id) { if (ext.some((e) => id.endsWith(e))) { const buffer = fs.readFileSync(id); diff --git a/package.json b/package.json index b469cc3..b0612d9 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "devDependencies": { "@pagefind/default-ui": "^0.12.0", "@resvg/resvg-js": "^2.6.2", + "@shikijs/transformers": "^1.3.0", "@shikijs/twoslash": "^1.2.2", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/typography": "^0.5.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c95ccad..400f186 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ devDependencies: '@resvg/resvg-js': specifier: ^2.6.2 version: 2.6.2 + '@shikijs/transformers': + specifier: ^1.3.0 + version: 1.3.0 '@shikijs/twoslash': specifier: ^1.2.2 version: 1.2.2(typescript@5.4.3) @@ -1316,7 +1319,12 @@ packages: /@shikijs/core@1.3.0: resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==} - dev: false + + /@shikijs/transformers@1.3.0: + resolution: {integrity: sha512-3mlpg2I9CjhjE96dEWQOGeCWoPcyTov3s4aAsHmgvnTHa8MBknEnCQy8/xivJPSpD+olqOqIEoHnLfbNJK29AA==} + dependencies: + shiki: 1.3.0 + dev: true /@shikijs/twoslash@1.2.2(typescript@5.4.3): resolution: {integrity: sha512-jeKlFxejIj1f8SKNCHqWUyjSmfqsO91iCdiD2aG2fZk49JhesXBwqzEsCoB6DxSnVSNredjYbcnDKzTAjmySmQ==} @@ -5826,7 +5834,6 @@ packages: resolution: {integrity: sha512-9aNdQy/etMXctnPzsje1h1XIGm9YfRcSksKOGqZWXA/qP9G18/8fpz5Bjpma8bOgz3tqIpjERAd6/lLjFyzoww==} dependencies: '@shikijs/core': 1.3.0 - dev: false /side-channel@1.0.6: resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} diff --git a/src/content/post/create-export-import-ssh-and-gpg-key/index.mdx b/src/content/post/create-export-import-ssh-and-gpg-key/index.mdx index 14da61d..4550d4a 100644 --- a/src/content/post/create-export-import-ssh-and-gpg-key/index.mdx +++ b/src/content/post/create-export-import-ssh-and-gpg-key/index.mdx @@ -22,13 +22,25 @@ tags: ["create ssh gpg", "export ssh gpg", "import ssh gpg", "backup ssh gpg"] - [ ] https://github.com/octo-org/octo-repo/issues/740 - [ ] Add delight to the experience when all tasks are complete :tada: +```ts +console.log('Highlighted') // [!code highlight] +console.log('Highlighted') // [!code highlight] +console.log('Not highlighted') +``` + +```ts +console.log('hewwo') // [!code --] +console.log('hello') // [!code ++] +console.log('goodbye') +``` + ### Create SSH Key 1. Generate SSH Key with **ed25519** algorithm. ```bash ssh-keygen -t ed25519 -C "johndoe@example.com" ``` 2. See the generated key. - ```bash + ```bash {1} cat ~/.ssh/id_ed25519.pub # ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIIB8J6 "johndoe@example.com" ``` diff --git a/src/styles/twoslash.css b/src/styles/twoslash.css index f073236..51430bf 100644 --- a/src/styles/twoslash.css +++ b/src/styles/twoslash.css @@ -34,6 +34,7 @@ margin-right: 0; } +/** override background-color */ html.dark pre.astro-code, html.dark pre.astro-code *:not(.twoslash-error-line):not(.twoslash-completions-unmatched) { color: var(--shiki-dark) !important; @@ -44,7 +45,6 @@ html.dark pre.astro-code *:not(.twoslash-error-line):not(.twoslash-completions-u text-decoration: var(--shiki-dark-text-decoration) !important; } -/** override background-color */ html pre.astro-code, html pre.astro-code *:not(.twoslash-error-line):not(.twoslash-completions-unmatched) { @@ -65,3 +65,29 @@ html pre.astro-code { html pre.astro-code { @apply mt-2.5 mb-3.5; } + +/** add highlight style */ +html pre.astro-code { + @apply block px-0 py-5; +} +html pre.astro-code span.line:has(> *) { + @apply px-5; + display: inline-block; +} + +html pre.astro-code span.line.highlighted { + @apply px-5; + display: inline-block; + width: 100%; +} +html pre.astro-code span.line.highlighted, +html pre.astro-code code span.line.highlighted span, +html pre.astro-code code span.line.highlighted span.twoslash-popup-container * { + background: #eaeaea !important; +} + +html.dark pre.astro-code span.line.highlighted, +html.dark pre.astro-code code span.line.highlighted span, +html.dark pre.astro-code code span.line.highlighted span.twoslash-popup-container * { + background: #1f1f1f !important; +}