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(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: ( + + + + ), + checked: ( + + + + ), + } + + return ( +
+ 
+        {children}
+
+ + +
+ ) +} + +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"