feat: support line highlighter

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<string>) {
 	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);

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",

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 "[email protected]"
    ```
 2. See the generated key.
-   ```bash
+   ```bash {1}
    cat ~/.ssh/id_ed25519.pub
    # ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIIB8J6 "[email protected]"
    ```

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;
+}