Add rehype-expressive-code, deprecate remark-expressive-code (#195)

* Add `rehype-expressive-code`, deprecate `remark-expressive-code`

* Actually commit all of the changed files

.changeset/real-shoes-worry.md

@@ -0,0 +1,14 @@
+---
+'remark-expressive-code': minor
+'astro-expressive-code': minor
+'expressive-code': minor
+'rehype-expressive-code': minor
+---
+
+Adds the new package `rehype-expressive-code` as the successor to `remark-expressive-code`, which is now considered deprecated.
+
+If you're using the Astro integration `astro-expressive-code`, you will be automatically using the new package and don't need to do anything.
+
+If your project has a dependency on `remark-expressive-code`, you should replace it with `rehype-expressive-code` and pass it as a rehype plugin instead of a remark plugin. See the [installation instructions](https://expressive-code.com/installation/#nextjs) for an example.
+
+The new package includes performance improvements and also works with the latest versions of MDX in popular site generators.

CONTRIBUTING.md

@@ -105,7 +105,7 @@ pnpm changeset
 
 When asked about the packages to be included in the changeset, please select the packages that you've changed. Regarding the type of change, please select `minor` for new or changed features and `patch` for bug fixes. Major releases will be handled by the maintainers.
 
-If you have made changes that should be visible to users of the high-level integration packages, please also add `expressive-code`, `remark-expressive-code` and `astro-expressive-code` to the changeset. This will ensure that the full description of your changes is included in these public-facing CHANGELOG.md files as well, instead of only appearing as a dependency update.
+If you have made changes that should be visible to users of the high-level integration packages, please also add `expressive-code`, `rehype-expressive-code` and `astro-expressive-code` to the changeset. This will ensure that the full description of your changes is included in these public-facing CHANGELOG.md files as well, instead of only appearing as a dependency update.
 
 ## Documentation
 

README.md

@@ -20,7 +20,7 @@ This is a monorepo that contains all packages related to Expressive Code. Click
 
 ### High-level integration packages
 
-- [remark-expressive-code](packages/remark-expressive-code/README.md) [![NPM version](https://img.shields.io/npm/v/remark-expressive-code.svg)](https://www.npmjs.com/package/remark-expressive-code) - A remark plugin that processes all code blocks in markdown and MDX files with Expressive Code.
+- [rehype-expressive-code](packages/rehype-expressive-code/README.md) [![NPM version](https://img.shields.io/npm/v/rehype-expressive-code.svg)](https://www.npmjs.com/package/rehype-expressive-code) - A rehype plugin that processes all code blocks in markdown and MDX files with Expressive Code.
 - [astro-expressive-code](packages/astro-expressive-code/README.md) [![NPM version](https://img.shields.io/npm/v/astro-expressive-code.svg)](https://www.npmjs.com/package/astro-expressive-code) - An Astro integration to automatically render code blocks in any markdown / MDX content on your site with Expressive Code. It also provides a `<Code>` component to render dynamic code blocks.
 
 ### Default plugins

docs/scripts/api-reference.ts

@@ -11,7 +11,7 @@ const packages = [
 	'@expressive-code/plugin-text-markers',
 	'@expressive-code/plugin-collapsible-sections',
 	'expressive-code',
-	'remark-expressive-code',
+	'rehype-expressive-code',
 	'astro-expressive-code',
 ]
 

docs/scripts/typedoc/templates/reference/configuration.mdx

@@ -328,9 +328,9 @@ The Text Markers plugin allows to highlight lines and inline ranges in code bloc
 
 This plugin is enabled by default. Set this to `false` to disable it.
 
-## Options of `remark-expressive-code`
+## Options of `rehype-expressive-code`
 
-In addition to the options above, the remark integration also supports the following options:
+In addition to the options above, the rehype integration also supports the following options:
 
 ### customCreateBlock
 
@@ -354,7 +354,7 @@ The function is expected to return an `ExpressiveCodeBlock` instance or a promis
 ### customCreateRenderer
 
 <PropertySignature>
-- Type: (options) => Promise\<RemarkExpressiveCodeRenderer\> \| RemarkExpressiveCodeRenderer
+- Type: (options) => Promise\<RehypeExpressiveCodeRenderer\> \| RehypeExpressiveCodeRenderer
 - Default: `undefined`
 </PropertySignature>
 
@@ -364,7 +364,7 @@ The return value will be cached and used for all code blocks in the document.
 
 #### Parameters
 
-- **options**: `RemarkExpressiveCodeOptions`
+- **options**: `RehypeExpressiveCodeOptions`
 
 ### getBlockLocale
 
@@ -401,7 +401,7 @@ If you want to preserve tabs in your code blocks, set this option to 0.
 ### themes
 
 <PropertySignature>
-- Type: [ThemeObjectOrShikiThemeName](/api/remark-expressive-code/type-aliases/themeobjectorshikithemename/)[]
+- Type: [ThemeObjectOrShikiThemeName](/api/rehype-expressive-code/type-aliases/themeobjectorshikithemename/)[]
 - Default: `['github-dark', 'github-light']`
 </PropertySignature>
 

docs/scripts/typedoc/templates/reference/plugin-hooks.mdx

@@ -109,7 +109,7 @@ Allows editing the AST of the entire code block after all annotations were rende
 
 Allows editing the ASTs of all code blocks that were rendered as part of the same group, as well as the AST of the group root element that contains all group blocks.
 
-Groups are defined by the calling code. For example, a Remark plugin using Expressive Code to render code blocks could provide authors with a way to group related code blocks together.
+Groups are defined by the calling code. For example, a rehype plugin using Expressive Code to render code blocks could provide authors with a way to group related code blocks together.
 
 This hook is used by the frames plugin to display multiple code blocks as editor file tabs.
 

docs/src/components/ConfigVariants.astro

@@ -93,11 +93,11 @@ if (!ecConfigFile) {
 		title: 'next.config.mjs',
 		code: `
 			import createMDX from '@next/mdx'
-			import remarkExpressiveCode[NAMED_IMPORTS] from 'remark-expressive-code'
+			import rehypeExpressiveCode[NAMED_IMPORTS] from 'rehype-expressive-code'
 			[IMPORTS]
 
-			/** @type {import('remark-expressive-code').RemarkExpressiveCodeOptions} */
-			const remarkExpressiveCodeOptions = {
+			/** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
+			const rehypeExpressiveCodeOptions = {
 			[SETTINGS]
 			}
 
@@ -110,12 +110,12 @@ if (!ecConfigFile) {
 			const withMDX = createMDX({
 				extension: /\\.mdx?$/,
 				options: {
-				remarkPlugins: [
-					// The nested array structure is required to pass options
-					// to a remark plugin
-					[remarkExpressiveCode, remarkExpressiveCodeOptions],
-				],
-				rehypePlugins: [],
+					remarkPlugins: [],
+					rehypePlugins: [
+						// The nested array structure is required to pass options
+						// to a rehype plugin
+						[rehypeExpressiveCode, rehypeExpressiveCodeOptions],
+					],
 				},
 			})
 

docs/src/content/docs/index.mdx

@@ -20,7 +20,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components'
 		Full VS Code theme support, accurate syntax highlighting, editor & terminal frames, copy to clipboard, text markers, collapsible sections, and more.
 	</Card>
 	<Card title="Framework-agnostic" icon="star">
-		Zero dependencies on React, Vue, or any other front-end framework. Works with popular site generators like Astro and Next.js, as well as plain remark and MDX.
+		Zero dependencies on React, Vue, or any other front-end framework. Works with popular site generators like Astro and Next.js, as well as plain markdown and MDX.
 	</Card>
 	<Card title="Plugin-based" icon="puzzle">
 		Built from the ground up to be extensible. Ships with a set of default plugins for all key features, and provides a powerful API for creating your own.

docs/src/content/docs/installation.mdx

@@ -4,7 +4,7 @@ title: Installing Expressive Code
 
 import PackageManagers from '@components/PackageManagers.astro'
 
-Expressive Code provides integrations into many different frameworks, including Astro, Starlight, Next.js, and any framework that supports remark plugins.
+Expressive Code provides integrations into many different frameworks, including Astro, Starlight, Next.js, and any framework that supports rehype plugins.
 
 Please select your framework to jump to the respective installation instructions:
 
@@ -34,23 +34,23 @@ Expressive Code is already included in Starlight. You're done! 🎉
 
 ## Next.js
 
-You can add Expressive Code to your Next.js site by installing our framework integration `remark-expressive-code`. Follow these steps:
+You can add Expressive Code to your Next.js site by installing our framework integration `rehype-expressive-code`. Follow these steps:
 
 1. Change into the directory of your Next.js site.
 
-2. Add the integration package `remark-expressive-code` to your site's dependencies:
+2. Add the integration package `rehype-expressive-code` to your site's dependencies:
 
-    <PackageManagers pkg="remark-expressive-code" />
+    <PackageManagers pkg="rehype-expressive-code" />
 
 3. Add the integration to your site's configuration:
 
     ```js ins={3, 5-8, 19-23}
     // next.config.mjs
     import createMDX from '@next/mdx'
-    import remarkExpressiveCode from 'remark-expressive-code'
+    import rehypeExpressiveCode from 'rehype-expressive-code'
 
-    /** @type {import('remark-expressive-code').RemarkExpressiveCodeOptions} */
-    const remarkExpressiveCodeOptions = {
+    /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
+    const rehypeExpressiveCodeOptions = {
       // You can add configuration options here
     }
 
@@ -63,12 +63,12 @@ You can add Expressive Code to your Next.js site by installing our framework int
     const withMDX = createMDX({
       extension: /\.mdx?$/,
       options: {
-        remarkPlugins: [
+        remarkPlugins: [],
+        rehypePlugins: [
           // The nested array structure is required to pass options
-          // to a remark plugin
-          [remarkExpressiveCode, remarkExpressiveCodeOptions],
+          // to a rehype plugin
+          [rehypeExpressiveCode, rehypeExpressiveCodeOptions],
         ],
-        rehypePlugins: [],
       },
     })
 

docs/src/content/docs/reference/configuration.mdx

@@ -332,9 +332,9 @@ The Text Markers plugin allows to highlight lines and inline ranges in code bloc
 
 This plugin is enabled by default. Set this to `false` to disable it.
 
-## Options of `remark-expressive-code`
+## Options of `rehype-expressive-code`
 
-In addition to the options above, the remark integration also supports the following options:
+In addition to the options above, the rehype integration also supports the following options:
 
 ### customCreateBlock
 
@@ -358,7 +358,7 @@ The function is expected to return an `ExpressiveCodeBlock` instance or a promis
 ### customCreateRenderer
 
 <PropertySignature>
-- Type: (options) => Promise\<RemarkExpressiveCodeRenderer\> \| RemarkExpressiveCodeRenderer
+- Type: (options) => Promise\<RehypeExpressiveCodeRenderer\> \| RehypeExpressiveCodeRenderer
 - Default: `undefined`
 </PropertySignature>
 
@@ -368,7 +368,7 @@ The return value will be cached and used for all code blocks in the document.
 
 #### Parameters
 
-- **options**: `RemarkExpressiveCodeOptions`
+- **options**: `RehypeExpressiveCodeOptions`
 
 ### getBlockLocale
 

docs/src/content/docs/reference/core-api.mdx

@@ -283,7 +283,7 @@ Setting this property may throw an error if not allowed in the current [state](/
 
 Allows getting the code block's locale (e.g. `en-US` or `de-DE`). It is used by plugins to display localized strings depending on the language of the containing page.
 
-Integrations like `remark-expressive-code` support multi-language sites by allowing you to provide custom logic to determine a block's locale (e.g. based on its parent document).
+Integrations like `rehype-expressive-code` support multi-language sites by allowing you to provide custom logic to determine a block's locale (e.g. based on its parent document).
 
 If no locale is defined here, `ExpressiveCodeEngine` will render the code block using the `defaultLocale` provided in its configuration.
 
@@ -315,7 +315,7 @@ Provides read-only access to the parsed version of the block's [meta](/reference
 
 Provides read-only access to optional data about the parent document the code block is located in.
 
-Integrations like `remark-expressive-code` can provide this information based on the source document being processed. There may be cases where no document is available, e.g. when the code block was created dynamically.
+Integrations like `rehype-expressive-code` can provide this information based on the source document being processed. There may be cases where no document is available, e.g. when the code block was created dynamically.
 
 ##### props
 
@@ -384,7 +384,7 @@ An optional meta string. In markdown or MDX documents, this is the part of the c
 
 Optional data about the parent document the code block is located in.
 
-Integrations like `remark-expressive-code` can provide this information based on the source document being processed. There may be cases where no document is available, e.g. when the code block was created dynamically.
+Integrations like `rehype-expressive-code` can provide this information based on the source document being processed. There may be cases where no document is available, e.g. when the code block was created dynamically.
 
 ###### Object properties
 
@@ -396,7 +396,7 @@ Integrations like `remark-expressive-code` can provide this information based on
 </PropertySignature>
 A reference to the object representing the parsed source document. This reference will stay the same for all code blocks in the same document.
 
-For example, if you are using `remark-expressive-code` to render code blocks in a Markdown file, this would be the `mdast` node representing the file's root node.
+For example, if you are using `rehype-expressive-code` to render code blocks in a Markdown file, this would be the `hast` node representing the file's root node.
 </dd>
 <dt>positionInDocument</dt>
 <dd>

docs/src/content/docs/reference/plugin-hooks.mdx

@@ -113,7 +113,7 @@ Allows editing the AST of the entire code block after all annotations were rende
 
 Allows editing the ASTs of all code blocks that were rendered as part of the same group, as well as the AST of the group root element that contains all group blocks.
 
-Groups are defined by the calling code. For example, a Remark plugin using Expressive Code to render code blocks could provide authors with a way to group related code blocks together.
+Groups are defined by the calling code. For example, a rehype plugin using Expressive Code to render code blocks could provide authors with a way to group related code blocks together.
 
 This hook is used by the frames plugin to display multiple code blocks as editor file tabs.
 

docs/src/content/docs/releases.md

@@ -7,6 +7,16 @@ This page combines all release notes of the Expressive Code monorepo.
 You can find the source changelogs on GitHub in the subfolders of
 [`packages`](https://github.com/expressive-code/expressive-code/tree/main/packages).
 
+## 0.34.2
+
+- Updates dependencies to the latest versions. Thank you [@bluwy](https://github.com/bluwy)!
+
+## 0.34.1
+
+- Fixes a11y property `tabindex="0"` being set on non-scrollable code blocks.
+
+  Instead of always adding `tabindex="0"` to the `<pre>` element of code blocks, a small JS module is now used to conditionally add the property to scrollable code blocks only. This ensures that scrollable regions can be accessed via keyboard navigation while avoiding audit warnings about `tabindex` being used on non-scrollable elements.
+
 ## 0.34.0
 
 - Merges JS modules into a single JS file asset to reduce the number of requests if multiple plugins add JS code.

docs/src/content/docs/upgrading.mdx

@@ -86,9 +86,9 @@ To upgrade your Next.js site to the latest version of Expressive Code, follow th
 
 1. Change into the directory of your Next.js site.
 
-2. Install the latest version of `remark-expressive-code`:
+2. Install the latest version of `rehype-expressive-code`:
 
-    <PackageManagers pkg="remark-expressive-code@latest" />
+    <PackageManagers pkg="rehype-expressive-code@latest" />
 
 3. Check our [release history](/releases/) for breaking changes that might affect your site, and apply any necessary changes.