From 48fda8b1f5bad2b3a7a4fb82353993f3595dc8ca Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 24 Mar 2022 16:30:10 -0400 Subject: [PATCH 1/5] change: new Prism component import + install note --- src/pages/en/reference/builtin-components.md | 72 ++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/pages/en/reference/builtin-components.md diff --git a/src/pages/en/reference/builtin-components.md b/src/pages/en/reference/builtin-components.md new file mode 100644 index 0000000000000..cc86fd99ef6c4 --- /dev/null +++ b/src/pages/en/reference/builtin-components.md @@ -0,0 +1,72 @@ +--- +layout: ~/layouts/MainLayout.astro +title: Built-In Components +--- + +Astro includes several builtin components for you to use in your projects. All builtin components are available via `import {} from 'astro/components';`. + +## `` + +```astro +--- +import { Code } from 'astro/components'; +--- + + + + + + +``` + +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://github.com/shikijs/shiki/blob/main/docs/themes.md) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md). Plus, you can add your custom themes and languages by passing them to `theme` and `lang` respectively. + +You can also use the `` component for syntax highlighting powered by the [Prism](https://prismjs.com/) syntax highlighting library. This is the library that Astro’s Markdown uses by default. However, we will be transitioning all usage over to `` as we move towards our v1.0 release. + +## `` + +```astro +--- +import { Markdown } from 'astro/components'; +--- + + # Markdown syntax is now supported! **Yay!** + +``` + +See our [Markdown Guide](/en/guides/markdown-content) for more info. + + + +## `` + +```astro +--- +import Prism from '@astrojs/prism/component'; +--- + +``` + +> `@astrojs/prism` is built-in as part of the `astro` package. No need to install as a separate dependency just yet! Still, note that we do plan to extract `@astrojs/prism` to a separate package in the future. + +This component provides language-specific syntax highlighting for code blocks. Since this never changes in the client it makes sense to use an Astro component (it’s equally reasonable to use a framework component for this kind of thing; Astro is server-only by default for all frameworks!). + +See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with lang="astro"! + +## `` + +```astro +--- +import { Debug } from 'astro/components'; +const serverObject = { + a: 0, + b: "string", + c: { + nested: "object" + } +} +--- + +``` + +This component provides a way to inspect values on the clientside, without any JavaScript. From 4e2f7b8149f6401929fc87d7ff220e5bb3f54f53 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 24 Mar 2022 16:30:20 -0400 Subject: [PATCH 2/5] change: Prism component improt for es --- src/pages/es/reference/builtin-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/es/reference/builtin-components.md b/src/pages/es/reference/builtin-components.md index 356a7d5f99ee2..b1c2ffd522de3 100644 --- a/src/pages/es/reference/builtin-components.md +++ b/src/pages/es/reference/builtin-components.md @@ -42,7 +42,7 @@ Mira nuestra [Guía de Markdown](/es/guides/markdown-content) para más informac ```astro --- -import { Prism } from 'astro/components'; +import Prism from '@astrojs/prism/component'; --- ``` From c501b04c80a2c1050daa7103eb43a0cfad5d8777 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 24 Mar 2022 16:42:13 -0400 Subject: [PATCH 3/5] fix: move Prism component updates to api-ref page --- src/pages/en/reference/api-reference.md | 4 +- src/pages/en/reference/builtin-components.md | 72 -------------------- 2 files changed, 3 insertions(+), 73 deletions(-) delete mode 100644 src/pages/en/reference/builtin-components.md diff --git a/src/pages/en/reference/api-reference.md b/src/pages/en/reference/api-reference.md index 1c09968e5f953..dd1372a6f83f7 100644 --- a/src/pages/en/reference/api-reference.md +++ b/src/pages/en/reference/api-reference.md @@ -366,11 +366,13 @@ This component provides syntax highlighting for code blocks at build time (no cl ```astro --- -import { Prism } from 'astro/components'; +import Prism from '@astrojs/prism/component'; --- ``` +> **`@astrojs/prism`** is built-in as part of the `astro` package. No need to install as a separate dependency just yet! However, note that we do plan to extract `@astrojs/prism` to a separate, installable package in the future. + This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content#prism-configuration) for more details. See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`! diff --git a/src/pages/en/reference/builtin-components.md b/src/pages/en/reference/builtin-components.md deleted file mode 100644 index cc86fd99ef6c4..0000000000000 --- a/src/pages/en/reference/builtin-components.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: Built-In Components ---- - -Astro includes several builtin components for you to use in your projects. All builtin components are available via `import {} from 'astro/components';`. - -## `` - -```astro ---- -import { Code } from 'astro/components'; ---- - - - - - - -``` - -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://github.com/shikijs/shiki/blob/main/docs/themes.md) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md). Plus, you can add your custom themes and languages by passing them to `theme` and `lang` respectively. - -You can also use the `` component for syntax highlighting powered by the [Prism](https://prismjs.com/) syntax highlighting library. This is the library that Astro’s Markdown uses by default. However, we will be transitioning all usage over to `` as we move towards our v1.0 release. - -## `` - -```astro ---- -import { Markdown } from 'astro/components'; ---- - - # Markdown syntax is now supported! **Yay!** - -``` - -See our [Markdown Guide](/en/guides/markdown-content) for more info. - - - -## `` - -```astro ---- -import Prism from '@astrojs/prism/component'; ---- - -``` - -> `@astrojs/prism` is built-in as part of the `astro` package. No need to install as a separate dependency just yet! Still, note that we do plan to extract `@astrojs/prism` to a separate package in the future. - -This component provides language-specific syntax highlighting for code blocks. Since this never changes in the client it makes sense to use an Astro component (it’s equally reasonable to use a framework component for this kind of thing; Astro is server-only by default for all frameworks!). - -See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with lang="astro"! - -## `` - -```astro ---- -import { Debug } from 'astro/components'; -const serverObject = { - a: 0, - b: "string", - c: { - nested: "object" - } -} ---- - -``` - -This component provides a way to inspect values on the clientside, without any JavaScript. From cb1ab0db1b51a2384c857a5135dfac1186bc939c Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 24 Mar 2022 16:47:41 -0400 Subject: [PATCH 4/5] change: add Prism comp note to migration guide --- src/pages/en/migrate.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/pages/en/migrate.md b/src/pages/en/migrate.md index e894647778fd1..028406cd29498 100644 --- a/src/pages/en/migrate.md +++ b/src/pages/en/migrate.md @@ -80,6 +80,18 @@ We love to find sensible defaults that "just work" out-of-the-box. As part of th Check our new [syntax highlighting docs](/en/guides/markdown-content/#syntax-highlighting) for full details. **If you prefer to keep Prism as your syntax highlighter,** [set the `syntaxHighlight` option to `'prism'`](/en/guides/markdown-content/#prism-configuration) in your project's markdown configuration. +#### The `` component has a new home + +As part of our mission to keep Astro core as lean as possible, we've moved the built-in `Prism` component out of `astro/components` and into the `@astrojs/prism` package. You can now import this component from `@astrojs/prism/component` like so: + +```astro +--- +import Prism from '@astrojs/prism/component'; +--- +``` + +Since the `@astrojs/prism` package is still bundled with `astro` core, you won't need to install anything new! However, note that we _do_ plan to extract `@astrojs/prism` (and Prism syntax highlighting in general) to a separate, installable package in the future. See [the `` component API reference](/en/reference/api-reference#prism-) for more. + ### CSS Parser Upgrade Our internal CSS parser has been updated, and comes with better support for advanced CSS syntax, like container queries. This should be a mostly invisible change for most users, but hopefully for advanced users will enjoy the new CSS feature support. From 5d87ba51e333668e3992bd77092b949829ae3f0d Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Thu, 24 Mar 2022 17:46:08 -0400 Subject: [PATCH 5/5] change: Prism ain't an integration note Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- src/pages/en/migrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/migrate.md b/src/pages/en/migrate.md index 028406cd29498..e4a90ea850e6c 100644 --- a/src/pages/en/migrate.md +++ b/src/pages/en/migrate.md @@ -90,7 +90,7 @@ import Prism from '@astrojs/prism/component'; --- ``` -Since the `@astrojs/prism` package is still bundled with `astro` core, you won't need to install anything new! However, note that we _do_ plan to extract `@astrojs/prism` (and Prism syntax highlighting in general) to a separate, installable package in the future. See [the `` component API reference](/en/reference/api-reference#prism-) for more. +Since the `@astrojs/prism` package is still bundled with `astro` core, you won't need to install anything new, nor add Prism as an integration! However, note that we _do_ plan to extract `@astrojs/prism` (and Prism syntax highlighting in general) to a separate, installable package in the future. See [the `` component API reference](/en/reference/api-reference#prism-) for more. ### CSS Parser Upgrade