How do I get code from frontmatter into md code block?

[jpoehnelt]

---
code: "console.log('Hello world')"
---

Doesn't work:

{{ $frontmatter.code }}

What are the best solutions? I didn't see anything about escaping.

slidev/packages/slidev/node/syntax/transform/utils.ts

Lines 28 to 33 in 48dad78

	/**
	* Escape `{{` in code block to prevent Vue interpret it, #99, #1316
	*/
	export function escapeVueInCode(md: string) {
	return md.replace(/\{\{/g, '{{')
	}

[jpoehnelt]

I hacked together a transformer with regex for this. 🤮

import type { MarkdownTransformContext } from "@slidev/types";
import { defineTransformersSetup } from "@slidev/types";

function getValueByPath(obj: Object, path: string): any {
  const brackets = {};

  // replace brackets with placeholders using dot notation
  const pathWithPlaceholders = path
    .trim()
    // TODO does not cover all cases
    .replace(/\[['"]?(.*?)['"]?\]/g, (_, match, index) => {
      const placeholder = `__BRACKET_${index}__`;
      brackets[placeholder] = match;
      return `.${placeholder}`;
    });

  const keys = pathWithPlaceholders.split(".");
  let current = obj;

  for (const key of keys) {
    if (current && typeof current === "object") {
      current = current[key] ?? current[brackets[key]];
    } else {
      return undefined;
    }
  }

  return current;
}

function transformFrontmatter(ctx: MarkdownTransformContext) {
  ctx.s.replace(
    /^```([^\n]*)?\n([\s\S]+?)\n```/gm,
    (_, annotations = "", code = "") => {
      code = code.replace(/\{\{ *\$frontmatter\.(.*) *\}\}/g, (_: never, key: string) => {
        return getValueByPath(ctx.slide.source.frontmatter, key);
      });

      return `\`\`\`${annotations}\n${code}\n\`\`\``;
    }
  );
}

export default defineTransformersSetup(() => {
  return {
    pre: [],
    preCodeblock: [transformFrontmatter],
    postCodeblock: [],
    post: [],
  };
});