Saltearse al contenido
StudioCMS Docs
Sitio Principal
Demo

Configuración del Renderizador

Referencia del esquema de opciones de configuración de la integración de StudioCMS

studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined
renderer: 'studiocms',
    
studiocms?: false | {
    callouts?: false | {
        theme?: "github" | "obsidian" | "vitepress" | undefined;
    } | undefined;
    autoLinkHeadings?: boolean | undefined;
    discordSubtext?: boolean | undefined;
    sanitize?: {
        allowElements?: string[] | undefined;
        blockElements?: string[] | undefined;
        dropElements?: string[] | undefined;
        allowAttributes?: Record<string, string[]> | undefined;
        dropAttributes?: Record<string, string[]> | undefined;
        allowComponents?: boolean | undefined;
        allowCustomElements?: boolean | undefined;
        allowComments?: boolean | undefined;
    } | undefined;
} | undefined
studiocms: {},
    
markdocConfig?: {
    renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
    argParse?: {
        file?: string | undefined;
        slots?: boolean | undefined;
        location?: boolean | undefined;
    } | undefined;
    transformConfig?: {
        tags?: Record<string, {}> | undefined;
        validation?: {
            parents?: any[] | undefined;
            validateFunctions?: boolean | undefined;
            environment?: string | undefined;
        } | undefined;
        nodes?: Record<string, {}> | undefined;
        variables?: Record<string, any> | undefined;
        functions?: Record<string, any> | undefined;
        partials?: Record<string, any> | undefined;
    } | undefined;
} | undefined
markdocConfig: {},
    
mdxConfig?: {
    remarkPlugins?: PluggableList | undefined;
    rehypePlugins?: PluggableList | undefined;
    recmaPlugins?: PluggableList | undefined;
    remarkRehypeOptions?: {
        file?: any;
        allowDangerousHtml?: boolean | null | undefined;
        clobberPrefix?: string | null | undefined;
        footnoteBackContent?: string | ((args_0: number, args_1: number, ...args: unknown[]) => string | {
            type: "comment";
            value: string;
        } | {
            type: "element";
            children: any[];
            tagName: string;
            properties: Record<string, any>;
        } | {
            type: "text";
            value: string;
        } | ({
            type: "comment";
            value: string;
        } | {
            type: "element";
            children: any[];
            tagName: string;
            properties: Record<string, any>;
        } | {
            type: "text";
            value: string;
        })[]) | null | undefined;
        footnoteBackLabel?: string | ((args_0: number, args_1: number, ...args: unknown[]) => string) | null | undefined;
        footnoteLabel?: string | null | undefined;
        footnoteLabelProperties?: Record<string, string | number | boolean | (string | number)[] | null | undefined> | null | undefined;
        footnoteLabelTagName?: string | null | undefined;
        handlers?: any;
        passThrough?: string[] | null | undefined;
        unknownHandler?: any;
    } | undefined;
} | undefined
mdxConfig: {}
  },
});

renderer

'Read the “', renderer, '” section'

renderer es una cadena o CustomRenderer que se utiliza para determinar el renderizador a usar para el contenido.

  • Tipo: CustomRenderer | "studiocms" | "astro" | "markdoc" | "mdx" | undefined
  • Valor predeterminado: 'studiocms'

Uso

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined
renderer: 'studiocms', // PREDETERMINADO - Esto utiliza el Renderizador de StudioCMS.
  }
})

Definir un Renderizador Personalizado

'Read the “', Definir un Renderizador Personalizado, '” section'

StudioCMS te permite definir renderizadores personalizados para tu contenido. Esto te permite definir lógica de renderizado personalizada para tu contenido. Los renderizadores personalizados pueden usarse para renderizar contenido de una manera que no está soportada por los renderizadores incorporados, como HTML puro, u otro formato personalizado.

studiocms.config.mjs
import type { 
(alias) interface CustomRenderer
import CustomRenderer
Custom Renderer Type
@description A custom renderer that can be used in StudioCMS
@property ― {string} name - The name of the renderer
@property ― {Renderer} renderer - The renderer function
@example 
const customRenderer: CustomRenderer = {
	name: 'custom',
	renderer: async (content: string) => {
		return content;
	},
};
CustomRenderer } from 'studiocms/config';
const 
const customRenderer: CustomRenderer
customRenderer: 
(alias) interface CustomRenderer
import CustomRenderer
Custom Renderer Type
@description A custom renderer that can be used in StudioCMS
@property ― {string} name - The name of the renderer
@property ― {Renderer} renderer - The renderer function
@example 
const customRenderer: CustomRenderer = {
	name: 'custom',
	renderer: async (content: string) => {
		return content;
	},
};
CustomRenderer = {
  
CustomRenderer.name: string
name: 'CustomRenderer',
  
CustomRenderer.renderer: Renderer
renderer: async (
content: string
content: string) => {
    // Lógica de renderizado personalizada aquí
    return 
content: string
content;
  },
};


