Astro v4.11リリース！コードブロックや500エラーページの改善など
オープンソースの静的サイトジェネレーター「Astro」のバージョン4.11がリリースされました。このリリースでは、500エラーページの改善や、<Code />コンポーネントにおけるShikiトランスフォーマーの扱いの改善などが含まれています。
この記事では、Astro 4.11のアップデート内容について詳しく解説します。
Astro 4.11の主な更新内容
500エラーページの改善
src/pages/500.astroは、Astroで500エラーページをカスタマイズするためのファイルです。
このファイルにおいて、errorプロパティを通して、エラーについての詳細なコンテキスト情報を取得できるようになりました。これにより、エラーページにエラーの詳細を表示するといったことが可能になりました。
---interface Props { error: unknown}const { error } = Astro.props---
<html lang="en"><head> <title>Server error - Custom 500</title></head><body> <h1>Server error</h1> <p>{error instanceof Error ? error.message : 'Unknown error'}</p></body></html><Code />コンポーネントのShikiトランスフォーマー
Astroには<Code />コンポーネントが標準で用意されており、コードブロックのレンダリングに利用できます。
このリリースでは、<Code />コンポーネントにtransformersプロパティが追加され、Shikiトランスフォーマーを利用できるようになりました。このプロパティを使うことで、コードブロックのシンタックスハイライトの処理をカスタマイズできます。
---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} lang="js" transformers={[transformerNotationFocus()]} /><style is:global> pre.has-focused .line:not(.focused) { filter: blur(1px); }</style>Astro 4.11へのアップデート方法
既存のプロジェクトをAstro v4.11にアップデートするには、@astrojs/upgradeを使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。
npx @astrojs/upgradenpm install astro@latestpnpm upgrade astro --latestyarn upgrade astro --latestまとめ
Astro 4.11では、500エラーページの改善や<Code />コンポーネントのShikiトランスフォーマーの追加などの機能が追加されました。これにより、Astroを使った開発がより便利になり、より高度なカスタマイズが可能になります。
参考
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
おすすめ記事
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。
