feat: switch line numbers to a transformer

rehype-pretty · Sep 2, 2024 · ef66b41 · ef66b41
1 parent 003f49d
commit ef66b41
Show file tree

Hide file tree

Showing 29 changed files with 3,228 additions and 1,717 deletions.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -1,4 +1,4 @@
-name: Checks
+name: 'Checks'
 on:
   pull_request:
   workflow_dispatch:
@@ -15,7 +15,6 @@ env:
   NEXT_TELEMETRY_DISABLED: '1'
   ASTRO_TELEMETRY_DISABLED: '1'
   NODE_OPTIONS: '--no-warnings'
-  FORCE_COLOR: 1
 
 jobs:
   checks:

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -1,4 +1,11 @@
-name: Preview
+name: 'Preview'
+
+# pkg.pr.new won't publish anything to NPM; instead, 
+# it leverages its own URLs, which are npm-compatible.
+
+# npm install https://pkg.pr.new/${owner}/${repo}/${package}@${commit}
+
+# learn more: https://github.com/stackblitz-labs/pkg.pr.new/blob/main/README.md
 
 on:
   push:

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,4 +1,4 @@
-name: Release
+name: 'Release'
 
 on:
   push:
@@ -18,7 +18,6 @@ env:
   NEXT_TELEMETRY_DISABLED: '1'
   ASTRO_TELEMETRY_DISABLED: '1'
   NODE_OPTIONS: '--no-warnings'
-  FORCE_COLOR: 1
 
 jobs:
   release:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -43,6 +43,9 @@
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
   },
+  "[css]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
   "files.associations": {
     "biome.json": "jsonc",
     "*.css": "tailwindcss",
@@ -58,7 +61,12 @@
   },
   "files.exclude": {
     ".zed": true,
-    ".turbo": true,
+    ".gitignore": true,
+    "**/LICENSE": true,
+    "**/dist/**": true,
+    "**/.turbo/**": true,
+    "**/.astro/**": true,
+    "pnpm-lock.yaml": true,
     "**/*.timestamp-*": true
   },
   "[markdown]": {

diff --git a/biome.jsonc b/biome.jsonc
@@ -47,6 +47,7 @@
       "enabled": true
     },
     "parser": {
+      "cssModules": true,
       "allowWrongLineComments": true
     }
   },
