Skip to content
StudioCMS Docs
Main Site
Live Demo

schemas/config/rendererConfig

Interfaces

'Read the “', Interfaces, '” section'

CustomRenderer

'Read the “', CustomRenderer, '” section'

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:28

Custom Renderer Type

Description

'Read the “', Description, '” section'

A custom renderer that can be used in StudioCMS

Example

'Read the “', Example, '” section'
const customRenderer: CustomRenderer = {
  name: 'custom',
  renderer: async (content: string) => {
    return content;
  },
};


#### Properties


<a id="name"></a>


##### name


```ts
name: string;

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:29

The name of the renderer

renderer
'Read the “', renderer, '” section'
renderer: Renderer;

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:30

The renderer function

Type Aliases

'Read the “', Type Aliases, '” section'

Renderer()

'Read the “', Renderer(), '” section'
type Renderer = (content: string) => Promise<string>;

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:9

Parameters

'Read the “', Parameters, '” section'
content
'Read the “', content, '” section'

string

Returns

'Read the “', Returns, '” section'

Promise<string>

StudioCMSRendererConfig

'Read the “', StudioCMSRendererConfig, '” section'
type StudioCMSRendererConfig = {
  markdocConfig: {
     argParse: {
        file: string;
        location: boolean;
        slots: boolean;
       };
     renderType:   | "html"
        | "react-static"
        | MarkdocRenderer;
     transformConfig: {
        functions: Record<string, any>;
        nodes: Record<string, {}>;
        partials: Record<string, any>;
        tags: Record<string, {}>;
        validation: {
           environment: string;
           parents: any[];
           validateFunctions: boolean;
          };
        variables: Record<string, any>;
       };
    };
  mdxConfig: {
     recmaPlugins: PluggableList;
     rehypePlugins: PluggableList;
     remarkPlugins: PluggableList;
     remarkRehypeOptions: {
        allowDangerousHtml: null | boolean;
        clobberPrefix: null | string;
        file: any;
        footnoteBackContent:   | null
           | string
           | (...args: [number, number, ...unknown[]]) =>
           | string
           | {
           type: "comment";
           value: string;
          }
           | {
           children: any[];
           properties: Record<string, any>;
           tagName: string;
           type: "element";
          }
           | {
           type: "text";
           value: string;
          }
           | (
           | {
           type: "comment";
           value: string;
          }
           | {
           children: any[];
           properties: Record<string, any>;
           tagName: string;
           type: "element";
          }
           | {
           type: "text";
           value: string;
          })[];
        footnoteBackLabel:   | null
           | string
           | (...args: [number, number, ...unknown[]]) => string;
        footnoteLabel: null | string;
        footnoteLabelProperties:   | null
           | Record<string, undefined | null | string | number | boolean | (string | number)[]>;
        footnoteLabelTagName: null | string;
        handlers: any;
        passThrough: null | string[];
        unknownHandler: any;
       };
    };
  renderer:   | "studiocms"
     | "astro"
     | "markdoc"
     | "mdx"
     | CustomRenderer;
  studiocms: {
     autoLinkHeadings: boolean;
     callouts: {
        enabled: boolean;
        theme: "github" | "obsidian" | "vitepress";
       };
     discordSubtext: boolean;
     sanitize: {
        allowAttributes: Record<string, string[]>;
        allowComments: boolean;
        allowComponents: boolean;
        allowCustomElements: boolean;
        allowElements: string[];
        blockElements: string[];
        dropAttributes: Record<string, string[]>;
        dropElements: string[];
       };
    };
};

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:89

Type for the StudioCMS Renderer Configuration

Type declaration

'Read the “', Type declaration, '” section'

markdocConfig
'Read the “', markdocConfig, '” section'
markdocConfig: {
  argParse: {
     file: string;
     location: boolean;
     slots: boolean;
    };
  renderType:   | "html"
     | "react-static"
     | MarkdocRenderer;
  transformConfig: {
     functions: Record<string, any>;
     nodes: Record<string, {}>;
     partials: Record<string, any>;
     tags: Record<string, {}>;
     validation: {
        environment: string;
        parents: any[];
        validateFunctions: boolean;
       };
     variables: Record<string, any>;
    };
 } = markdocConfigSchema;

Allows customization of the Markdoc Configuration

Markdoc is a powerful, flexible, Markdown-based authoring framework. Built by Stripe.

See
'Read the “', See, '” section'

https://markdoc.dev/^ for more info about markdoc.

markdocConfig.argParse?
'Read the “', markdocConfig.argParse?, '” section'
optional argParse: {
  file: string;
  location: boolean;
  slots: boolean;
};

The MarkDoc Arg Parse to use for rendering pages and posts

markdocConfig.argParse.file?
'Read the “', markdocConfig.argParse.file?, '” section'
optional file: string;

markdocConfig.argParse.location?
'Read the “', markdocConfig.argParse.location?, '” section'
optional location: boolean;

markdocConfig.argParse.slots?
'Read the “', markdocConfig.argParse.slots?, '” section'
optional slots: boolean;

markdocConfig.renderType
'Read the “', markdocConfig.renderType, '” section'
renderType:
  | "html"
  | "react-static"
  | MarkdocRenderer;

The MarkDoc Content Renderer to use for rendering pages and posts

Can be one of the following: html, react-static, or a custom renderer

markdocConfig.transformConfig?
'Read the “', markdocConfig.transformConfig?, '” section'
optional transformConfig: {
  functions: Record<string, any>;
  nodes: Record<string, {}>;
  partials: Record<string, any>;
  tags: Record<string, {}>;
  validation: {
     environment: string;
     parents: any[];
     validateFunctions: boolean;
    };
  variables: Record<string, any>;
};

The MarkDoc Transform Config to use for rendering pages and posts

See
'Read the “', See, '” section'

https://markdoc.dev/docs/config^

markdocConfig.transformConfig.functions?
'Read the “', markdocConfig.transformConfig.functions?, '” section'
optional functions: Record<string, any>;

markdocConfig.transformConfig.nodes?
'Read the “', markdocConfig.transformConfig.nodes?, '” section'
optional nodes: Record<string, {}>;

markdocConfig.transformConfig.partials?
'Read the “', markdocConfig.transformConfig.partials?, '” section'
optional partials: Record<string, any>;

markdocConfig.transformConfig.tags?
'Read the “', markdocConfig.transformConfig.tags?, '” section'
optional tags: Record<string, {}>;

markdocConfig.transformConfig.validation?
'Read the “', markdocConfig.transformConfig.validation?, '” section'
optional validation: {
  environment: string;
  parents: any[];
  validateFunctions: boolean;
};

markdocConfig.transformConfig.validation.environment?
'Read the “', markdocConfig.transformConfig.validation.environment?, '” section'
optional environment: string;

markdocConfig.transformConfig.validation.parents?
'Read the “', markdocConfig.transformConfig.validation.parents?, '” section'
optional parents: any[];

markdocConfig.transformConfig.validation.validateFunctions?
'Read the “', markdocConfig.transformConfig.validation.validateFunctions?, '” section'
optional validateFunctions: boolean;

markdocConfig.transformConfig.variables?
'Read the “', markdocConfig.transformConfig.variables?, '” section'
optional variables: Record<string, any>;

mdxConfig
'Read the “', mdxConfig, '” section'
mdxConfig: {
  recmaPlugins: PluggableList;
  rehypePlugins: PluggableList;
  remarkPlugins: PluggableList;
  remarkRehypeOptions: {
     allowDangerousHtml: null | boolean;
     clobberPrefix: null | string;
     file: any;
     footnoteBackContent:   | null
        | string
        | (...args: [number, number, ...unknown[]]) =>
        | string
        | {
        type: "comment";
        value: string;
       }
        | {
        children: any[];
        properties: Record<string, any>;
        tagName: string;
        type: "element";
       }
        | {
        type: "text";
        value: string;
       }
        | (
        | {
        type: "comment";
        value: string;
       }
        | {
        children: any[];
        properties: Record<string, any>;
        tagName: string;
        type: "element";
       }
        | {
        type: "text";
        value: string;
       })[];
     footnoteBackLabel:   | null
        | string
        | (...args: [number, number, ...unknown[]]) => string;
     footnoteLabel: null | string;
     footnoteLabelProperties:   | null
        | Record<string, undefined | null | string | number | boolean | (string | number)[]>;
     footnoteLabelTagName: null | string;
     handlers: any;
     passThrough: null | string[];
     unknownHandler: any;
    };
 } = mdxConfigSchema;

Allows customization of the MDX Configuration

MDX is a JSX in Markdown loader, parser, and renderer for ambitious projects.

See
'Read the “', See, '” section'

https://mdxjs.com/^ for more info about MDX.

mdxConfig.recmaPlugins
'Read the “', mdxConfig.recmaPlugins, '” section'
recmaPlugins: PluggableList;

List of recma plugins (optional); this is a new ecosystem, currently in beta, to transform esast trees (JavaScript)

mdxConfig.rehypePlugins
'Read the “', mdxConfig.rehypePlugins, '” section'
rehypePlugins: PluggableList;

List of rehype plugins (optional).

mdxConfig.remarkPlugins
'Read the “', mdxConfig.remarkPlugins, '” section'
remarkPlugins: PluggableList;

List of remark plugins (optional).

mdxConfig.remarkRehypeOptions
'Read the “', mdxConfig.remarkRehypeOptions, '” section'
remarkRehypeOptions: {
  allowDangerousHtml: null | boolean;
  clobberPrefix: null | string;
  file: any;
  footnoteBackContent:   | null
     | string
     | (...args: [number, number, ...unknown[]]) =>
     | string
     | {
     type: "comment";
     value: string;
    }
     | {
     children: any[];
     properties: Record<string, any>;
     tagName: string;
     type: "element";
    }
     | {
     type: "text";
     value: string;
    }
     | (
     | {
     type: "comment";
     value: string;
    }
     | {
     children: any[];
     properties: Record<string, any>;
     tagName: string;
     type: "element";
    }
     | {
     type: "text";
     value: string;
    })[];
  footnoteBackLabel:   | null
     | string
     | (...args: [number, number, ...unknown[]]) => string;
  footnoteLabel: null | string;
  footnoteLabelProperties:   | null
     | Record<string, undefined | null | string | number | boolean | (string | number)[]>;
  footnoteLabelTagName: null | string;
  handlers: any;
  passThrough: null | string[];
  unknownHandler: any;
};

Options to pass through to remark-rehype (optional); the option allowDangerousHtml will always be set to true and the MDX nodes (see nodeTypes) are passed through; In particular, you might want to pass configuration for footnotes if your content is not in English.

mdxConfig.remarkRehypeOptions.allowDangerousHtml?
'Read the “', mdxConfig.remarkRehypeOptions.allowDangerousHtml?, '” section'
optional allowDangerousHtml: null | boolean;

mdxConfig.remarkRehypeOptions.clobberPrefix?
'Read the “', mdxConfig.remarkRehypeOptions.clobberPrefix?, '” section'
optional clobberPrefix: null | string;

mdxConfig.remarkRehypeOptions.file?
'Read the “', mdxConfig.remarkRehypeOptions.file?, '” section'
optional file: any;

mdxConfig.remarkRehypeOptions.footnoteBackContent?
'Read the “', mdxConfig.remarkRehypeOptions.footnoteBackContent?, '” section'
optional footnoteBackContent:
  | null
  | string
  | (...args: [number, number, ...unknown[]]) =>
  | string
  | {
  type: "comment";
  value: string;
 }
  | {
  children: any[];
  properties: Record<string, any>;
  tagName: string;
  type: "element";
 }
  | {
  type: "text";
  value: string;
 }
  | (
  | {
  type: "comment";
  value: string;
 }
  | {
  children: any[];
  properties: Record<string, any>;
  tagName: string;
  type: "element";
 }
  | {
  type: "text";
  value: string;
 })[];

mdxConfig.remarkRehypeOptions.footnoteBackLabel?
'Read the “', mdxConfig.remarkRehypeOptions.footnoteBackLabel?, '” section'
optional footnoteBackLabel:
  | null
  | string
  | (...args: [number, number, ...unknown[]]) => string;

mdxConfig.remarkRehypeOptions.footnoteLabel?
'Read the “', mdxConfig.remarkRehypeOptions.footnoteLabel?, '” section'
optional footnoteLabel: null | string;

mdxConfig.remarkRehypeOptions.footnoteLabelProperties?
'Read the “', mdxConfig.remarkRehypeOptions.footnoteLabelProperties?, '” section'
optional footnoteLabelProperties:
  | null
| Record<string, undefined | null | string | number | boolean | (string | number)[]>;

mdxConfig.remarkRehypeOptions.footnoteLabelTagName?
'Read the “', mdxConfig.remarkRehypeOptions.footnoteLabelTagName?, '” section'
optional footnoteLabelTagName: null | string;

mdxConfig.remarkRehypeOptions.handlers?
'Read the “', mdxConfig.remarkRehypeOptions.handlers?, '” section'
optional handlers: any;

mdxConfig.remarkRehypeOptions.passThrough?
'Read the “', mdxConfig.remarkRehypeOptions.passThrough?, '” section'
optional passThrough: null | string[];

mdxConfig.remarkRehypeOptions.unknownHandler?
'Read the “', mdxConfig.remarkRehypeOptions.unknownHandler?, '” section'
optional unknownHandler: any;

renderer
'Read the “', renderer, '” section'
renderer:
  | "studiocms"
  | "astro"
  | "markdoc"
  | "mdx"
  | CustomRenderer;

The Markdown Content Renderer to use for rendering pages and posts

Astro is the built-in Astro remark-markdown plugin.

See
'Read the “', See, '” section'

Markdoc is a powerful, flexible, Markdown-based authoring framework. Built by Stripe.

studiocms
'Read the “', studiocms, '” section'
studiocms: {
  autoLinkHeadings: boolean;
  callouts: {
     enabled: boolean;
     theme: "github" | "obsidian" | "vitepress";
    };
  discordSubtext: boolean;
  sanitize: {
     allowAttributes: Record<string, string[]>;
     allowComments: boolean;
     allowComponents: boolean;
     allowCustomElements: boolean;
     allowElements: string[];
     blockElements: string[];
     dropAttributes: Record<string, string[]>;
     dropElements: string[];
    };
 } = StudioCMSMarkdownExtendedSchema;

Allows customization of the StudioCMS Markdown Extended Configuration

StudioCMS Markdown Extended is a collection of custom markdown features for StudioCMS.

See
'Read the “', See, '” section'

https://github.com/withstudiocms/markdown-remark/tree/main^ for more info about StudioCMS Markdown Extended.

studiocms.autoLinkHeadings
'Read the “', studiocms.autoLinkHeadings, '” section'
autoLinkHeadings: boolean;

studiocms.callouts
'Read the “', studiocms.callouts, '” section'
callouts: {
  enabled: boolean;
  theme: "github" | "obsidian" | "vitepress";
};

studiocms.callouts.enabled
'Read the “', studiocms.callouts.enabled, '” section'
enabled: boolean = true;

studiocms.callouts.theme
'Read the “', studiocms.callouts.theme, '” section'
theme: "github" | "obsidian" | "vitepress";

studiocms.discordSubtext
'Read the “', studiocms.discordSubtext, '” section'
discordSubtext: boolean;

studiocms.sanitize?
'Read the “', studiocms.sanitize?, '” section'
optional sanitize: {
  allowAttributes: Record<string, string[]>;
  allowComments: boolean;
  allowComponents: boolean;
  allowCustomElements: boolean;
  allowElements: string[];
  blockElements: string[];
  dropAttributes: Record<string, string[]>;
  dropElements: string[];
 } = StudioCMSSanitizeOptionsSchema;

studiocms.sanitize.allowAttributes?
'Read the “', studiocms.sanitize.allowAttributes?, '” section'
optional allowAttributes: Record<string, string[]>;

An object where each key is the attribute name and the value is an array of allowed tag names. Matching attributes will not be removed. All attributes that are not in the array will be dropped.

studiocms.sanitize.allowComments?
'Read the “', studiocms.sanitize.allowComments?, '” section'
optional allowComments: boolean;

A boolean value to remove HTML comments. Set to true in order to keep comments. Default is false.

studiocms.sanitize.allowComponents?
'Read the “', studiocms.sanitize.allowComponents?, '” section'
optional allowComponents: boolean;

A boolean value to remove components and their children. If set to true, components will be subject to built-in and custom configuration checks (and will be retained or dropped based on those checks). Default is false.

studiocms.sanitize.allowCustomElements?
'Read the “', studiocms.sanitize.allowCustomElements?, '” section'
optional allowCustomElements: boolean;

A boolean value to remove custom elements and their children. If set to true, custom elements will be subject to built-in and custom configuration checks (and will be retained or dropped based on those checks). Default is false

studiocms.sanitize.allowElements?
'Read the “', studiocms.sanitize.allowElements?, '” section'
optional allowElements: string[];

An Array of strings indicating elements that the sanitizer should not remove. All elements not in the array will be dropped.

studiocms.sanitize.blockElements?
'Read the “', studiocms.sanitize.blockElements?, '” section'
optional blockElements: string[];

An Array of strings indicating elements that the sanitizer should remove. Children will be kept.

studiocms.sanitize.dropAttributes?
'Read the “', studiocms.sanitize.dropAttributes?, '” section'
optional dropAttributes: Record<string, string[]>;

An object where each key is the attribute name and the value is an array of dropped tag names. Matching attributes will be removed.

studiocms.sanitize.dropElements?
'Read the “', studiocms.sanitize.dropElements?, '” section'
optional dropElements: string[];

An Array of strings indicating elements (including nested elements) that the sanitizer should remove.

Variables

'Read the “', Variables, '” section'

StudioCMSRendererConfigSchema

'Read the “', StudioCMSRendererConfigSchema, '” section'
const StudioCMSRendererConfigSchema: ZodDefault<StudioCMSRendererConfig>;

Defined in: studiocms/packages/studiocms/src/schemas/config/rendererConfig.ts:38

StudioCMS Renderer Configuration Schema

Allows customization of the current renderer being used

References

'Read the “', References, '” section'

markdocRenderer

'Read the “', markdocRenderer, '” section'

Re-exports markdocRenderer

MarkdocRenderer

'Read the “', MarkdocRenderer, '” section'

Re-exports MarkdocRenderer

TransformToProcessor

'Read the “', TransformToProcessor, '” section'

Re-exports TransformToProcessor