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.

Sign up for GitHub

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

Add Steps component to markdown-content.mdx #8064

Merged
merged 1 commit into from
May 2, 2024
Merged

Add Steps component to markdown-content.mdx #8064

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 10 additions & 4 deletions src/content/docs/en/guides/markdown-content.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ title: Markdown & MDX
description: Learn how to create content using Markdown or MDX with Astro
i18nReady: true
---

import Since from '~/components/Since.astro'
import Since from '~/components/Since.astro';
import { FileTree } from '@astrojs/starlight/components';
import RecipeLinks from "~/components/RecipeLinks.astro"
import ReadMore from '~/components/ReadMore.astro'
import RecipeLinks from "~/components/RecipeLinks.astro";
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

[Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for standard Markdown files that can also include [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) to define custom metadata such as a title, description, and tags.

Expand Down Expand Up @@ -473,6 +473,7 @@ If you are using [content collections](/en/guides/content-collections/), please

You can add frontmatter properties to all of your Markdown and MDX files by using a [remark or rehype plugin](#markdown-plugins).

<Steps>
1. Append a `customProperty` to the `data.astro.frontmatter` property from your plugin's `file` argument:

```js title="example-remark-plugin.mjs"
Expand Down Expand Up @@ -517,6 +518,7 @@ You can add frontmatter properties to all of your Markdown and MDX files by usin
],
});
```
</Steps>

Now, every Markdown or MDX file will have `customProperty` in its frontmatter, making it available when [importing your markdown](#importing-markdown) and from [the `Astro.props.frontmatter` property in your layouts](#frontmatter-layout).

Expand Down Expand Up @@ -651,9 +653,13 @@ export default defineConfig({

If you opt to use Prism, Astro will apply Prism's CSS classes instead. Note that **you need to bring your own CSS stylesheet** for syntax highlighting to appear!

<Steps>
1. Choose a premade stylesheet from the available [Prism Themes](https://github.com/PrismJS/prism-themes).

2. Add this stylesheet to [your project's `public/` directory](/en/basics/project-structure/#public).

3. Load this into your page's `<head>` in a [layout component](/en/basics/layouts/) via a `<link>` tag. (See [Prism basic usage](https://prismjs.com/#basic-usage).)
</Steps>

You can also visit the [list of languages supported by Prism](https://prismjs.com/#supported-languages) for options and usage.

Expand Down
Loading