From 33f29c1d36f17acdf52f69efd1ca21d31e717659 Mon Sep 17 00:00:00 2001 From: suvaranjan <suvaranjan01@gmail.com> Date: Thu, 1 May 2025 11:02:57 +0530 Subject: [PATCH] feat: replace Prism with Shiki and add support for light/dark themes --- app/blog/[...slug]/page.tsx | 1 - components/MDXComponents.tsx | 2 +- components/Pre.tsx | 59 ++++ contentlayer.config.ts | 17 +- css/prism.css | 142 ---------- css/tailwind.css | 58 ++++ ...e-of-tailwind-nextjs-starter-blog-v2.0.mdx | 38 +++ package.json | 2 +- yarn.lock | 268 +++++++++++------- 9 files changed, 343 insertions(+), 244 deletions(-) create mode 100644 components/Pre.tsx delete mode 100644 css/prism.css diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx index af96a2b59b..787f4e8dfd 100644 --- a/app/blog/[...slug]/page.tsx +++ b/app/blog/[...slug]/page.tsx @@ -1,4 +1,3 @@ -import 'css/prism.css' import 'katex/dist/katex.css' import PageTitle from '@/components/PageTitle' diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx index 4b3e271c25..5804ac0868 100644 --- a/components/MDXComponents.tsx +++ b/components/MDXComponents.tsx @@ -1,10 +1,10 @@ import TOCInline from 'pliny/ui/TOCInline' -import Pre from 'pliny/ui/Pre' import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm' import type { MDXComponents } from 'mdx/types' import Image from './Image' import CustomLink from './Link' import TableWrapper from './TableWrapper' +import Pre from './Pre' export const components: MDXComponents = { Image, diff --git a/components/Pre.tsx b/components/Pre.tsx new file mode 100644 index 0000000000..273f47a4c6 --- /dev/null +++ b/components/Pre.tsx @@ -0,0 +1,59 @@ +/* eslint-disable prettier/prettier */ +'use client' + +import { useState, useRef, ReactNode } from 'react' + +const Pre = ({ children, ...props }: { children: ReactNode; [key: string] }) => { + const preRef = useRef<HTMLPreElement>(null) + const [copied, setCopied] = useState(false) + + const onCopy = () => { + if (preRef.current) { + const codeElements = preRef.current.querySelectorAll('code') + const textToCopy = Array.from(codeElements) + .map((code) => code.textContent) + .join('\n') + + navigator.clipboard.writeText(textToCopy) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + } + + const icons = { + copy: ( + <svg width="16" height="16" viewBox="0 0 15 15" fill="none"> + <path + d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z" + fill="currentColor" + /> + </svg> + ), + checked: ( + <svg width="18" height="18" viewBox="0 0 15 15" fill="none"> + <path + d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" + fill="currentColor" + /> + </svg> + ), + } + + return ( + <div className="group relative border border-gray-200 dark:border-none"> + <pre ref={preRef} {...props} className={`${props.className || ''} relative mb-0`}> + {children} + </pre> + + <button + aria-label="Copy code" + onClick={onCopy} + className="absolute top-2 right-2 z-10 rounded p-1 text-gray-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100" + > + {copied ? icons.checked : icons.copy} + </button> + </div> + ) +} + +export default Pre diff --git a/contentlayer.config.ts b/contentlayer.config.ts index c27ce7b982..6080fe3357 100644 --- a/contentlayer.config.ts +++ b/contentlayer.config.ts @@ -20,7 +20,7 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings' import rehypeKatex from 'rehype-katex' import rehypeKatexNoTranslate from 'rehype-katex-notranslate' import rehypeCitation from 'rehype-citation' -import rehypePrismPlus from 'rehype-prism-plus' +import rehypeShiki from '@shikijs/rehype' import rehypePresetMinify from 'rehype-preset-minify' import siteMetadata from './data/siteMetadata' import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer.js' @@ -175,7 +175,20 @@ export default makeSource({ rehypeKatex, rehypeKatexNoTranslate, [rehypeCitation, { path: path.join(root, 'data') }], - [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }], + + // Configure Shiki with light and dark themes that automatically switch based on the app's theme preference. + // For a complete list of available themes and to experiment with different styles, visit: + // https://shiki.style/themes + + [ + rehypeShiki, + { + themes: { + light: 'github-light', + dark: 'aurora-x', + }, + }, + ], rehypePresetMinify, ], }, diff --git a/css/prism.css b/css/prism.css deleted file mode 100644 index f3bac375e7..0000000000 --- a/css/prism.css +++ /dev/null @@ -1,142 +0,0 @@ -@reference "./tailwind.css"; - -/** - * CSS Styles for code highlighting. - * Feel free to customize token styles - * by copying from a prismjs compatible theme: - * https://github.com/PrismJS/prism-themes - */ - -/* Code title styles */ -.remark-code-title { - @apply rounded-xs bg-gray-700 px-5 py-3 font-mono text-sm font-bold text-gray-200 dark:bg-gray-800; -} - -.remark-code-title + div > pre { - @apply mt-0 rounded-t-none; -} - -/* Code block styles */ -.code-highlight { - @apply float-left min-w-full; -} - -.code-line { - @apply -mx-4 block border-l-4 border-transparent pr-4 pl-4; -} - -.code-line.inserted { - @apply bg-green-500/20; -} - -.code-line.deleted { - @apply bg-red-500/20; -} - -.highlight-line { - @apply border-primary-500 -mx-4 border-l-4 bg-gray-700/50; -} - -.line-number::before { - @apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400; - content: attr(line); -} - -/* Token styles */ -/** - * MIT License - * Copyright (c) 2018 Sarah Drasner - * Sarah Drasner's[@sdras] Night Owl - * Ported by Sara vieria [@SaraVieira] - * Added by Souvik Mandal [@SimpleIndian] - */ -.token.comment, -.token.prolog, -.token.cdata { - color: rgb(99, 119, 119); - font-style: italic; -} - -.token.punctuation { - color: rgb(199, 146, 234); -} - -.namespace { - color: rgb(178, 204, 214); -} - -.token.deleted { - color: rgba(239, 83, 80, 0.56); - font-style: italic; -} - -.token.symbol, -.token.property { - color: rgb(128, 203, 196); -} - -.token.tag, -.token.operator, -.token.keyword { - color: rgb(127, 219, 202); -} - -.token.boolean { - color: rgb(255, 88, 116); -} - -.token.number { - color: rgb(247, 140, 108); -} - -.token.constant, -.token.function, -.token.builtin, -.token.char { - color: rgb(130, 170, 255); -} - -.token.selector, -.token.doctype { - color: rgb(199, 146, 234); - font-style: italic; -} - -.token.attr-name, -.token.inserted { - color: rgb(173, 219, 103); - font-style: italic; -} - -.token.string, -.token.url, -.token.entity, -.language-css .token.string, -.style .token.string { - color: rgb(173, 219, 103); -} - -.token.class-name, -.token.atrule, -.token.attr-value { - color: rgb(255, 203, 139); -} - -.token.regex, -.token.important, -.token.variable { - color: rgb(214, 222, 235); -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.table { - display: inline; -} diff --git a/css/tailwind.css b/css/tailwind.css index 5a8a4c2f15..0081db40c0 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -173,3 +173,61 @@ input:-webkit-autofill:focus { display: inline-block; vertical-align: middle; } + +/* Code Block and Code Title styles */ +/* Class-based Dark Theme Styles for Shiki Syntax Highlighting. For more info visit - https://shiki.style/guide/dual-themes*/ + +html.dark .shiki, +html.dark .shiki span { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; +} + +/* Code block title style. Feel free to edit */ +.remark-code-title { + @apply relative border-t border-r border-l border-gray-200 px-4 py-3 font-mono text-sm font-semibold dark:border-none; + @apply bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300; + @apply rounded-t-md; + padding-right: 3.5rem; /* Make space for dots */ +} + +/* Create the three dots using a pseudo-element */ +.remark-code-title::before { + content: ''; + position: absolute; + right: 5rem; + top: 50%; + transform: translateY(-50%); + display: inline-flex; + gap: 0.5rem; +} + +/* Create the dots using box shadows */ +.remark-code-title::before { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + /* Mac-style red, yellow, green dots using box-shadow trick */ + box-shadow: + 20px 0 0 #f87171, + 40px 0 0 #fbbf24, + 60px 0 0 #4ade80; +} + +/* Dark mode colors for three dot */ +.dark .remark-code-title::before { + box-shadow: + 20px 0 0 #ef4444, + 40px 0 0 #eab308, + 60px 0 0 #22c55e; +} + +/* Adjust the pre element to connect perfectly */ +.remark-code-title + div > pre { + @apply mt-0 rounded-t-none; +} diff --git a/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx b/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx index 37afcbbf9b..341a5cf290 100644 --- a/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx +++ b/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx @@ -151,6 +151,44 @@ The primary theme color is updated from `teal` to `pink` and the primary gray th Inter is now replaced with Space Grotesk as the default font. +## New Code Block Light/Dark Themes + +We’ve replaced PrismJS with **[Shiki](https://shiki.style/)** for simplified, accurate, and faster syntax highlighting. + +### Why Shiki? + +- **Faster & More Accurate**: Shiki uses same engine as VS Code's syntax highlighting. Provides very accurate and fast syntax highlighting for almost any mainstream programming language. +- **No Customization Required**: No need for custom RegEx, CSS, or HTML. + +### Features and Customization: + +- **Light & Dark Mode Support**: Automatically switches between light and dark themes based on the app’s current theme. + +- **More Themes**: it offers variety of built-in themes to choose from, just like VS Code. + +- **Custom Themes**: You can load custom themes by passing a Theme object into the themes array. ( learn more about custom themes [Shiki custom Themes](https://shiki.style/themes).) + +- **Change Themes**: Modify code block light/dark themes in the `contentlayer.ts` file.Default Light/dark theme is `github-light` and `aurora-x`. + +- **Code Title Style**: The code title is designed with a minimal three-dot MacBook style. You can adjust or remove it in the `css/tailwind.css` file. + +For a complete list of available themes and to experiment with different styles, visit [Shiki Themes](https://shiki.style/themes). + +```ts:contentlayer.config.ts +[ + rehypeShiki, + { + themes: { + // Here you can play with All built-in Shiki themes. + // You can load custom themes by passing a Theme object into the themes array. + + light: 'github-light', + dark: 'aurora-x', + }, + }, +] +``` + ### New Layouts Layout components available in the `layouts` directory, provide a simple way to customize the look and feel of the blog.[^2] diff --git a/package.json b/package.json index f67158d372..5891bcfb53 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@headlessui/react": "2.2.0", "@next/bundle-analyzer": "15.2.4", + "@shikijs/rehype": "^3.3.0", "@tailwindcss/forms": "^0.5.9", "@tailwindcss/postcss": "^4.0.5", "@tailwindcss/typography": "^0.5.15", @@ -37,7 +38,6 @@ "rehype-katex": "^7.0.0", "rehype-katex-notranslate": "^1.1.4", "rehype-preset-minify": "7.0.0", - "rehype-prism-plus": "^2.0.0", "rehype-slug": "^6.0.0", "remark": "^15.0.0", "remark-gfm": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index 06ba48f088..061983c6be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3371,6 +3371,88 @@ __metadata: languageName: node linkType: hard +"@shikijs/core@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/core@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + "@shikijs/vscode-textmate": ^10.0.2 + "@types/hast": ^3.0.4 + hast-util-to-html: ^9.0.5 + checksum: 71fade1ed9c64b541c7c7d8898bd6c5ffe0913b32b57dfd5259b1a561ad1ed32e2a68adf56a60872f2957346fd210760525fa73bc1953fff838c5d69e588a466 + languageName: node + linkType: hard + +"@shikijs/engine-javascript@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/engine-javascript@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + "@shikijs/vscode-textmate": ^10.0.2 + oniguruma-to-es: ^4.2.0 + checksum: 4f05dd7949c5c992be1c023b2cbadd3e9454d1d91f3ebd95abdce4d4b06b63cdb6ef354500c47fc6b5ad158d2a4a9eb554cee22b639138ef6f111c9f98ef01e7 + languageName: node + linkType: hard + +"@shikijs/engine-oniguruma@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/engine-oniguruma@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + "@shikijs/vscode-textmate": ^10.0.2 + checksum: c5488daa27cb4a6489e458e920417ef6e3ed74e45e69efb3c817fa69dba515d4db331833cb2eb9495031ddf6a292c201ca0b3b66d5adbd6cda1d37e4481728fa + languageName: node + linkType: hard + +"@shikijs/langs@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/langs@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + checksum: fcef4d7e4768b1fe0a1722164ab096c3aa839d5d05d658da7dbd5e8a693eb5022d2cdc9952938fde8858f0f48b9e568d009e1271eedd219c2835689fe18de055 + languageName: node + linkType: hard + +"@shikijs/rehype@npm:^3.3.0": + version: 3.3.0 + resolution: "@shikijs/rehype@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + "@types/hast": ^3.0.4 + hast-util-to-string: ^3.0.1 + shiki: 3.3.0 + unified: ^11.0.5 + unist-util-visit: ^5.0.0 + checksum: 55cea53b1371783db5540eb468ada86b78956573ff822e29aa6cd89b1eb5f94134c9acd9b6008a5bf4a1bce9a5f76a76d72715ee92ac383bdf23f50165c716e5 + languageName: node + linkType: hard + +"@shikijs/themes@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/themes@npm:3.3.0" + dependencies: + "@shikijs/types": 3.3.0 + checksum: c5f233754d106ea6c1d55a8462e26685d641a8e2b5326ed55b67e47b1f0484a7f43a45834fc5b10838a6e2c63a37fd5842474d3c92aafd86236f2cb83b25c44c + languageName: node + linkType: hard + +"@shikijs/types@npm:3.3.0": + version: 3.3.0 + resolution: "@shikijs/types@npm:3.3.0" + dependencies: + "@shikijs/vscode-textmate": ^10.0.2 + "@types/hast": ^3.0.4 + checksum: c3d7530ba89787a191f82eb1ebc3ff094d82cdde5f138654bbec9aff6167b462448bd4ba69adfda8c9b1135e0dc722652d473e49d19a77e9263ed3de1193c7e3 + languageName: node + linkType: hard + +"@shikijs/vscode-textmate@npm:^10.0.2": + version: 10.0.2 + resolution: "@shikijs/vscode-textmate@npm:10.0.2" + checksum: e68f27a3dc1584d7414b8acafb9c177a2181eb0b06ef178d8609142f49d28d85fd10ab129affde40a45a7d9238997e457ce47931b3a3815980e2b98b2d26724c + languageName: node + linkType: hard + "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0": version: 8.0.0 resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0" @@ -3779,16 +3861,7 @@ __metadata: languageName: node linkType: hard -"@types/hast@npm:^2.0.0": - version: 2.3.10 - resolution: "@types/hast@npm:2.3.10" - dependencies: - "@types/unist": ^2 - checksum: 41531b7fbf590b02452996fc63272479c20a07269e370bd6514982cbcd1819b4b84d3ea620f2410d1b9541a23d08ce2eeb0a592145d05e00e249c3d56700d460 - languageName: node - linkType: hard - -"@types/hast@npm:^3.0.0": +"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4": version: 3.0.4 resolution: "@types/hast@npm:3.0.4" dependencies: @@ -3850,13 +3923,6 @@ __metadata: languageName: node linkType: hard -"@types/prismjs@npm:^1.0.0": - version: 1.26.5 - resolution: "@types/prismjs@npm:1.26.5" - checksum: d208b04ee9b6de6b2dc916439a81baa47e64ab3659a66d3d34bc3e42faccba9d4b26f590d76f97f7978d1dfaafa0861f81172b1e3c68696dd7a42d73aaaf5b7b - languageName: node - linkType: hard - "@types/react@npm:^19.0.8": version: 19.0.8 resolution: "@types/react@npm:19.0.8" @@ -3887,7 +3953,7 @@ __metadata: languageName: node linkType: hard -"@types/unist@npm:^2, @types/unist@npm:^2.0.0": +"@types/unist@npm:^2.0.0": version: 2.0.11 resolution: "@types/unist@npm:2.0.11" checksum: 6d436e832bc35c6dde9f056ac515ebf2b3384a1d7f63679d12358766f9b313368077402e9c1126a14d827f10370a5485e628bf61aa91117cf4fc882423191a4e @@ -6878,15 +6944,6 @@ __metadata: languageName: node linkType: hard -"hast-util-parse-selector@npm:^3.0.0": - version: 3.1.1 - resolution: "hast-util-parse-selector@npm:3.1.1" - dependencies: - "@types/hast": ^2.0.0 - checksum: 511d373465f60dd65e924f88bf0954085f4fb6e3a2b062a4b5ac43b93cbfd36a8dce6234b5d1e3e63499d936375687e83fc5da55628b22bd6b581b5ee167d1c4 - languageName: node - linkType: hard - "hast-util-parse-selector@npm:^4.0.0": version: 4.0.0 resolution: "hast-util-parse-selector@npm:4.0.0" @@ -6962,6 +7019,25 @@ __metadata: languageName: node linkType: hard +"hast-util-to-html@npm:^9.0.5": + version: 9.0.5 + resolution: "hast-util-to-html@npm:9.0.5" + dependencies: + "@types/hast": ^3.0.0 + "@types/unist": ^3.0.0 + ccount: ^2.0.0 + comma-separated-tokens: ^2.0.0 + hast-util-whitespace: ^3.0.0 + html-void-elements: ^3.0.0 + mdast-util-to-hast: ^13.0.0 + property-information: ^7.0.0 + space-separated-tokens: ^2.0.0 + stringify-entities: ^4.0.0 + zwitch: ^2.0.4 + checksum: 1ebd013ad340cf646ea944100427917747f69543800e79b2186521dc29c205b4fe75d8062f3eddedf6d66f6180ca06fe127b9e53ff15a8f3579e36637ca43e16 + languageName: node + linkType: hard + "hast-util-to-jsx-runtime@npm:^2.0.0": version: 2.3.2 resolution: "hast-util-to-jsx-runtime@npm:2.3.2" @@ -6985,7 +7061,7 @@ __metadata: languageName: node linkType: hard -"hast-util-to-string@npm:^3.0.0": +"hast-util-to-string@npm:^3.0.0, hast-util-to-string@npm:^3.0.1": version: 3.0.1 resolution: "hast-util-to-string@npm:3.0.1" dependencies: @@ -7015,19 +7091,6 @@ __metadata: languageName: node linkType: hard -"hastscript@npm:^7.0.0": - version: 7.2.0 - resolution: "hastscript@npm:7.2.0" - dependencies: - "@types/hast": ^2.0.0 - comma-separated-tokens: ^2.0.0 - hast-util-parse-selector: ^3.0.0 - property-information: ^6.0.0 - space-separated-tokens: ^2.0.0 - checksum: 928a21576ff7b9a8c945e7940bcbf2d27f770edb4279d4d04b33dc90753e26ca35c1172d626f54afebd377b2afa32331e399feb3eb0f7b91a399dca5927078ae - languageName: node - linkType: hard - "hastscript@npm:^9.0.0": version: 9.0.0 resolution: "hastscript@npm:9.0.0" @@ -9561,6 +9624,24 @@ __metadata: languageName: node linkType: hard +"oniguruma-parser@npm:^0.12.0": + version: 0.12.1 + resolution: "oniguruma-parser@npm:0.12.1" + checksum: 3477cecee6f93e312a59fca66bc8fa206729698ea27d2d501d5ac970918b5cdfcf5efbdae6eeb6c7cd7f9cb2ccc52536d57ce90679070ce50a245f8a1f4bc1b5 + languageName: node + linkType: hard + +"oniguruma-to-es@npm:^4.2.0": + version: 4.3.2 + resolution: "oniguruma-to-es@npm:4.3.2" + dependencies: + oniguruma-parser: ^0.12.0 + regex: ^6.0.1 + regex-recursion: ^6.0.2 + checksum: ae89ddbb6058fc9a2d92d836e4ccc1a248f7b49208f58a388ed1fa082d3aef12eb35fdb5cb4f366e6534dab0a665b674bc28fa8e88ecaf9c3c9965925086da6f + languageName: node + linkType: hard + "oo-ascii-tree@npm:^1.94.0": version: 1.106.0 resolution: "oo-ascii-tree@npm:1.106.0" @@ -9670,13 +9751,6 @@ __metadata: languageName: node linkType: hard -"parse-numeric-range@npm:^1.3.0": - version: 1.3.0 - resolution: "parse-numeric-range@npm:1.3.0" - checksum: 289ca126d5b8ace7325b199218de198014f58ea6895ccc88a5247491d07f0143bf047f80b4a31784f1ca8911762278d7d6ecb90a31dfae31da91cc1a2524c8ce - languageName: node - linkType: hard - "parse5@npm:^7.0.0, parse5@npm:^7.1.2": version: 7.2.1 resolution: "parse5@npm:7.2.1" @@ -9971,6 +10045,13 @@ __metadata: languageName: node linkType: hard +"property-information@npm:^7.0.0": + version: 7.0.0 + resolution: "property-information@npm:7.0.0" + checksum: c12fbaf841d9e7ea2215139ec53a7fe848b1a214d486623b64b7b56de3e4e601ec8211b0fb10dabda86de67ae06aaa328d9bdafe9c6b64e7f23d78f0dbf4bbfc + languageName: node + linkType: hard + "protobufjs@npm:^7.2.5, protobufjs@npm:^7.3.0": version: 7.4.0 resolution: "protobufjs@npm:7.4.0" @@ -10157,18 +10238,6 @@ __metadata: languageName: node linkType: hard -"refractor@npm:^4.8.0": - version: 4.8.1 - resolution: "refractor@npm:4.8.1" - dependencies: - "@types/hast": ^2.0.0 - "@types/prismjs": ^1.0.0 - hastscript: ^7.0.0 - parse-entities: ^4.0.0 - checksum: 51762ed1d62523e3fb4b1ccec3f846965d497b7828e43d1668b2839dcbbe6b0d4edfd9113ad6e3679e5a6b6fb2f6983883123d762a7e46e3b5a8cd480a0a1930 - languageName: node - linkType: hard - "regenerate-unicode-properties@npm:^10.2.0": version: 10.2.0 resolution: "regenerate-unicode-properties@npm:10.2.0" @@ -10201,6 +10270,31 @@ __metadata: languageName: node linkType: hard +"regex-recursion@npm:^6.0.2": + version: 6.0.2 + resolution: "regex-recursion@npm:6.0.2" + dependencies: + regex-utilities: ^2.3.0 + checksum: 29913751ee2e41d3d66c957136ba386046f5e9f780f4be482ad3b64b04258bbb2cebe87f8762c5247eb8c9fa46a5ecf18aba5d888f7def73ac8dea49165193d4 + languageName: node + linkType: hard + +"regex-utilities@npm:^2.3.0": + version: 2.3.0 + resolution: "regex-utilities@npm:2.3.0" + checksum: 41408777df45cefe1b276281030213235aa1143809c4c10eb5573d2cc27ff2c4aa746c6f4d4c235e3d2f4830eff76b28906ce82fbe72895beca8e15204c2da51 + languageName: node + linkType: hard + +"regex@npm:^6.0.1": + version: 6.0.1 + resolution: "regex@npm:6.0.1" + dependencies: + regex-utilities: ^2.3.0 + checksum: 80de1cd95cc760b609760de2e3831adc77166761315d53cad610f0fc545571403e4d8b3565db65df3a913d50eab59be2ab5b4635e52f363eab7991a76de0f7da + languageName: node + linkType: hard + "regexp.prototype.flags@npm:^1.5.3": version: 1.5.4 resolution: "regexp.prototype.flags@npm:1.5.4" @@ -10476,17 +10570,6 @@ __metadata: languageName: node linkType: hard -"rehype-parse@npm:^9.0.0": - version: 9.0.1 - resolution: "rehype-parse@npm:9.0.1" - dependencies: - "@types/hast": ^3.0.0 - hast-util-from-html: ^2.0.0 - unified: ^11.0.0 - checksum: 3175c8d352ca2c8bddb4749fa1bd21336cab27b06165f6db77678e944479ac4fdee729ced8956bf303ba8ff01a7e8d0666e8123980cfbce28a7b4527b2167717 - languageName: node - linkType: hard - "rehype-preset-minify@npm:7.0.0": version: 7.0.0 resolution: "rehype-preset-minify@npm:7.0.0" @@ -10519,20 +10602,6 @@ __metadata: languageName: node linkType: hard -"rehype-prism-plus@npm:^2.0.0": - version: 2.0.0 - resolution: "rehype-prism-plus@npm:2.0.0" - dependencies: - hast-util-to-string: ^3.0.0 - parse-numeric-range: ^1.3.0 - refractor: ^4.8.0 - rehype-parse: ^9.0.0 - unist-util-filter: ^5.0.0 - unist-util-visit: ^5.0.0 - checksum: c025f5b96d55431000cb4c688c9cbb174e6ed87c683d8499683f840d55e621b619365316b3d01f3c788086dd7a7abcdddca77f3054ba61c14ce6e73e31eb37e6 - languageName: node - linkType: hard - "rehype-recma@npm:^1.0.0": version: 1.0.0 resolution: "rehype-recma@npm:1.0.0" @@ -11137,6 +11206,22 @@ __metadata: languageName: node linkType: hard +"shiki@npm:3.3.0": + version: 3.3.0 + resolution: "shiki@npm:3.3.0" + dependencies: + "@shikijs/core": 3.3.0 + "@shikijs/engine-javascript": 3.3.0 + "@shikijs/engine-oniguruma": 3.3.0 + "@shikijs/langs": 3.3.0 + "@shikijs/themes": 3.3.0 + "@shikijs/types": 3.3.0 + "@shikijs/vscode-textmate": ^10.0.2 + "@types/hast": ^3.0.4 + checksum: 5af8f02244ceb0c160969efb1f1eeeb8e5797767d3d288083942455f724ed5dc638607b27bfcce10705c749cb4f635538f61df60ed2e9bd42d7318d735823092 + languageName: node + linkType: hard + "side-channel-list@npm:^1.0.0": version: 1.0.0 resolution: "side-channel-list@npm:1.0.0" @@ -11650,6 +11735,7 @@ __metadata: "@eslint/js": ^9.16.0 "@headlessui/react": 2.2.0 "@next/bundle-analyzer": 15.2.4 + "@shikijs/rehype": ^3.3.0 "@svgr/webpack": ^8.0.1 "@tailwindcss/forms": ^0.5.9 "@tailwindcss/postcss": ^4.0.5 @@ -11688,7 +11774,6 @@ __metadata: rehype-katex: ^7.0.0 rehype-katex-notranslate: ^1.1.4 rehype-preset-minify: 7.0.0 - rehype-prism-plus: ^2.0.0 rehype-slug: ^6.0.0 remark: ^15.0.0 remark-gfm: ^4.0.0 @@ -12037,17 +12122,6 @@ __metadata: languageName: node linkType: hard -"unist-util-filter@npm:^5.0.0": - version: 5.0.1 - resolution: "unist-util-filter@npm:5.0.1" - dependencies: - "@types/unist": ^3.0.0 - unist-util-is: ^6.0.0 - unist-util-visit-parents: ^6.0.0 - checksum: d9d1d9dfd89a91f15ced255aa8dc61cb7648273eb791e3d9e9385c05995fe24ccf1f2119c2f7e2c671c61f7275ffa93f13440e4adfad1d0e494e8507cb818981 - languageName: node - linkType: hard - "unist-util-find-after@npm:^5.0.0": version: 5.0.0 resolution: "unist-util-find-after@npm:5.0.0"