Markdown in Astro
Markdown is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for Markdown files that can also include frontmatter YAML to define custom properties such as a title, description, and tags.
In Astro, you can author content in GitHub Flavored Markdown, then render it in .astro
components. This combines a familiar writing format designed for content with the flexibility of Astro’s component syntax and architecture.
For additional functionality, such as including components and JSX expressions in Markdown, add the @astrojs/mdx
integration to write your Markdown content using MDX.
Organizing Markdown files
Section titled Organizing Markdown filesYour local Markdown files can be kept anywhere within your src/
directory. Local Markdown can be imported into .astro
components using an import
statement for a single file and Vite’s import.meta.glob()
to query multiple files at once.
If you have groups of related Markdown files, consider defining them as collections. This gives you several advantages, including the ability to store Markdown files anywhere on your filesystem or remotely.
Collections also allow you to use content-specfic, optimized API for querying and rendering your content. Collections are intended for sets of data that share the same structure, such as blog posts or product items. When you define that shape in a schema, you additionally get validation, type safety, and Intellisense in your editor.
Dynamic JSX-like expressions
Section titled Dynamic JSX-like expressionsAfter importing or querying Markdown files, you can write dynamic HTML templates in your .astro
components that include frontmatter data and body content.
Available Properties
Section titled Available PropertiesQuerying collections
Section titled Querying collectionsWhen fetching data from your collections via helper functions, your Markdown’s frontmatter properties are available on a data
object (e.g. post.data.title
). Additionally, body
contains the raw, uncompiled body content as a string.
Importing Markdown
Section titled Importing MarkdownThe following exported properties are available in your .astro
component when importing Markdown using import
or import.meta.glob()
:
file
- The absolute file path (e.g./home/user/projects/.../file.md
).url
- The URL of the page (e.g./en/guides/markdown-content
).frontmatter
- Contains any data specified in the file’s YAML frontmatter.<Content />
- A component that returns the full, rendered contents of the file.rawContent()
- A function that returns the raw Markdown document as a string.compiledContent()
- A function that returns the Markdown document compiled to an HTML string.getHeadings()
- An async function that returns an array of all headings (<h1>
to<h6>
) in the file with the type:{ depth: number; slug: string; text: string }[]
. Each heading’sslug
corresponds to the generated ID for a given heading and can be used for anchor links.
An example Markdown blog post may pass the following Astro.props
object:
The <Content />
Component
Section titled The <Content /> ComponentThe <Content />
component is available by importing Content
from a Markdown file. This component returns the file’s full body content, rendered to HTML. You can optionally rename Content
to any component name you prefer.
You can similarly render the HTML content of a Markdown collection entry by rendering a <Content />
component.
Heading IDs
Section titled Heading IDsWriting headings in Markdown will automatically give you anchor links so you can link directly to certain sections of your page.
Astro generates heading id
s based on github-slugger
. You can find more examples in the github-slugger documentation.
Heading IDs and plugins
Section titled Heading IDs and pluginsAstro injects an id
attribute into all heading elements (<h1>
to <h6>
) in Markdown and MDX files and provides a getHeadings()
utility for retrieving these IDs in Markdown exported properties.
You can customize these heading IDs by adding a rehype plugin that injects id
attributes (e.g. rehype-slug
). Your custom IDs, instead of Astro’s defaults, will be reflected in the HTML output and the items returned by getHeadings()
.
By default, Astro injects id
attributes after your rehype plugins have run. If one of your custom rehype plugins needs to access the IDs injected by Astro, you can import and use Astro’s rehypeHeadingIds
plugin directly. Be sure to add rehypeHeadingIds
before any plugins that rely on it:
Markdown Plugins
Section titled Markdown PluginsMarkdown support in Astro is powered by remark, a powerful parsing and processing tool with an active ecosystem. Other Markdown parsers like Pandoc and markdown-it are not currently supported.
Astro applies the GitHub-flavored Markdown and SmartyPants plugins by default. This brings some niceties like generating clickable links from text, and formatting for quotations and em-dashes.
You can customize how remark parses your Markdown in astro.config.mjs
. See the full list of Markdown configuration options.
Adding remark and rehype plugins
Section titled Adding remark and rehype pluginsAstro supports adding third-party remark and rehype plugins for Markdown. These plugins allow you to extend your Markdown with new capabilities, like auto-generating a table of contents, applying accessible emoji labels, and styling your Markdown.
We encourage you to browse awesome-remark and awesome-rehype for popular plugins! See each plugin’s own README for specific installation instructions.
This example applies remark-toc
and rehype-accessible-emojis
to Markdown files:
Customizing a plugin
Section titled Customizing a pluginIn order to customize a plugin, provide an options object after it in a nested array.
The example below adds the heading option to the remarkToc
plugin to change where the table of contents is placed, and the behavior
option to the rehype-autolink-headings
plugin in order to add the anchor tag after the headline text.
Modifying frontmatter programmatically
Section titled Modifying frontmatter programmaticallyYou can add frontmatter properties to all of your Markdown and MDX files by using a remark or rehype plugin.
-
Append a
customProperty
to thedata.astro.frontmatter
property from your plugin’sfile
argument:Added in: astro@2.0.0
data.astro.frontmatter
contains all properties from a given Markdown or MDX document. This allows you to modify existing frontmatter properties, or compute new properties from this existing frontmatter. -
Apply this plugin to your
markdown
ormdx
integration config:or
Now, every Markdown or MDX file will have customProperty
in its frontmatter, making it available when importing your markdown and from the Astro.props.frontmatter
property in your layouts.
Extending Markdown config from MDX
Section titled Extending Markdown config from MDXAstro’s MDX integration will extend your project’s existing Markdown configuration by default. To override individual options, you can specify their equivalent in your MDX configuration.
The following example disables GitHub-Flavored Markdown and applies a different set of remark plugins for MDX files:
To avoid extending your Markdown config from MDX, set the extendMarkdownConfig
option (enabled by default) to false
:
Individual Markdown pages
Section titled Individual Markdown pagesContent collections and importing Markdown into .astro
components provide more features for rendering your Markdown and are the recommended way to handle most of your content. However, there may be times when you want the convenience of just adding a file to src/pages/
and having a simple page automatically created for you.
Astro treats any supported file inside of the /src/pages/
directory as a page, including .md
and other Markdown file types.
Placing a file in this directory, or any sub-directory, will automatically build a page route using the pathname of the file and display the Markdown content rendered to HTML.
Frontmatter layout
property
Section titled Frontmatter layout propertyTo help with the limited functionality of Markdown pages, Astro provides a special frontmatter layout
property which is a relative path to an Astro Markdown layout component. If your Markdown file is located within src/pages/
, create a layout component and add it in this layout property to provide a page shell around your Markdown content.
This layout component is a regular Astro component with specific properties automatically available through Astro.props
for your Astro template. For example, you can access your Markdown file’s frontmatter properties through Astro.props.frontmatter
:
You can also style your Markdown in your layout component.
Fetching Remote Markdown
Section titled Fetching Remote MarkdownAstro does not include built-in support for remote Markdown outside of experimental content collections!
To fetch remote Markdown directly and render it to HTML, you will need to install and configure your own Markdown parser from NPM. This will not inherit from any of Astro’s built-in Markdown settings that you have configured.
Be sure that you understand these limitations before implementing this in your project, and consider fetching your remote Markdown using a content collections loader instead.
Learn