Skip to content

Commit

Permalink
Fix outdated links to Expressive Code documentation (#2782)
Browse files Browse the repository at this point in the history
Co-authored-by: HiDeoo <[email protected]>
  • Loading branch information
delucis and HiDeoo authored Jan 12, 2025
1 parent 23bf960 commit d9d415b
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 15 deletions.
5 changes: 5 additions & 0 deletions .changeset/tender-tools-kick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/starlight': patch
---

Fixes a documentation link in the JSDoc comment for the `StarlightExpressiveCodeOptions` type
20 changes: 10 additions & 10 deletions docs/src/content/docs/guides/authoring-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -220,24 +220,24 @@ 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.
Both text and entire lines can be marked using the default marker, or in combination with `ins=` and `del=` to produce the desired highlighting.

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() {
Expand All @@ -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
Expand All @@ -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() {
Expand All @@ -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() {
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/guides/i18n.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ You can provide translations for additional languages you support — or overrid

<UIStringsList />

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
Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/reference/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/integrations/expressive-code/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export type StarlightExpressiveCodeOptions = Omit<AstroExpressiveCodeOptions, 't
/**
* 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)
* 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
Expand Down

0 comments on commit d9d415b

Please sign in to comment.