From d9d415b4558c7995319299e9c9e1520c87c3078e Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Sun, 12 Jan 2025 18:17:20 +0100 Subject: [PATCH] Fix outdated links to Expressive Code documentation (#2782) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .changeset/tender-tools-kick.md | 5 +++++ .../content/docs/guides/authoring-content.mdx | 20 +++++++++---------- docs/src/content/docs/guides/i18n.mdx | 2 +- .../content/docs/reference/configuration.mdx | 6 +++--- .../integrations/expressive-code/index.ts | 2 +- 5 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 .changeset/tender-tools-kick.md diff --git a/.changeset/tender-tools-kick.md b/.changeset/tender-tools-kick.md new file mode 100644 index 00000000000..645c0ac4c73 --- /dev/null +++ b/.changeset/tender-tools-kick.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes a documentation link in the JSDoc comment for the `StarlightExpressiveCodeOptions` type \ No newline at end of file diff --git a/docs/src/content/docs/guides/authoring-content.mdx b/docs/src/content/docs/guides/authoring-content.mdx index 68f37472eb3..f59d59fdb25 100644 --- a/docs/src/content/docs/guides/authoring-content.mdx +++ b/docs/src/content/docs/guides/authoring-content.mdx @@ -220,13 +220,13 @@ var fun = function lang(l) { ### Expressive Code features -Starlight uses [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) to extend formatting possibilities for code blocks. +Starlight uses [Expressive Code](https://expressive-code.com/) to extend formatting possibilities for code blocks. Expressive Code’s text markers and window frames plugins are enabled by default. Code block rendering can be configured using Starlight’s [`expressiveCode` configuration option](/reference/configuration/#expressivecode). #### Text markers -You can highlight specific lines or parts of your code blocks using [Expressive Code text markers](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) on the opening line of your code block. +You can highlight specific lines or parts of your code blocks using [Expressive Code text markers](https://expressive-code.com/key-features/text-markers/) on the opening line of your code block. Use curly braces (`{ }`) to highlight entire lines, and quotation marks to highlight strings of text. There are three highlighting styles: neutral for calling attention to code, green for indicating inserted code, and red for indicating deleted code. @@ -234,10 +234,10 @@ Both text and entire lines can be marked using the default marker, or in combina Expressive Code provides several options for customizing the visual appearance of your code samples. Many of these can be combined, for highly illustrative code samples. -Please explore the [Expressive Code documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md) for the extensive options available. +Please explore the [Expressive Code documentation](https://expressive-code.com/key-features/text-markers/#configuration) for the extensive options available. Some of the most common examples are shown below: -- [Mark entire lines & line ranges using the `{ }` marker](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges): +- [Mark entire lines & line ranges using the `{ }` marker](https://expressive-code.com/key-features/text-markers/#marking-full-lines--line-ranges): ```js {2-3} function demo() { @@ -255,7 +255,7 @@ Some of the most common examples are shown below: ``` ```` -- [Mark selections of text using the `" "` marker or regular expressions](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines): +- [Mark selections of text using the `" "` marker or regular expressions](https://expressive-code.com/key-features/text-markers/#marking-individual-text-inside-lines): ```js "Individual terms" /Even.*supported/ // Individual terms can be highlighted, too @@ -273,7 +273,7 @@ Some of the most common examples are shown below: ``` ```` -- [Mark text or lines as inserted or deleted with `ins` or `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del): +- [Mark text or lines as inserted or deleted with `ins` or `del`](https://expressive-code.com/key-features/text-markers/#selecting-inline-marker-types-mark-ins-del): ```js "return true;" ins="inserted" del="deleted" function demo() { @@ -293,7 +293,7 @@ Some of the most common examples are shown below: ``` ```` -- [Combine syntax highlighting with `diff`-like syntax](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax): +- [Combine syntax highlighting with `diff`-like syntax](https://expressive-code.com/key-features/text-markers/#combining-syntax-highlighting-with-diff-like-syntax): ```diff lang="js" function thisIsJavaScript() { @@ -323,7 +323,7 @@ Other languages display inside a code editor-style frame if they include a title A code block’s optional title can be set either with a `title="..."` attribute following the code block's opening backticks and language identifier, or with a file name comment in the first lines of the code. -- [Add a file name tab with a comment](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) +- [Add a file name tab with a comment](https://expressive-code.com/key-features/frames/#code-editor-frames) ```js // my-test-file.js @@ -337,7 +337,7 @@ A code block’s optional title can be set either with a `title="..."` attribute ``` ```` -- [Add a title to a Terminal window](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) +- [Add a title to a Terminal window](https://expressive-code.com/key-features/frames/#terminal-frames) ```bash title="Installing dependencies…" npm install @@ -349,7 +349,7 @@ A code block’s optional title can be set either with a `title="..."` attribute ``` ```` -- [Disable window frames with `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types) +- [Disable window frames with `frame="none"`](https://expressive-code.com/key-features/frames/#overriding-frame-types) ```bash frame="none" echo "This is not rendered as a terminal despite using the bash language" diff --git a/docs/src/content/docs/guides/i18n.mdx b/docs/src/content/docs/guides/i18n.mdx index 8533c53f97a..6014e568f4c 100644 --- a/docs/src/content/docs/guides/i18n.mdx +++ b/docs/src/content/docs/guides/i18n.mdx @@ -221,7 +221,7 @@ You can provide translations for additional languages you support — or overrid - Starlight’s code blocks are powered by the [Expressive Code](https://github.com/expressive-code/expressive-code) library. + Starlight’s code blocks are powered by the [Expressive Code](https://expressive-code.com/) library. You can set translations for its UI strings in the same JSON file using `expressiveCode` keys: ```json diff --git a/docs/src/content/docs/reference/configuration.mdx b/docs/src/content/docs/reference/configuration.mdx index fc26406c8a7..f4ceb57dfa6 100644 --- a/docs/src/content/docs/reference/configuration.mdx +++ b/docs/src/content/docs/reference/configuration.mdx @@ -384,10 +384,10 @@ starlight({ **type:** `StarlightExpressiveCodeOptions | boolean` **default:** `true` -Starlight uses [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) to render code blocks and add support for highlighting parts of code examples, adding filenames to code blocks, and more. +Starlight uses [Expressive Code](https://expressive-code.com) to render code blocks and add support for highlighting parts of code examples, adding filenames to code blocks, and more. See the [“Code blocks” guide](/guides/authoring-content/#code-blocks) to learn how to use Expressive Code syntax in your Markdown and MDX content. -You can use any of the standard [Expressive Code configuration options](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#configuration) as well as some Starlight-specific properties, by setting them in Starlight’s `expressiveCode` option. +You can use any of the standard [Expressive Code configuration options](https://expressive-code.com/reference/configuration/) as well as some Starlight-specific properties, by setting them in Starlight’s `expressiveCode` option. For example, set Expressive Code’s `styleOverrides` option to override the default CSS. This enables customizations like giving your code blocks rounded corners: ```js ins={2-4} @@ -414,7 +414,7 @@ In addition to the standard Expressive Code options, you can also set the follow **default:** `['starlight-dark', 'starlight-light']` Set the themes used to style code blocks. -See the [Expressive Code `themes` documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#themes) for details of the supported theme formats. +See the [Expressive Code `themes` documentation](https://expressive-code.com/guides/themes/) for details of the supported theme formats. Starlight uses the dark and light variants of Sarah Drasner’s [Night Owl theme](https://github.com/sdras/night-owl-vscode-theme) by default. diff --git a/packages/starlight/integrations/expressive-code/index.ts b/packages/starlight/integrations/expressive-code/index.ts index e0bb6eeb746..600daf46c2d 100644 --- a/packages/starlight/integrations/expressive-code/index.ts +++ b/packages/starlight/integrations/expressive-code/index.ts @@ -20,7 +20,7 @@ export type StarlightExpressiveCodeOptions = Omit