diff options
Diffstat (limited to 'packages/integrations/markdoc/README.md')
| -rw-r--r-- | packages/integrations/markdoc/README.md | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 815f0420b..dd2f2d4de 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -205,23 +205,20 @@ export default defineMarkdocConfig({ ### Syntax highlighting -`@astrojs/markdoc` provides a [Shiki](https://github.com/shikijs/shiki) extension to highlight your code blocks. +`@astrojs/markdoc` provides [Shiki](https://github.com/shikijs/shiki) and [Prism](https://github.com/PrismJS) extensions to highlight your code blocks. -To use this extension, you must separately install `shiki` as a dependency: +#### Shiki -```bash -npm i shiki -``` - -Then, apply the `shiki()` extension to your Markdoc config using the `extends` property. You can optionally pass a shiki configuration object: +Apply the `shiki()` extension to your Markdoc config using the `extends` property. You can optionally pass a shiki configuration object: ```js // markdoc.config.mjs -import { defineMarkdocConfig, shiki } from '@astrojs/markdoc/config'; +import { defineMarkdocConfig } from '@astrojs/markdoc/config'; +import shiki from '@astrojs/markdoc/shiki'; export default defineMarkdocConfig({ extends: [ - await shiki({ + shiki({ // Choose from Shiki's built-in themes (or add your own) // Default: 'github-dark' // https://github.com/shikijs/shiki/blob/main/docs/themes.md @@ -238,6 +235,22 @@ export default defineMarkdocConfig({ }) ``` +#### Prism + +Apply the `prism()` extension to your Markdoc config using the `extends` property. + +```js +// markdoc.config.mjs +import { defineMarkdocConfig } from '@astrojs/markdoc/config'; +import prism from '@astrojs/markdoc/prism'; + +export default defineMarkdocConfig({ + extends: [prism()], +}) +``` + +📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide.](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) + ### Access frontmatter and content collection information from your templates You can access content collection information from your Markdoc templates using the `$entry` variable. This includes the entry `slug`, `collection` name, and frontmatter `data` parsed by your content collection schema (if any). This example renders the `title` frontmatter property as a heading: |