Skip to content

Config objects

When you customize Markdoc, you must pass your customization into the rendering pipeline. The most common way to do this is to provide a config object to the transform phase of rendering.

For instance, create a config object that specifies the variable $version has a value of "1.0". Then, pass it to the transform function.

/** @type {import('@markdoc/markdoc').Config} */
const config = { variables: { version: "1.0" }};
const ast = Markdoc.parse("This is version {% $version %}");
const content = Markdoc.transform(ast, config);
const html = Markdoc.renderers.html(content);

Options

This table outlines the various options you can pass in a config object.

KeyTypeDescription
nodes{ [nodeType: NodeType]: Schema }Register custom nodes in your schema
tags{ [tagName: string]: Schema }Register custom tags in your schema
variables{ [variableName: string]: any }Register variables to use in your document
functions{ [functionName: string]: ConfigFunction }Register custom functions to use in your document
partials{ [partialPath: string]: Ast.Node }Register reusable pieces of content to used by the partial tag

Full example

Here's an example of what a Markdoc config would look like:

/** @type {import('@markdoc/markdoc').Config} */
const config = {
  nodes: {
    heading: {
      render: 'Heading',
      attributes: {
        id: { type: String },
        level: { type: Number }
      }
    }
  },
  tags: {
    callout: {
      render: 'Callout',
      attributes: {
        title: {
          type: String
        }
      }
    }
  },
  variables: {
    name: 'Dr. Mark',
    frontmatter: {
      title: 'Configuration options'
    }
  },
  functions: {
    includes: {
      transform(parameters, config) {
        const [array, value] = Object.values(parameters);

        return Array.isArray(array) ? array.includes(value) : false;
      }
    }
  },
  partials: {
    'header.md': Markdoc.parse(`# My header`)
  }
};

const content = Markdoc.transform(ast, config);