diff options
author | 2022-01-03 13:59:34 -0600 | |
---|---|---|
committer | 2022-01-03 11:59:34 -0800 | |
commit | f26eb7b74558a06ed96e7c94fd9844eaf2508fb4 (patch) | |
tree | 750ea3ba771df1669aa50782b7882ed6bee0132b /docs/src/pages/en/reference/builtin-components.md | |
parent | f9b813aa86a199c8c00a4e1fe306ff6db24f1b31 (diff) | |
download | astro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.tar.gz astro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.tar.zst astro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.zip |
Docs/move-english-docs-to-"en"-folder (#2268)
* Move english pages under `/en` and fix broken links hopefully
* Add meta refresh tags for `/` to `/en/` url moves + make `/index.astro` work without js
* update languageselect for new en format
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Diffstat (limited to 'docs/src/pages/en/reference/builtin-components.md')
-rw-r--r-- | docs/src/pages/en/reference/builtin-components.md | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/docs/src/pages/en/reference/builtin-components.md b/docs/src/pages/en/reference/builtin-components.md new file mode 100644 index 000000000..b2d8c4295 --- /dev/null +++ b/docs/src/pages/en/reference/builtin-components.md @@ -0,0 +1,70 @@ +--- +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';`. + +## `<Code />` + +```astro +--- +import { Code } from 'astro/components'; +--- +<!-- Syntax highlight some JavaScript code. --> +<Code code={`const foo = 'bar';`} lang="js" /> +<!-- Optional: customize your theme. --> +<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" /> +<!-- Optional: Enable word wrapping. --> +<Code code={`const foo = 'bar';`} lang="js" wrap /> +``` + +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). + +You can also use the `<Prism />` 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 `<Code>` as we move towards our v1.0 release. + +## `<Markdown />` + +```astro +--- +import { Markdown } from 'astro/components'; +--- +<Markdown> + # Markdown syntax is now supported! **Yay!** +</Markdown> +``` + +See our [Markdown Guide](/en/guides/markdown-content) for more info. + +<!-- TODO: We should move some of the specific component info here. --> + +## `<Prism />` + +```astro +--- +import { Prism } from 'astro/components'; +--- +<Prism lang="js" code={`const foo = 'bar';`} /> +``` + +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"! + +## `<Debug />` + +```astro +--- +import Debug from 'astro/debug'; +const serverObject = { + a: 0, + b: "string", + c: { + nested: "object" + } +} +--- +<Debug {serverObject} /> +``` + +This component provides a way to inspect values on the clientside, without any JavaScript. |