Aller au contenu
StudioCMS Docs
Site principal

@studiocms/md

v0.1.0-beta.23 GitHub npm Journal des modifications

Présentation

Section intitulée « Présentation »

Ce module d’extension active la prise en charge de MD dans StudioCMS.

Installation

Section intitulée « Installation »

  1. Installez le paquet à l’aide de la commande suivante :

    Fenêtre de terminal
    npm run studiocms add @studiocms/md

  2. Votre configuration StudioCMS devrait maintenant inclure @studiocms/md :

    studiocms.config.mjs
    import { 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | RobotsConfig | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string ...
    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';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...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): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | RobotsConfig | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string ...
    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';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...Other Options
    })
    defineStudioCMSConfig    ({
       
    plugins?: StudioCMSPlugin[] | undefined
    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 intitulée « Options »

Markdown version studiocms

Section intitulée « Markdown version studiocms »
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[];
  };
};

Markdown version astro

Section intitulée « Markdown version astro »
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[];
  };
};