Skip to content
StudioCMS Docs
Main Site

@studiocms/md

v0.1.0-beta.30 GitHub npm Changelog

Introduction

Section titled “Introduction”

This plugin enables MD Support within StudioCMS.

Installation

Section titled “Installation”

  1. Install the package using the following command:

    Terminal window
    npm run studiocms add @studiocms/md

  2. Your StudioCMS config should now include @studiocms/md:

    studiocms.config.mjs
    import { 
    function defineStudioCMSConfig(config: StudioCMSOptions): StudioCMSOptions
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms/config';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     // ...Other Options
    })
    defineStudioCMSConfig     } from 'studiocms/config';
    import 
    function md(options?: MarkdownSchemaOptions): StudioCMSPlugin
    Creates a StudioCMS plugin for Markdown page types.
    

    This plugin configures StudioCMS to support Markdown content, including rendering and editing components,
integration with Astro, and optional callout themes. It resolves user-provided options, sets up virtual imports,
and injects necessary styles and scripts for Markdown rendering.
    @param ― options - Optional configuration for Markdown schema and rendering behavior.
    @returns ― A StudioCMSPlugin instance configured for Markdown support.
    @example 
    import { studiocmsMD } from '@studiocms/md';
    const plugin = studiocmsMD({ flavor: 'studiocms', callouts: 'obsidian' });
    md     from '@studiocms/md';
    

     export default 
    function defineStudioCMSConfig(config: StudioCMSOptions): StudioCMSOptions
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms/config';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     // ...Other Options
    })
    defineStudioCMSConfig    ({
       
    StudioCMSOptions.plugins?: StudioCMSPlugin[]
    Add Plugins to the StudioCMS
    plugins    : [
         
    function md(options?: MarkdownSchemaOptions): StudioCMSPlugin
    Creates a StudioCMS plugin for Markdown page types.
    

    This plugin configures StudioCMS to support Markdown content, including rendering and editing components,
integration with Astro, and optional callout themes. It resolves user-provided options, sets up virtual imports,
and injects necessary styles and scripts for Markdown rendering.
    @param ― options - Optional configuration for Markdown schema and rendering behavior.
    @returns ― A StudioCMSPlugin instance configured for Markdown support.
    @example 
    import { studiocmsMD } from '@studiocms/md';
    const plugin = studiocmsMD({ flavor: 'studiocms', callouts: 'obsidian' });
    md    (),
       ],
     });

Options

Section titled “Options”

studiocms Flavored Markdown

Section titled “studiocms Flavored Markdown”
type 
type StudioCMSMarkdown = {
    flavor: "studiocms";
    autoLinkHeadings: boolean;
    callouts: false | "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[];
    };
}
StudioCMSMarkdown = {
  
flavor: "studiocms"
flavor: "studiocms";
  
autoLinkHeadings: boolean
autoLinkHeadings: boolean;
  
callouts: false | "github" | "obsidian" | "vitepress"
callouts: false | "github" | "obsidian" | "vitepress";
  
discordSubtext: boolean
discordSubtext: boolean;
  
sanitize: {
    allowAttributes: Record<string, string[]>;
    allowComments: boolean;
    allowComponents: boolean;
    allowCustomElements: boolean;
    allowElements: string[];
    blockElements: string[];
    dropAttributes: Record<string, string[]>;
    dropElements: string[];
}
sanitize: {
    
allowAttributes: Record<string, string[]>
allowAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
allowComments: boolean
allowComments: boolean;
    
allowComponents: boolean
allowComponents: boolean;
    
allowCustomElements: boolean
allowCustomElements: boolean;
    
allowElements: string[]
allowElements: string[];
    
blockElements: string[]
blockElements: string[];
    
dropAttributes: Record<string, string[]>
dropAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
dropElements: string[]
dropElements: string[];
  };
};

astro Flavored Markdown

Section titled “astro Flavored Markdown”
type 
type AstroMarkdown = {
    flavor: "astro";
    sanitize: {
        allowAttributes: Record<string, string[]>;
        allowComments: boolean;
        allowComponents: boolean;
        allowCustomElements: boolean;
        allowElements: string[];
        blockElements: string[];
        dropAttributes: Record<string, string[]>;
        dropElements: string[];
    };
}
AstroMarkdown = {
  
flavor: "astro"
flavor: "astro";
  
sanitize: {
    allowAttributes: Record<string, string[]>;
    allowComments: boolean;
    allowComponents: boolean;
    allowCustomElements: boolean;
    allowElements: string[];
    blockElements: string[];
    dropAttributes: Record<string, string[]>;
    dropElements: string[];
}
sanitize: {
    
allowAttributes: Record<string, string[]>
allowAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
allowComments: boolean
allowComments: boolean;
    
allowComponents: boolean
allowComponents: boolean;
    
allowCustomElements: boolean
allowCustomElements: boolean;
    
allowElements: string[]
allowElements: string[];
    
blockElements: string[]
blockElements: string[];
    
dropAttributes: Record<string, string[]>
dropAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
dropElements: string[]
dropElements: string[];
  };
};