@@ -187,7 +188,8 @@
       "linter": {
         "rules": {
           "correctness": {
-            "noUnusedImports": "off"
+            "noUnusedImports": "off",
+            "noUnusedVariables": "off"
           },
           "style": {
             "useImportType": "off",

diff --git a/docs/astro.config.ts b/docs/astro.config.ts
@@ -8,63 +8,67 @@ import {
   transformerMetaHighlight,
   transformerRenderWhitespace,
   transformerNotationHighlight,
-  transformerMetaWordHighlight,
-  transformerNotationErrorLevel,
   transformerCompactLineOptions,
+  transformerNotationErrorLevel,
   transformerNotationWordHighlight,
 } from '@shikijs/transformers';
+import {
+  transformerCopyButton,
+  transformerLineNumbers,
+} from '@rehype-pretty/transformers';
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
-import type { RawTheme } from 'shiki';
 import tailwind from '@astrojs/tailwind';
+import type { RawTheme } from 'shiki/core';
 import starlight from '@astrojs/starlight';
 import { defineConfig } from 'astro/config';
 import remarkSmartypants from 'remark-smartypants';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import { transformerCopyButton } from '@rehype-pretty/transformers';
 import { transformerTwoslash, rendererRich } from '@shikijs/twoslash';
 import moonlightTheme from './public/theme/moonlight-ii.json' with {
   type: 'json',
 };
 
 // https://astro.build/config
 export default defineConfig({
+  output: 'static',
+  compressHTML: true,
   markdown: {
+    gfm: true,
     syntaxHighlight: false,
-    shikiConfig: {
-      transformers: [
-        transformerTwoslash({ renderer: rendererRich() }),
-        transformerNotationDiff(),
-        transformerNotationFocus(),
-        transformerMetaHighlight(),
-        transformerRenderWhitespace(),
-        transformerNotationHighlight(),
-        transformerMetaWordHighlight(),
-        transformerNotationErrorLevel(),
-        transformerCompactLineOptions(),
-        transformerNotationWordHighlight(),
-      ],
-    },
     remarkPlugins: [
       // @ts-expect-error
       remarkSmartypants,
       [remarkToc, { heading: 'contents', prefix: 'toc-' }],
     ],
     rehypePlugins: [
-      rehypeHeadingIds,
       rehypeSlug,
+      rehypeHeadingIds,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
       [
         rehypePrettyCode,
         {
           keepBackground: true,
           theme: moonlightTheme as unknown as RawTheme,
           transformers: [
+            transformerTwoslash({
+              explicitTrigger: true,
+              renderer: rendererRich(),
+            }),
             transformerCopyButton({
               visibility: 'always',
               feedbackDuration: 2_500,
             }),
+            transformerLineNumbers({ autoApply: true }),
+            transformerNotationDiff(),
+            transformerNotationFocus(),
+            transformerMetaHighlight(),
+            transformerRenderWhitespace(),
+            transformerNotationHighlight(),
+            transformerCompactLineOptions(),
+            transformerNotationErrorLevel(),
+            transformerNotationWordHighlight(),
           ],
         } satisfies RehypePrettyCodeOptions,
       ],
@@ -83,7 +87,7 @@ export default defineConfig({
       customCss: [
         './src/styles/index.css',
         './src/styles/tailwind.css',
-        '@shikijs/twoslash/style-rich.css',
+        './node_modules/@shikijs/twoslash/style-rich.css',
       ],
       plugins: [],
       head: [

diff --git a/docs/package.json b/docs/package.json
@@ -10,28 +10,31 @@
     "preview": "astro preview",
     "astro": "astro"
   },
+  "imports": {
+    "#*": "./src/*"
+  },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/starlight": "^0.25.1",
+    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/starlight": "^0.26.1",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@rehype-pretty/transformers": "workspace:*",
-    "astro": "^4.12.2",
+    "astro": "^4.15.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-pretty-code": "workspace:*",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-toc": "^9.0.0",
-    "sharp": "^0.33.4",
-    "shiki": "^1.11.0",
-    "tailwindcss": "^3.4.6"
+    "sharp": "^0.33.5",
+    "shiki": "^1.16.1",
+    "tailwindcss": "^3.4.10"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.8.2",
-    "@shikijs/transformers": "^1.11.0",
-    "@shikijs/twoslash": "^1.11.0",
-    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/node": "^20.14.11",
-    "typescript": "^5.5.3"
+    "@astrojs/check": "^0.9.3",
+    "@shikijs/transformers": "^1.16.1",
+    "@shikijs/twoslash": "^1.16.1",
+    "@total-typescript/ts-reset": "^0.6.0",
+    "@types/node": "^22.5.2",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/docs/src/components/package-manager.astro b/docs/src/components/package-manager.astro
@@ -0,0 +1,41 @@
+---
+import { Code } from 'astro/components';
+import type { ComponentProps } from 'astro/types';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import type { NoRepetition } from '../lib/utilities/types.ts';
+
+type TabItemProps = ComponentProps<typeof TabItem>;
+
+interface Props {
+  packageManagers: NoRepetition<'pnpm' | 'bun' | 'npm' | 'yarn' | 'ni' | 'jsr'>;
+}
+
+const packageManagers = Astro.props.packageManagers ?? [
+  'pnpm',
+  'bun',
+  'npm',
+  'yarn',
+  'jsr',
+];
+const iconMap: Record<string, TabItemProps['icon'] | undefined> = {
+  bun: 'bun',
+  pnpm: 'pnpm',
+  npm: 'seti:npm',
+  yarn: 'seti:yarn',
+  ni: 'seti:shell',
+  jsr: 'seti:shell',
+};
+---
+
+<Tabs syncKey="pkg">
+  {
+    // @ts-expect-error
+    packageManagers.map(pkgManager => (
+      <TabItem label={pkgManager} icon={iconMap[pkgManager]}>
+        <Code lang="sh" code={`${pkgManager} add @rehype-pretty/transformers`} />
+      </TabItem>
+    ))
+  }
+</Tabs>
+
+<style></style>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -18,7 +18,7 @@ of its themes ecosystem - use any VSCode theme you want!
 
 Draw attention to a particular line of code.
 
-```ts {4} showLineNumbers
+```js {4} showLineNumbers
 import { useFloating } from "@floating-ui/react";
 
 function MyComponent() {
@@ -37,7 +37,7 @@ function MyComponent() {
 
 Draw attention to a particular word or series of characters.
 
-```ts /floatingStyles/
+```js /floatingStyles/
 import { useFloating } from "@floating-ui/react";
 
 function MyComponent() {
@@ -60,7 +60,7 @@ The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.
 
 For instance, if you had the following code block:
 
-```js
+```ts
 function getStringLength(str) {
   return str.length;
 }
@@ -150,7 +150,7 @@ async function main() {
       // See Options section below.
     })
     .use(rehypeStringify)
-    .process("`const numbers = [1, 2, 3]{:js}`");
+    .process(`\`\`\`js\nconsole.log('Hello, World!')\n\`\`\``)
 
   console.log(String(file));
 }
@@ -241,7 +241,7 @@ entire width of a horizontally-scrollable code block.
 
 You can disable this setting if necessary:
 
-```js
+```ts
 const options = {
   grid: false,
 };
@@ -261,7 +261,7 @@ const options = {
 
 You can use your own theme as well by passing the theme JSON:
 
-```js
+```ts
 const options = {
   theme: JSON.parse(fs.readFileSync("./themes/moonlight-ii.json", "utf-8")),
 };
@@ -272,7 +272,7 @@ const options = {
 To apply a custom background instead of inheriting the background from the
 theme:
 
-```js
+```ts
 const options = {
   keepBackground: false,
 };
@@ -282,7 +282,7 @@ const options = {
 
 Skip inline code highlighting:
 
-```js
+```ts
 const options = {
   bypassInlineCode: true,
 };
@@ -295,7 +295,7 @@ themed (nor will the background), which may appear incongruous with others.
 
 In this case, you can specify a default language:
 
-```js
+```ts
 const options = {
   defaultLang: "plaintext",
 };
@@ -338,7 +338,7 @@ Code blocks are configured via the meta string on the top codeblock fence.
 > with `rehype-pretty-code`. This option allows you to filter out some part of
 > the meta string before the library starts parsing it.
 >
-> ```js
+> ```ts
 > const options = {
 >   filterMetaString: (string) => string.replace(/filename="[^"]*"/, ""),
 > };
@@ -559,7 +559,7 @@ const options = {
 };
 ```
 
-Now, use the following CSS to display the variable colors Ă˘âŹâ if a space is found
+Now, use the following CSS to display the variable colors — if a space is found
 in the theme name, then CSS variable keys based on the object are available
 ([more info](https://shiki.style/guide/dual-themes#light-dark-dual-themes)):
 
@@ -591,7 +591,7 @@ The `<code>{:html}` and `<pre>{:html}` elements will have the data attribute
 To customize the HTML output, you can use visitor callback hooks to manipulate
 the [hAST elements](https://github.com/syntax-tree/hast#element) directly:
 
-```js
+```ts
 const options = {
   onVisitLine(element) {
     console.log("Visited line");
@@ -617,7 +617,7 @@ To completely configure the highlighter, use the
 `getHighlighter{:.entity.name.function}` option. This is helpful if you'd like
 to configure other Shiki options, such as `langs{:.meta.object-literal.key}`.
 
-```js
+```ts
 import { getHighlighter } from "shiki";
 
 const options = {
@@ -636,7 +636,7 @@ const options = {
 
 The [usage](#usage) works directly in React Server Components. Here's an example:
 
-```tsx title="code.tsx"
+```jsx title="code.tsx"
 import * as React from "react";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
@@ -671,7 +671,7 @@ async function highlightCode(code: string) {
 
 Then, import the RSC into a page or another component:
 
-```tsx src/app/rsc/page.tsx
+```jsx src/app/rsc/page.tsx
 import * as React from "react";
 import { Code } from "./code.tsx";