14ce8a6ebfc9daf951d2dca54737d857c229667c
Thanks @Princesseuh! - Adds support for using a custom tag (component) for optimized imagesStarting from this version, when a tag called image
is used, its src
attribute will automatically be resolved if it's a local image. Astro will pass the result ImageMetadata
object to the underlying component as the src
prop. For non-local images (i.e. images using URLs or absolute paths), Astro will continue to pass the src
as a string.
// markdoc.config.mjs
import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({
tags: {
image: {
attributes: nodes.image.attributes,
render: component('./src/components/MarkdocImage.astro'),
},
},
});
---
// src/components/MarkdocImage.astro
import { Image } from 'astro:assets';
interface Props {
src: ImageMetadata | string;
alt: string;
width: number;
height: number;
}
const { src, alt, width, height } = Astro.props;
---
<Image {src} {alt} {width} {height} />
{% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" %}
e9a72d9a91a3741566866bcaab11172cb0dc7d31
Thanks @blackmann! - Removes unnecessary shikiji
dependency1baf0b0d3cbd0564954c2366a7278794fad6726e
Thanks @sarah11918! - Updates READMEe83b5095f
Thanks @florian-lefebvre! - Upgrades vite to latestabf601233
, 6201bbe96
, cdabf6ef0
, 1c48ed286
, 37697a2c5
, bd0c2e9ae
, 0fe3a7ed5
, 710be505c
, 153a5abb9
]:
4537ecf0d
Thanks @bluwy! - Uses new createShikiHighlighter
API from @astrojs/markdown-remark
to avoid code duplication#8759 01c801108
Thanks @lutaok! - Fix build process on markdoc integration when root folder contains spaces
#8762 35cd810f0
Thanks @evadecker! - Upgrades Zod to 3.22.4
73b8d60f8
Thanks @AndyClifford! - Added ignoreIndentation as a markdoc integration option to enable better readability of source code.26b77b8fe
]:
c4270e476
Thanks @bluwy! - Updates the internal shiki
syntax highlighter to shikiji
, an ESM-focused alternative that simplifies bundling and maintenance.There are no new options and no changes to how you author code blocks and syntax highlighting.
Potentially breaking change: While this refactor should be transparent for most projects, the transition to shikiji
now produces a smaller HTML markup by attaching a fallback color
style to the pre
or code
element, instead of to the line span
directly. For example:
Before:
<code class="astro-code" style="background-color: #24292e">
<pre>
<span class="line" style="color: #e1e4e8">my code</span>
</pre>
</code>
After:
<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
<pre>
<span class="line">my code<span>
</pre>
</code>
This does not affect the colors as the span
will inherit the color
from the parent, but if you're relying on a specific HTML markup, please check your site carefully after upgrading to verify the styles.
2993055be
, c4270e476
, bd5aa1cd3
, f369fa250
, 391729686
, f999365b8
, b2ae9ee0c
, 0abff97fe
, 3bef32f81
]:
#8737 6f60da805
Thanks @ematipico! - Add provenance statement when publishing the library from CI
Updated dependencies [6f60da805
, d78806dfe
, d1c75fe15
, aa265d730
, 78adbc443
, 21e0757ea
, 357270f2a
]:
#8710 4c2bec681
Thanks @matthewp! - Fixes View transition styles being missing when component used multiple times
Updated dependencies [455af3235
, 4c2bec681
]:
#8188 d0679a666
Thanks @ematipico! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.
#8179 6011d52d3
Thanks @matthewp! - Astro 3.0 Release Candidate
#8169 e79e3779d
Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:
material-darker
-> material-theme-darker
material-default
-> material-theme
material-lighter
-> material-theme-lighter
material-ocean
-> material-theme-ocean
material-palenight
-> material-theme-palenight
d0679a666
, db39206cb
, 2aa6d8ace
, adf9fccfd
, 0c7b42dc6
, 46c4c0e05
, 364d861bd
, 2484dc408
, 81545197a
, 6011d52d3
, c2c71d90c
, cd2d7e769
, 80f1494cd
, e45f30293
, c0de7a7b0
, 65c354969
, 3c3100851
, 34cb20021
, a824863ab
, 44f7a2872
, 1048aca55
, be6bbd2c8
, 9e021a91c
, 7511a4980
, c37632a20
, acf652fc1
, 42785c7b7
, 8450379db
, dbc97b121
, 7d2f311d4
, 2540feedb
, ea7ff5177
, 68efd4a8b
, 7bd1b86f8
, 036388f66
, 519a1c4e8
, 1f58a7a1b
, 2ae9d37f0
, a8f35777e
, 70f34f5a3
, 5208a3c8f
, 84af8ed9d
, f003e7364
, ffc9e2d3d
, 732111cdc
, 0f637c71e
, 33b8910cf
, 8a5b0c1f3
, 148e61d24
, e79e3779d
, 632579dc2
, 3674584e0
, 1db4e92c1
, e7f872e91
, 16f09dfff
, 4477bb41c
, 55c10d1d5
, 3e834293d
, 96beb883a
, 997a0db8a
, 80f1494cd
, 0f0625504
, e1ae56e72
, f32d093a2
, f01eb585e
, b76c166bd
, a87cbe400
, 866ed4098
, 767eb6866
, 32669cd47
]:
#8179 6011d52d3
Thanks @matthewp! - Astro 3.0 Release Candidate
#8169 e79e3779d
Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:
material-darker
-> material-theme-darker
material-default
-> material-theme
material-lighter
-> material-theme-lighter
material-ocean
-> material-theme-ocean
material-palenight
-> material-theme-palenight
adf9fccfd
, 582132328
, 81545197a
, 6011d52d3
, be6bbd2c8
, 42785c7b7
, 95120efbe
, 2ae9d37f0
, f003e7364
, 732111cdc
, 33b8910cf
, e79e3779d
, 179796405
, a87cbe400
, 767eb6866
]:
1eae2e3f7
Thanks @Princesseuh! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.1eae2e3f7
, 76ddef19c
, 9b4f70a62
, 3fdf509b2
, 2f951cd40
, c022a4217
, 67becaa58
, bc37331d8
, dfc2d93e3
, 3dc1ca2fa
, 1be84dfee
, 35f01df79
, 3fdf509b2
, 78de801f2
, 59d6e569f
, 7723c4cc9
, fb5cd6b56
, 631b9c410
]:
7461e82c8
Thanks @alex-sherwin! - Adds an "allowHTML" Markdoc integration option.When enabled, all HTML in Markdoc files will be processed, including HTML elements within Markdoc tags and nodes.
Enable this feature in the markdoc
integration configuration:
// astro.config.mjs
export default defineConfig({
integrations: [markdoc({ allowHTML: true })],
});
#7706 4f6b5ae2b
Thanks @Princesseuh! - Fix Markdoc integration not being able to import emitESMImage
from Astro
Updated dependencies [72bbfac97
, d401866f9
, 4f6b5ae2b
, 06c255716
]:
#7593 c135633bf
Thanks @bholmesdev! - Add a documentation link to the configuration error hint for those migration pre-v0.4.0 config to the latest version.
#7599 8df6a423c
Thanks @bholmesdev! - Fix hyphens in Markdoc tag names causing build failures
Updated dependencies [904921cbe
, 3669e2d27
, 831dfd151
]:
#7575 30d04db98
Thanks @bluwy! - Handle internal access change
Updated dependencies [9e5fafa2b
, 9e5fafa2b
, 9e5fafa2b
, 6e9c29579
, 9e5fafa2b
, 9e5fafa2b
]:
fb7af5511
Thanks @bholmesdev! - Updates the Markdoc config object for rendering Astro components as tags or nodes. Rather than importing components directly, Astro includes a new component()
function to specify your component path. This unlocks using Astro components from npm packages and .ts
files.### Migration
Update all component imports to instead import the new component()
function and use it to render your Astro components:
// markdoc.config.mjs
import {
defineMarkdocConfig,
+ component,
} from '@astrojs/markdoc/config';
- import Aside from './src/components/Aside.astro';
export default defineMarkdocConfig({
tags: {
aside: {
render: Aside,
+ render: component('./src/components/Aside.astro'),
}
}
});
#7467 f6feff7a2
Thanks @bholmesdev! - Restart the dev server whenever your markdoc config changes.
Updated dependencies [6dfd7081b
, 83016795e
, d3247851f
, a3928016c
, 2726098bc
, f4fea3b02
]:
#7351 a30f2f3de
Thanks @bholmesdev! - Fix cloudflare build errors for a bad "./config" entrypoint and "node:crypto" getting included unexpectedly.
#7341 491c2db42
Thanks @bholmesdev! - Improve error message for unsupported Zod transforms from the content config.
Updated dependencies [491c2db42
, 0a8d178c9
]:
#7311 a11b62ee1
Thanks @bholmesdev! - Fix Markdoc type errors for render
and defineMarkdocConfig()
when using a TypeScript Markdoc config file.
#7309 2a4bb23b2
Thanks @bholmesdev! - Fix missing styles and scripts for components when using document: { render: null }
in the Markdoc config.
Updated dependencies [8034edd9e
]:
#7224 563293c5d
Thanks @bholmesdev! - Allow HTML comments <!--like this-->
in Markdoc files.
#7185 339529fc8
Thanks @bholmesdev! - Bring back improved style and script handling across content collection files. This addresses bugs found in a previous release to @astrojs/markdoc
.
Updated dependencies [6e27f2f6d
, 96ae37eb0
, fea306936
, 5156c4f90
, 9e7366567
, 339529fc8
]:
#7244 bef3a75db
Thanks @bholmesdev! - Remove the auto-generated $entry
variable for Markdoc entries. To access frontmatter as a variable, you can pass entry.data
as a prop where you render your content:
---
import { getEntry } from 'astro:content';
const entry = await getEntry('docs', 'why-markdoc');
const { Content } = await entry.render();
---
<Content frontmatter={entry.data} />
#7187 1efaef6be
Thanks @bholmesdev! - Add support for syntax highlighting with Shiki. Apply to your Markdoc config using the extends
property:
// markdoc.config.mjs
import { defineMarkdocConfig } from '@astrojs/markdoc/config';
import shiki from '@astrojs/markdoc/shiki';
export default defineMarkdocConfig({
extends: [
shiki({
/** Shiki config options */
}),
],
});
Learn more in the @astrojs/markdoc
README.
#7209 16b836411
Thanks @bholmesdev! - Add a built-in extension for syntax highlighting with Prism. Apply to your Markdoc config using the extends
property:
// markdoc.config.mjs
import { defineMarkdocConfig } from '@astrojs/markdoc/config';
import prism from '@astrojs/markdoc/prism';
export default defineMarkdocConfig({
extends: [prism()],
});
Learn more in the @astrojs/markdoc
README.
8b041bf57
, 6c7df28ab
, ee2aca80a
, 7851f9258
, bef3a75db
, 52af9ad18
, f5063d0a0
, cf621340b
, 2bda7fb0b
, af3c5a2e2
, f2f18b440
]:
#7178 57e65d247
Thanks @bholmesdev! - Fix: revert Markdoc asset bleed changes. Production build issues were discovered that deserve a different fix.
Updated dependencies [904131aec
, 57e65d247
]:
#6758 f558a9e20
Thanks @bholmesdev! - Improve style and script handling across content collection files. This addresses style bleed present in @astrojs/markdoc
v0.1.0
Updated dependencies [f558a9e20
, b41963b77
]:
#7141 a9e1cd7e5
Thanks @bholmesdev! - Fix inconsistent Markdoc heading IDs for documents with the same headings.
Updated dependencies [72f686a68
, 319a0a7a0
, 852d59a8d
, 530fb9ebe
, 3257dd289
]:
#6850 c6d7ebefd
Thanks @bholmesdev! - Content collections now support data formats including JSON and YAML. You can also create relationships, or references, between collections to pull information from one collection entry into another. Learn more on our updated Content Collections docs.
#7095 fb84622af
Thanks @bholmesdev! - Generate heading id
s and populate the headings
property for all Markdoc files
#7111 6b4fcde37
Thanks @bholmesdev! - Fix: add headings
to Markdoc render()
return type.
#7104 826e02890
Thanks @bluwy! - Specify "files"
field to only publish necessary files
Updated dependencies [4516d7b22
, e186ecc5e
, c6d7ebefd
, 914c439bc
, e9fc2c221
, 075eee08f
, 719002ca5
, fc52681ba
, fb84622af
, cada10a46
, cd410c5eb
, 73ec6f6c1
, 410428672
, 763ff2d1e
, c1669c001
, 3d525efc9
]:
#7045 3a9f72c7f
Thanks @bholmesdev! - Improve Markdoc validation errors with full message and file preview.
Updated dependencies [48395c815
, 630f8c8ef
]:
#6932 49514e4ce
Thanks @bluwy! - Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to the pre
tag, e.g. <pre class="astro-code github-dark">
.
Updated dependencies [818252acd
, 80e3d4d3d
, 3326492b9
, cac4a321e
, 831b67cdb
, 49514e4ce
, 0883fd487
]:
#6723 73fcc7627
Thanks @bholmesdev! - Fix: when using render: null
in your config, content is now rendered without a wrapper element.
Updated dependencies [489dd8d69
, a1a4f45b5
, a1108e037
, 8b88e4cf1
, d54cbe413
, 4c347ab51
, ff0430786
, 2f2e572e9
, 7116c021a
]:
7c439868a
Thanks @bholmesdev! - Simplify Markdoc configuration with a new markdoc.config.mjs
file. This lets you import Astro components directly to render as Markdoc tags and nodes, without the need for the previous components
property. This new configuration also unlocks passing variables to your Markdoc from the Content
component (see the new docs).## Migration
Move any existing Markdoc config from your astro.config
to a new markdoc.config.mjs
file at the root of your project. This should be applied as a default export, with the optional defineMarkdocConfig()
helper for autocomplete in your editor.
This example configures an aside
Markdoc tag. Note that components should be imported and applied to the render
attribute directly, instead of passing the name as a string:
// markdoc.config.mjs
import { defineMarkdocConfig } from '@astrojs/markdoc/config';
import Aside from './src/components/Aside.astro';
export default defineMarkdocConfig({
tags: {
aside: {
render: Aside,
},
},
});
You should also remove the components
prop from your Content
components. Since components are imported into your config directly, this is no longer needed.
---
- import Aside from '../components/Aside.astro';
import { getEntryBySlug } from 'astro:content';
const entry = await getEntryBySlug('docs', 'why-markdoc');
const { Content } = await entry.render();
---
<Content
- components={{ Aside }}
/>
1f783e320
, 2e92e9aa9
, adecda7d6
, 386336441
, 7c439868a
, 25cd3e574
, 4bf87c64f
, fc0ed9c53
]:
#6630 cfcf2e2ff
Thanks @bholmesdev! - Support automatic image optimization for Markdoc images when using experimental.assets
. You can follow our Assets guide to enable this feature in your project. Then, start using relative or aliased image sources in your Markdoc files for automatic optimization:
<!--Relative paths-->

<!--Or configured aliases-->

Updated dependencies [b7194103e
, cfcf2e2ff
, 45da39a86
, 7daef9a29
]:
#6588 f42f47dc6
Thanks @bholmesdev! - Allow access to content collection entry information (including parsed frontmatter and the entry slug) from your Markdoc using the $entry
variable:
---
title: Hello Markdoc!
---
# {% $entry.data.title %}
#6607 86273b588
Thanks @bholmesdev! - Fix: Update Markdoc renderer internals to remove unneeded dependencies
#6622 b37b86540
Thanks @paulrudy! - Fix README instructions for installing Markdoc manually.
a13e9d7e3
Thanks @Yan-Thomas! - Consistency improvements to several package descriptionsfec583909
Thanks @bholmesdev! - Introduce the (experimental) @astrojs/markdoc
integration. This unlocks Markdoc inside your Content Collections, bringing support for Astro and UI components in your content. This also improves Astro core internals to make Content Collections extensible to more file types in the future.You can install this integration using the astro add
command:
astro add markdoc
Read the @astrojs/markdoc
documentation for usage instructions, and browse the new with-markdoc
starter to try for yourself.