feat(mdsvex): allow user provided code plugins to run before builtin …

…highlighting

packages/mdsvex/package.json

@@ -37,6 +37,7 @@
 		"front-matter": "^4.0.0",
 		"js-yaml": "^3.13.1",
 		"node-fetch": "^2.6.0",
+		"rehype-shiki": "^0.0.9",
 		"rehype-slug": "^3.0.0",
 		"rehype-toc": "^3.0.1",
 		"remark-autolink-headings": "^6.0.0",

packages/mdsvex/src/index.ts

@@ -77,8 +77,7 @@ export function transform(
 		.use(external, { target: false, rel: ['nofollow'] })
 		.use(escape_code, { blocks: !!highlight })
 		.use(extract_frontmatter, [{ type: fm_opts.type, marker: fm_opts.marker }])
-		.use(parse_frontmatter, { parse: fm_opts.parse, type: fm_opts.type })
-		.use(highlight_blocks, highlight || {});
+		.use(parse_frontmatter, { parse: fm_opts.parse, type: fm_opts.type });
 
 	if (smartypants) {
 		toMDAST.use(
@@ -87,7 +86,7 @@ export function transform(
 		);
 	}
 
-	apply_plugins(remarkPlugins, toMDAST);
+	apply_plugins(remarkPlugins, toMDAST).use(highlight_blocks, highlight || {});
 
 	const toHAST = toMDAST
 		.use(remark2rehype, {
@@ -280,7 +279,9 @@ export const mdsvex = (options: MdsvexOptions = defaults): Preprocessor => {
 
 	return {
 		markup: async ({ content, filename }) => {
-			const extensionsParts = (extensions || [extension]).map(ext => ext.split('.').pop());
+			const extensionsParts = (extensions || [extension]).map((ext) =>
+				ext.split('.').pop()
+			);
 			if (!extensionsParts.includes(filename.split('.').pop())) return;
 
 			const parsed = await parser.process({ contents: content, filename });

packages/mdsvex/test/it/mdsvex.test.ts

@@ -1,5 +1,6 @@
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
+import { Node, Parent } from 'unist';
 
 import { join } from 'path';
 import { lines } from '../utils';
@@ -13,6 +14,7 @@ import toc from 'rehype-toc';
 import rehype_slug from 'rehype-slug';
 import toml from 'toml';
 import VMessage, { VFileMessage } from 'vfile-message';
+import { Transformer } from 'unified';
 
 const mdsvex_it = suite('mdsvex');
 const fix_dir = join(__dirname, '..', '_fixtures');
@@ -171,6 +173,38 @@ mdsvex_it('it should accept rehype plugins with options - plural', async () => {
 	);
 });
 
+mdsvex_it(
+	'it should accept remark plugins that modify code blocks',
+	async () => {
+		function code_plugin(): Transformer {
+			return function (tree: Node): void {
+				(tree as Parent).children.forEach((node) => {
+					if (node.type === 'code') {
+						node.type = 'html';
+						node.value = `<p>The Code is: <pre>${node.value}</pre></p>`;
+					}
+				});
+			};
+		}
+
+		const output = await mdsvex({
+			remarkPlugins: [code_plugin],
+		}).markup({
+			content: `
+\`\`\`booboo
+hello friends
+\`\`\`
+`,
+			filename: 'file.svx',
+		});
+
+		assert.equal(
+			lines(`<p>The Code is: <pre>hello friends</pre></p>`),
+			output && lines(output.code)
+		);
+	}
+);
+
 mdsvex_it('it should respect the smartypants option', async () => {
 	const output = await mdsvex({
 		smartypants: true,