export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
renderer?: CustomRenderer | "studiocms" | "astro" | "markdoc" | "mdx" | undefined
renderer: 
const customRenderer: CustomRenderer
customRenderer
  },
})

studiocms

'Read the “', studiocms, '” section'

studiocms es un objeto que se utiliza para determinar cómo se debe renderizar el contenido con el renderizador studiocms.

Uso

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
studiocms?: false | {
    callouts?: false | {
        theme?: "github" | "obsidian" | "vitepress" | undefined;
    } | undefined;
    autoLinkHeadings?: boolean | undefined;
    discordSubtext?: boolean | undefined;
    sanitize?: {
        allowElements?: string[] | undefined;
        blockElements?: string[] | undefined;
        dropElements?: string[] | undefined;
        allowAttributes?: Record<string, string[]> | undefined;
        dropAttributes?: Record<string, string[]> | undefined;
        allowComponents?: boolean | undefined;
        allowCustomElements?: boolean | undefined;
        allowComments?: boolean | undefined;
    } | undefined;
} | undefined
studiocms: {
      
autoLinkHeadings?: boolean | undefined
autoLinkHeadings: true,
      
discordSubtext?: boolean | undefined
discordSubtext: true,
      
callouts?: false | {
    theme?: "github" | "obsidian" | "vitepress" | undefined;
} | undefined
callouts: {},
      
sanitize?: {
    allowElements?: string[] | undefined;
    blockElements?: string[] | undefined;
    dropElements?: string[] | undefined;
    allowAttributes?: Record<string, string[]> | undefined;
    dropAttributes?: Record<string, string[]> | undefined;
    allowComponents?: boolean | undefined;
    allowCustomElements?: boolean | undefined;
    allowComments?: boolean | undefined;
} | undefined
sanitize: {},
    },
  }
})

autoLinkHeadings

'Read the “', autoLinkHeadings, '” section'

autoLinkHeadings es un booleano que se utiliza para determinar si los encabezados deben enlazarse automáticamente. Cuando están enlazados, aparecerá un icono de enlace junto a ellos para que los usuarios puedan copiar fácilmente un enlace rápido a ese encabezado.

  • Tipo: boolean
  • Valor predeterminado: true

discordSubtext

'Read the “', discordSubtext, '” section'

discordSubtext es un booleano que se utiliza para determinar si la sintaxis -# hola debe renderizarse como subtexto estilo Discord.

  • Tipo: boolean
  • Valor predeterminado: true

callouts

'Read the “', callouts, '” section'

callouts es un objeto que se utiliza para determinar con qué estilo se deben renderizar las anotaciones.

  • Tipo: { theme?: "github" | "obsidian" | "vitepress" | undefined } | undefined | false
  • Valor predeterminado: {}

sanitize

'Read the “', sanitize, '” section'

sanitize es un objeto que se utiliza para determinar cómo se debe desinfectar el contenido.

Ver Desinfección UltraHTML para opciones completas^

markdocConfig

'Read the “', markdocConfig, '” section'

markdocConfig es un objeto que se utiliza para determinar cómo se debe renderizar el contenido con el renderizador markdoc.

Uso

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
markdocConfig?: {
    renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
    argParse?: {
        file?: string | undefined;
        slots?: boolean | undefined;
        location?: boolean | undefined;
    } | undefined;
    transformConfig?: {
        tags?: Record<string, {}> | undefined;
        validation?: {
            parents?: any[] | undefined;
            validateFunctions?: boolean | undefined;
            environment?: string | undefined;
        } | undefined;
        nodes?: Record<string, {}> | undefined;
        variables?: Record<string, any> | undefined;
        functions?: Record<string, any> | undefined;
        partials?: Record<string, any> | undefined;
    } | undefined;
} | undefined
markdocConfig: {
      
renderType?: "html" | MarkdocRenderer | "react-static" | undefined
renderType: 'html',
      
argParse?: {
    file?: string | undefined;
    slots?: boolean | undefined;
    location?: boolean | undefined;
} | undefined
argParse: {},
      
transformConfig?: {
    tags?: Record<string, {}> | undefined;
    validation?: {
        parents?: any[] | undefined;
        validateFunctions?: boolean | undefined;
        environment?: string | undefined;
    } | undefined;
    nodes?: Record<string, {}> | undefined;
    variables?: Record<string, any> | undefined;
    functions?: Record<string, any> | undefined;
    partials?: Record<string, any> | undefined;
} | undefined
transformConfig: {},
    },
  }
})

renderType

'Read the “', renderType, '” section'

