From 76e15b55e3949bcf39783017be70959548343d90 Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Fri, 13 Jun 2025 23:08:18 +0700 Subject: [PATCH] feat: add Shiki transformers for better syntax highlighting (#534) * refactor: organize prose related styles inside nested prose * feat: add Shiki transformers for better syntax highlighting * chore: update blog posts using Shiki transformers Closes #210 --- astro.config.ts | 13 ++- package.json | 1 + pnpm-lock.yaml | 11 +++ src/data/blog/adding-new-post.md | 8 +- ...ow-to-add-latex-equations-in-blog-posts.md | 8 +- .../blog/how-to-integrate-giscus-comments.md | 39 +++++---- src/data/blog/setting-dates-via-git-hooks.md | 42 +++++----- src/layouts/PostDetails.astro | 5 +- src/styles/typography.css | 79 ++++++++++--------- 9 files changed, 121 insertions(+), 85 deletions(-) diff --git a/astro.config.ts b/astro.config.ts index 9671181..ae807b1 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -4,6 +4,11 @@ import sitemap from "@astrojs/sitemap"; import remarkToc from "remark-toc"; import remarkCollapse from "remark-collapse"; import { SITE } from "./src/config"; +import { + transformerNotationDiff, + transformerNotationHighlight, + transformerNotationWordHighlight, +} from "@shikijs/transformers"; // https://astro.build/config export default defineConfig({ @@ -18,7 +23,13 @@ export default defineConfig({ shikiConfig: { // For more themes, visit https://shiki.style/themes themes: { light: "min-light", dark: "night-owl" }, - wrap: true, + defaultColor: false, + wrap: false, + transformers: [ + transformerNotationDiff({ matchAlgorithm: "v3" }), + transformerNotationHighlight(), + transformerNotationWordHighlight(), + ], }, }, vite: { diff --git a/package.json b/package.json index 483c9db..fc71976 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "devDependencies": { "@astrojs/check": "^0.9.4", "@pagefind/default-ui": "^1.3.0", + "@shikijs/transformers": "^3.6.0", "@tailwindcss/typography": "^0.5.16", "@types/lodash.kebabcase": "^4.1.9", "@typescript-eslint/parser": "^8.34.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f295bad..ad23043 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,6 +51,9 @@ importers: '@pagefind/default-ui': specifier: ^1.3.0 version: 1.3.0 + '@shikijs/transformers': + specifier: ^3.6.0 + version: 3.6.0 '@tailwindcss/typography': specifier: ^0.5.16 version: 0.5.16(tailwindcss@4.1.8) @@ -892,6 +895,9 @@ packages: '@shikijs/themes@3.6.0': resolution: {integrity: sha512-Fq2j4nWr1DF4drvmhqKq8x5vVQ27VncF8XZMBuHuQMZvUSS3NBgpqfwz/FoGe36+W6PvniZ1yDlg2d4kmYDU6w==} + '@shikijs/transformers@3.6.0': + resolution: {integrity: sha512-PYkU54lYV0RCaUG8n2FNTF+YWiU3uPhcjLGq2x/C8lIrUX9GVnRb3bK+R5xtdFHbuctntATKm7ondp/H/dux9Q==} + '@shikijs/types@3.6.0': resolution: {integrity: sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==} @@ -3628,6 +3634,11 @@ snapshots: dependencies: '@shikijs/types': 3.6.0 + '@shikijs/transformers@3.6.0': + dependencies: + '@shikijs/core': 3.6.0 + '@shikijs/types': 3.6.0 + '@shikijs/types@3.6.0': dependencies: '@shikijs/vscode-textmate': 10.0.2 diff --git a/src/data/blog/adding-new-post.md b/src/data/blog/adding-new-post.md index 022c8cb..97cb830 100644 --- a/src/data/blog/adding-new-post.md +++ b/src/data/blog/adding-new-post.md @@ -44,8 +44,8 @@ If you don’t want subdirectories to affect the post URL, just prefix the folde src/data/blog/very-first-post.md -> mysite.com/posts/very-first-post src/data/blog/2025/example-post.md -> mysite.com/posts/2025/example-post src/data/blog/_2026/another-post.md -> mysite.com/posts/another-post -src/data/blog/docs/_legacy/how-to.md -> mysite.com/docs/how-to -src/data/blog/Example Dir/Dummy Post.md -> mysite.com/example-dir/dummy-post +src/data/blog/docs/_legacy/how-to.md -> mysite.com/posts/docs/how-to +src/data/blog/Example Dir/Dummy Post.md -> mysite.com/posts/example-dir/dummy-post ``` > 💡 Tip: You can override a blog post’s slug in the frontmatter as well. See the next section for more details. @@ -91,6 +91,7 @@ If you omit `tags` in a blog post (in other words, if no tag is specified), the export const blogSchema = z.object({ // --- draft: z.boolean().optional(), + // [!code highlight:1] tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want // --- }); @@ -128,6 +129,7 @@ Write `Table of contents` in h2 format (## in markdown) and place it where you w For instance, if you want to place your table of contents just under the intro paragraph (like I usually do), you can do that in the following way. + ```md --- # some frontmatter @@ -135,10 +137,12 @@ For instance, if you want to place your table of contents just under the intro p Here are some recommendations, tips & ticks for creating new posts in AstroPaper blog theme. + ## Table of contents ``` + ## Headings diff --git a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md b/src/data/blog/how-to-add-latex-equations-in-blog-posts.md index 04f7b9d..140645c 100644 --- a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md +++ b/src/data/blog/how-to-add-latex-equations-in-blog-posts.md @@ -43,15 +43,15 @@ In this section, you will find instructions on how to add support for LaTeX in y // other configs markdown: { remarkPlugins: [ - remarkMath, // <- new plugin + remarkMath, // [!code ++] remarkToc, [remarkCollapse, { test: "Table of contents" }], ], - rehypePlugins: [rehypeKatex], // <- new plugin + rehypePlugins: [rehypeKatex], // [!code ++] shikiConfig: { // For more themes, visit https://shiki.style/themes themes: { light: "min-light", dark: "night-owl" }, - wrap: true, + wrap: false, }, }, // other configs @@ -71,6 +71,7 @@ In this section, you will find instructions on how to add support for LaTeX in y + - - -+