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.

Key	Type	Description
`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);