4.11.0 Minor release docs (#8573)

Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Reuben Tier <[email protected]> Co-authored-by: Emanuele Stoppa <[email protected]> Co-authored-by: Matthew Phillips <[email protected]> Co-authored-by: Florian Lefebvre <[email protected]>
withastro · Jun 20, 2024 · a25c14e · a25c14e
1 parent 6125b43
commit a25c14e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/src/content/docs/en/basics/astro-pages.mdx b/src/content/docs/en/basics/astro-pages.mdx
@@ -110,6 +110,28 @@ If an error occurs rendering this page, your host's default 500 error page will
 
 During development, if you have a `500.astro`, the error thrown at runtime is logged in your terminal, as opposed to being shown in the error overlay.
 
+### `error`
+
+<p><Since v="4.11.0" /></p>
+
+`src/pages/500.astro` is a special page that is automatically passed an `error` prop for any error thrown during rendering. This allows you to use the details of an error (e.g. from a page, from middleware, etc.) to display information to your visitor.
+
+The error prop's data type can be anything, which may affect how you type or use the value in your code:
+
+```astro title="src/pages/500.astro"
+---
+interface Props {
+ error: unknown
+}
+
+const { error } = Astro.props
+---
+
+<div>{error instanceof Error ? error.message : 'Unknown error'}</div>
+```
+
+To avoid leaking sensitive information when displaying content from the `error` prop, consider evaluating the error first, and returning appropriate content based on the error thrown. For example, you should avoid displaying the error's stack as it contains information about how your code is structured on the server
+
 ## Page Partials
 
 <p><Since v="3.4.0" /></p>

diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
@@ -1701,7 +1701,36 @@ import { Code } from 'astro:components';
 </p>
 ```
 
-This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes and languages by passing them to `theme` and `lang` respectively.
+This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, and [transformers](#transformers) by passing them to the `theme`, `lang`, and `transformers` attributes respectively.
+
+#### Transformers
+
+<p><Since v="4.11.0" /></p>
+
+[Shiki transformers](https://shiki.style/packages/transformers#shikijs-transformers) can optionally be applied to code by passing them in through the `transformers` property as an array:
+
+Note that `transformers` only applies classes and you must provide your own CSS rules to target the elements of your code block.
+
+```astro
+---
+import { transformerNotationFocus } from '@shikijs/transformers'
+import { Code } from 'astro:components'
+const code = `const foo = 'hello'
+const bar = ' world'
+console.log(foo + bar) // [!code focus]
+`
+---
+<Code
+ code={code}
+ lang="js"
+ transformers={[transformerNotationFocus()]} />
+ 
+ <style is:global>
+ pre.has-focused .line:not(.focused) {
+ filter: blur(1px);
+ }
+ </style>
+```
 
 ### `<Fragment />`