Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next docs: New home for <Prism /> component #256

Merged
merged 5 commits into from
Mar 24, 2022
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/pages/en/migrate.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Prism />` 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 `<Prism />` component API reference](/en/reference/api-reference#prism-) for more.
bholmesdev marked this conversation as resolved.
Show resolved Hide resolved

### 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.
Expand Down
4 changes: 3 additions & 1 deletion src/pages/en/reference/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
---
<Prism lang="js" code={`const foo = 'bar';`} />
```

> **`@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"`!
Expand Down
2 changes: 1 addition & 1 deletion src/pages/es/reference/builtin-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
---
<Prism lang="js" code={`const foo = 'bar';`} />
```
Expand Down