MDSXConfig

The MDSX config object.

The MDSXConfig type defines all available configuration options for MDSX. This configuration object is passed to the defineConfig function and used by the mdsx preprocessor.

Type Definition

		type MDSXConfig = {
	/** Remark plugins that apply to all documents */
	remarkPlugins?: PluggableList;
	/** Rehype plugins that apply to all documents */
	rehypePlugins?: PluggableList;
	/** File extensions to process */
	extensions?: string[];
	/** Blueprint configurations */
	blueprints?: BlueprintMap;
	/** Path to a svelte config file, either absolute or relative to `process.cwd()` */
	svelteConfigPath?: string | false;
	/** Custom frontmatter parser function */
	frontmatterParser?: (str: string) => Record<string, unknown> | void;
};

Properties

`remarkPlugins`

Type: PluggableList (optional)

Remark plugins that apply to all markdown documents processed by MDSX. These plugins run during the markdown parsing phase.

mdsx.config.js

		import { defineConfig } from 'mdsx';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	remarkPlugins: [remarkGfm, [remarkMath, { singleDollarTextMath: true }]],
});

Note

PluggableList is a type from the unified ecosystem. It can be:

A single plugin function
An array of plugin functions
A tuple of [plugin, options] for plugins that accept configuration
An array of the above

`rehypePlugins`

Type: PluggableList (optional)

Rehype plugins that apply to all markdown documents processed by MDSX. These plugins run during the HTML processing phase.

mdsx.config.js

		import { defineConfig } from 'mdsx';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]],
});

`extensions`

Type: string[] (optional)

Default: ['.md']

File extensions that MDSX should process. Only files with these extensions will be transformed by the MDSX preprocessor.

mdsx.config.js

		import { defineConfig } from 'mdsx';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md', '.mdx', '.markdown'],
});

`blueprints`

Type: BlueprintMap (optional)

Configuration for blueprints that define layouts, components, and plugins for specific markdown files.

		type BlueprintMap = Record<string, Blueprint> & { default: Blueprint };

mdsx.config.js

		import { defineConfig } from 'mdsx';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	blueprints: {
		default: {
			path: 'src/lib/blueprints/default/blueprint.svelte',
			rehypePlugins: [rehypePrettyCode],
		},
		blog: {
			path: 'src/lib/blueprints/blog/blueprint.svelte',
			remarkPlugins: [remarkCapitalize],
			rehypePlugins: [rehypeToc],
		},
	},
});

Blueprint Type

		type Blueprint = {
	/** Path to the blueprint component */
	path: string;
	/** Remark plugins that only apply to this blueprint */
	remarkPlugins?: PluggableList;
	/** Rehype plugins that only apply to this blueprint */
	rehypePlugins?: PluggableList;
};

Warning

The default blueprint is required when using blueprints. This blueprint will be used for any markdown files that don't specify a blueprint in their frontmatter.

`svelteConfigPath`

Type: string | false (optional)

Path to a Svelte config file, either absolute or relative to process.cwd(). Set to false to ignore the Svelte config file entirely.

When provided, MDSX will load the Svelte config and use its preprocessors (excluding MDSX itself) during the compilation process.

mdsx.config.js

		import { defineConfig } from 'mdsx';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	svelteConfigPath: './svelte.config.js',
});

Note

If not specified, MDSX will automatically look for svelte.config.js, svelte.config.cjs, or svelte.config.mjs in the current working directory.

`frontmatterParser`

Type: (str: string) => Record<string, unknown> | void (optional)

Custom function to parse frontmatter from markdown files. By default, MDSX uses yaml to parse YAML frontmatter.

mdsx.config.js

		import { defineConfig } from 'mdsx';
import { parse as parseToml } from '@iarna/toml';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	frontmatterParser: (str) => {
		const match = /^---\n([sS]*?)\n---/.exec(str);
		if (match) {
			return parseToml(match[1]);
		}
		return undefined;
	},
});

Warning

If you provide a custom parser, it's your responsibility to handle the frontmatter extraction and return the parsed object. The parser should return undefined if no frontmatter is found.

Complete Example

Here's a complete example showing all available configuration options:

mdsx.config.js

		import { defineConfig } from 'mdsx';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrettyCode from 'rehype-pretty-code';
import { rehypeCustomHighlighter } from '@mdsx/rehype-custom-highlighter';
 
export const mdsxConfig = defineConfig({
	// file extensions to process
	extensions: ['.md', '.mdx'],
 
	// global plugins
	remarkPlugins: [remarkGfm, [remarkMath, { singleDollarTextMath: true }]],
	rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]],
 
	// blueprint configurations
	blueprints: {
		default: {
			path: 'src/lib/blueprints/default/blueprint.svelte',
			rehypePlugins: [[rehypeCustomHighlighter, { highlight: customHighlight }], rehypePrettyCode],
		},
		blog: {
			path: 'src/lib/blueprints/blog/blueprint.svelte',
			remarkPlugins: [remarkCapitalize],
			rehypePlugins: [rehypeToc],
		},
	},
 
	// specific svelte config
	svelteConfigPath: './svelte.config.js',
 
	// custom frontmatter parser
	frontmatterParser: (str) => {
		return parseCustomFrontmatter(str);
	},
});

Usage

The MDSX config is used in your Svelte configuration:

svelte.config.js

		import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsx } from 'mdsx';
import { mdsxConfig } from './mdsx.config.js';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [mdsx(mdsxConfig), vitePreprocess()],
	extensions: ['.svelte', '.md'],
};
 
export default config;