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 🤙🏻.

Other content that links to this

• Project: Personal Website