Adding configuration options to Remark plugins within ContentLayer
It took me a minute to find out how to add configuration options to my makeSource
callback using Content Layer with NextJS while building this site, so I figured I'd document it here.
I use remark-prism
for my code snippet styling across this site. To use it, I simply pass the plugin into the Content Layer source like so:
// ./contentlayer.config.ts
import remarkPrism from 'remark-prism'
//...
export default makeSource({
contentDirPath: 'vault/public',
documentTypes: [
Post,
Book,
NowUpdate,
Page,
Project,
],
mdx: {
remarkPlugins: [
remarkFootnotes,
remarkExternalLinks, // The plugin I want to pass options into
remarkObsidianLinks
],
},
})
While I was reading the remark-prism
README I noticed that there is a transformInlineCode
option, but I wasn't sure how to pass options into Content Layer (because I know basically nothing about MDX).
The MDX example under [Usage](import remarkPrism from 'remark-prism') caught my eye, where options were passed in as the second item in a sub-array like so:
// ./contentlayer.config.ts
import remarkPrism from 'remark-prism'
//...
export default makeSource({
contentDirPath: 'vault/public',
documentTypes: [
Post,
Book,
NowUpdate,
Page,
Project,
],
mdx: {
remarkPlugins: [
remarkFootnotes,
[remarkPrism, { transformInlineCode: true }], // passing in some config 😎
remarkObsidianLinks
],
},
})
Turns out that works! So in case you're new to MDX and Content Layer is your intro, you can in fact pass in options to the plugins you use. Happy coding 🤙🏻.