diff options
Diffstat (limited to 'packages/integrations/mdx/README.md')
| -rw-r--r-- | packages/integrations/mdx/README.md | 19 |
1 files changed, 18 insertions, 1 deletions
diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index a77733589..c589673d7 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -253,7 +253,7 @@ const { title, fancyJsHelper } = Astro.props; The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting). -We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default [using Shiki twoslash](https://shikijs.github.io/twoslash/). You can customize [this remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash) using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so: +We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so: ```js // astro.config.mjs @@ -285,6 +285,23 @@ export default { This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro. +#### Switch to a custom syntax highlighter + +You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash): + +```js +// astro.config.mjs +import shikiTwoslash from 'remark-shiki-twoslash'; + +export default { + markdown: { + syntaxHighlight: false, + }, + integrations: [mdx({ + remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }], + })], +``` + ## Configuration ### remarkPlugins |