extensions.md

Extensions

Markdown Config

You can configure the markdown parsing rules by configuring the engine object, such as whether the chart available in table(available in the pro version)

engine: {
    // Custom syntax
    customSyntax: {
        // 'SyntaxClass': SyntaxClass   
        // Force overwrite the built-in syntax parser in case of name conflict
        // 'SyntaxClass': {             
        //    syntax: SyntaxClass,      
        //    force: true,              
        //    before: 'HOOK_NAME',      
        //    after: 'HOOK_NAME'        
        // }
    }
}

• Key: customSyntax
• Description: Custom syntax configuration
• Type: { [HOOK_NAME: string]: { [option: string]: any } | boolean }
• Default: {}
• Options:
  • SyntaxClass <[String]> hook name
    • syntax <[SyntaxBase]> hook constructor
    • force <[Boolean]> whether overwrite hook with the same name
    • before <[String]> hookName，execute before this hook
    • after <[String]> hookName，execute after this hook

Custom Syntax

Markdown.createSyntaxHook( HOOK_NAME, HOOK_TYPE, OPTIONS )

Create a custom syntax hook

parameter	type	description
HOOK_NAME	string	Syntax hook ID, unique
HOOK_TYPE	Markdown.constants.HOOKS_TYPE_LIST	Syntax Hook type, only SEN (inline grammar) and PAR (paragraph grammar) can be selectedhook type, only Sen (inline syntax) and PAR (paragraph syntax) can be selected
OPTIONS	{ Function }	Optional operation

options configuration

parameter	type	description
beforeMakeHtml ( str: string ): string	Function	Lifecycle, returns the replaced string
makeHtml ( str: string, sentenceMakeFunc: Function ): string	Function	Lifecycle, returns the replaced string
afterMakeHtml ( str: string ): string	Function	Lifecycle, returns the replaced string
rule ( ): { reg: RegExp }	Function	Syntax hook matching rule, return an reg member object containing regexp type
test ( str: string ): boolean	Function	Syntax matching operation method. You can customize the matching method

Basic Example

const CustomHook = Markdown.createSyntaxHook(
    'customHook',
    Markdown.constants.HOOKS_TYPE_LIST.PAR,
    {
        makeHtml(str) {
            console.log('hello custom hook');
            return str;
        },
        rule() {
            return { reg: new RegExp() };
        }
    }
);

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: CustomHook
        }
    }
});

Insert before or after the specified hook, only one parameter will take effect, and before takes precedence

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                before: 'codeBlock',
                // after: 'codeBlock'
            }
        }
    }
});

Force overwrite of built-in syntax hook

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                force: true
            }
        }
    }
});

Custom Toolbar

Create a custom menu hook

parameter	type	description
HOOK_NAME	string	Syntax hook ID, unique
OPTIONS	{ Object }	Custom menu configuration

options 配置

parameter	type	description
iconName	String	Icon class name
onClick ( selection: Function )	Function	Callback function when clicked
shortcutKeys	Array	Shortcut key collection is used to register keyboard functions. When the matching shortcut key combination hits, the click function will also be called
subMenuConfig ( name: String iconName： String noIcon: Boolean onClick: Function )	Array	Submenu collection