renderType es una cadena que se utiliza para determinar el tipo de contenido a renderizar.

  • Tipo: MarkdocRenderer | "html" | "react-static" | undefined
  • Valor predeterminado: 'html'

MarkdocRenderer

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

Un renderizador personalizado para el renderizador MarkDoc de StudioCMS que permite al usuario usar MarkDoc con React y componentes React personalizados. Requiere que @astrojs/react^ esté instalado.

studiocms.config.mjs
import { 
function markDocRenderReact(components?: markdocReactComponents): MarkdocRenderer
MarkDoc Render for React
@requires ― @astrojs/react - Astro React Integration
@param ― components - The React components to use for rendering the content
@returns ― The MarkDoc React Renderer for StudioCMS MarkDoc
markDocRenderReact } from 'studiocms/custom-renderers';
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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({
  
rendererConfig?: {
    studiocms?: false | {
        callouts?: false | {
            theme?: "github" | "obsidian" | "vitepress" | undefined;
        } | undefined;
        autoLinkHeadings?: boolean | undefined;
        discordSubtext?: boolean | undefined;
        sanitize?: {
            allowElements?: string[] | undefined;
            blockElements?: string[] | undefined;
            dropElements?: string[] | undefined;
            allowAttributes?: Record<string, string[]> | undefined;
            dropAttributes?: Record<string, string[]> | undefined;
            allowComponents?: boolean | undefined;
            allowCustomElements?: boolean | undefined;
            allowComments?: boolean | undefined;
        } | undefined;
    } | undefined;
    renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
    markdocConfig?: {
        renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
        argParse?: {
            file?: string | undefined;
            slots?: boolean | undefined;
            location?: boolean | undefined;
        } | undefined;
        transformConfig?: {
            tags?: Record<string, {}> | undefined;
            validation?: {
                parents?: any[] | undefined;
                validateFunctions?: boolean | undefined;
                environment?: string | undefined;
            } | undefined;
            nodes?: Record<string, {}> | undefined;
            variables?: Record<string, any> | undefined;
            functions?: Record<string, any> | undefined;
            partials?: Record<string, any> | undefined ...
rendererConfig: {
    
markdocConfig?: {
    renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
    argParse?: {
        file?: string | undefined;
        slots?: boolean | undefined;
        location?: boolean | undefined;
    } | undefined;
    transformConfig?: {
        tags?: Record<string, {}> | undefined;
        validation?: {
            parents?: any[] | undefined;
            validateFunctions?: boolean | undefined;
            environment?: string | undefined;
        } | undefined;
        nodes?: Record<string, {}> | undefined;
        variables?: Record<string, any> | undefined;
        functions?: Record<string, any> | undefined;
        partials?: Record<string, any> | undefined;
    } | undefined;
} | undefined
markdocConfig: {
      
renderType?: MarkdocRenderer | "html" | "react-static" | undefined
renderType: 
function markDocRenderReact(components?: markdocReactComponents): MarkdocRenderer
MarkDoc Render for React
@requires ― @astrojs/react - Astro React Integration
@param ― components - The React components to use for rendering the content
@returns ― The MarkDoc React Renderer for StudioCMS MarkDoc
markDocRenderReact(),
    },
  },
});

argParse

'Read the “', argParse, '” section'

argParse es un objeto que se utiliza para determinar cómo se deben analizar los argumentos.

  • Tipo: {} | false
  • Valor predeterminado: {}

transformConfig

'Read the “', transformConfig, '” section'

transformConfig es un objeto que se utiliza para determinar cómo se debe transformar el contenido.

  • Tipo: {} | false
  • Valor predeterminado: {}

mdxConfig

'Read the “', mdxConfig, '” section'

mdxConfig es un objeto que se utiliza para determinar cómo se debe renderizar el contenido con el renderizador mdx.

Uso

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

recmaPlugins

'Read the “', recmaPlugins, '” section'

recmaPlugins es un array que se utiliza para determinar qué plugins de recma^ deben cargarse.

  • Tipo: PluggableList | undefined
  • Valor predeterminado: []

remarkPlugins

'Read the “', remarkPlugins, '” section'

remarkPlugins es un array que se utiliza para determinar qué plugins de remark deben cargarse.

  • Tipo: PluggableList | undefined
  • Valor predeterminado: []

rehypePlugins

'Read the “', rehypePlugins, '” section'

rehypePlugins es un array que se utiliza para determinar qué plugins de rehype deben cargarse.

  • Tipo: PluggableList | undefined
  • Valor predeterminado: []

remarkRehypeOptions

'Read the “', remarkRehypeOptions, '” section'

remarkRehypeOptions es un objeto que se utiliza para determinar cómo se deben configurar remark y rehype.

  • Tipo: RemarkRehypeOptions
  • Valor predeterminado: `