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

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.
 
+<!-- prettier-ignore-start -->
 ```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.
 
+<!-- [!code ++] -->
 ## Table of contents
 
 <!-- the rest of the post -->
 ```
+<!-- prettier-ignore-end -->
 
 ## Headings
 

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
    <!-- others... -->
    <script is:inline src="/toggle-theme.js"></script>
 
+   <!-- [!code highlight:4] -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
@@ -90,6 +91,7 @@ In this section, you will find instructions on how to add support for LaTeX in y
      /* other classes */
 
      /* Katex text color */
+     /* [!code highlight:3] */
      .prose .katex-display {
        @apply text-foreground;
      }

src/data/blog/how-to-integrate-giscus-comments.md

@@ -77,18 +77,18 @@ You should now have a script tag that looks like this:
 
 Simply add that to the source code of the site. Most likely, if you're using _AstroPaper_ and want to enable comments on posts, navigate to `src/layouts/PostDetails.astro` and paste it into the desired location where you want the comments to appear, perhaps underneath the `Share this post on:` buttons.
 
-```diff
-      <ShareLinks />
-    </div>
-
-+    <script src="https://giscus.app/client.js"
-+        data-repo="[ENTER REPO HERE]"
-+        data-repo-id="[ENTER REPO ID HERE]"
-+        data-category="[ENTER CATEGORY NAME HERE]"
-+        data-category-id="[ENTER CATEGORY ID HERE]"
-+        ...
-+    </script>
+```astro
+<Layout {...layoutProps}>
+  <main>
+    <ShareLinks />
 
+    <!-- [!code ++:6] -->
+    <script
+      src="https://giscus.app/client.js"
+      data-repo="[ENTER REPO HERE]"
+      data-repo-id="[ENTER REPO ID HERE]"
+      data-category="[ENTER CATEGORY NAME HERE]"
+      data-category-id="[ENTER CATEGORY ID HERE]"></script>
   </main>
   <Footer />
 </Layout>
@@ -189,19 +189,18 @@ Note that specifying a `theme` here will override the `lightTheme` and `darkThem
 
 To complete the process, add the new Comments component to `src/layouts/PostDetails.astro` (replacing the `script` tag from the previous step).
 
-```diff
-+ import Comments from "@/components/Comments";
+```jsx
+// [!code ++:1]
+import Comments from "@/components/Comments";
 
-      <ShareLinks />
-    </div>
+<ShareLinks />
 
-+   <Comments client:only="react" />
+// [!code ++:1]
+<Comments client:only="react" />
 
-    <hr class="my-6 border-dashed" />
+<hr class="my-6 border-dashed" />
 
-  </main>
-  <Footer />
-</Layout>
+<Footer />
 ```
 
 And that's it!

src/data/blog/setting-dates-via-git-hooks.md

@@ -142,15 +142,15 @@ To allow Astro to compile the markdown and do its thing, it needs to know what i
 
 To allow the key to be there with no value we need to edit line 10 to add the `.nullable()` function.
 
-```typescript
+```ts
 const blog = defineCollection({
   type: "content",
   schema: ({ image }) =>
     z.object({
       author: z.string().default(SITE.author),
       pubDatetime: z.date(),
--     modDatetime: z.date().optional(),
-+     modDatetime: z.date().optional().nullable(),
+      modDatetime: z.date().optional(), // [!code --]
+      modDatetime: z.date().optional().nullable(), // [!code ++]
       title: z.string(),
       featured: z.boolean().optional(),
       draft: z.boolean().optional(),
@@ -167,25 +167,23 @@ To stop the IDE complaining in the blog engine files I have also done the follow
 
 1. added `| null` to line 15 in `src/layouts/Layout.astro` so that it looks like
 
-```typescript
-export interface Props {
-  title?: string;
-  author?: string;
-  description?: string;
-  ogImage?: string;
-  canonicalURL?: string;
-  pubDatetime?: Date;
-  modDatetime?: Date | null;
-}
-```
-
-<!-- This needs to be 2 as it doesn't pick it up with the code block -->
+   ```typescript
+   export interface Props {
+     title?: string;
+     author?: string;
+     description?: string;
+     ogImage?: string;
+     canonicalURL?: string;
+     pubDatetime?: Date;
+     modDatetime?: Date | null;
+   }
+   ```
 
 2. added `| null` to line 5 in `src/components/Datetime.tsx` so that it looks like
 
-```typescript
-interface DatetimesProps {
-  pubDatetime: string | Date;
-  modDatetime: string | Date | undefined | null;
-}
-```
+   ```typescript
+   interface DatetimesProps {
+     pubDatetime: string | Date;
+     modDatetime: string | Date | undefined | null;
+   }
+   ```