扩展代码块语法

自定义代码块高亮规则

cherry默认使用prism进行代码高亮，如果cherry自带的prism（及其引入的扩展）不满足业务需求，可以自定义高亮规则

例子

new Cherry({
    id: 'markdown-container', 
    syntax: {
      codeBlock: {
        customRenderer: {
          // 自定义高亮规则
          highlighter: (src, sign, cherryEngine) => {
            return `<p class="my-highlighter">${src}</p>`;
          },
        },
      },
    },
});

效果：

扩展代码块语言

例子

new Cherry({
    id: 'markdown-container', 
    syntax: {
      codeBlock: {
        customRenderer: {
          // 自定义语法渲染器
          myRenderer1: {
            render: (src, sign, cherryEngine)=> {
              return `<p class="my-render">${src}</p>`;
            }
          },
          // “all”是特殊关键字，表示自定义渲染所有代码块语言
          //all: {
          //  render: (src, sign, cherryEngine, lang)=> {
          //    return `<p class="${lang}">${src}</p>`;
          //  }
          }
        },
      },
    },
});

效果：

解释上述例子

• myRenderer1是语法的名字
• render是对应的渲染逻辑，参数解释：
  1. src是代码块里的源码
  2. sign是代码块的签名，可以根据sign做缓存，sign不变，则可认为内容没变，直接返回缓存内容
  3. cherryEngine是cherry解析引擎的对象，可以用cherryEngine.md5(src)来获取src对应的sign

扩展代码块悬浮按钮

例子

new Cherry({
    id: 'markdown-container', 
    syntax: {
      codeBlock: {
        lineNumber: true, // 默认显示行号
        expandCode: true, // 当代码行数大于10行时，自动折叠代码块
        copyCode: true, // 显示复制代码块的按钮
        editCode: true, // 显示编辑代码块的按钮
        changeLang: true, // 显示切换语言的按钮
        customBtns: [
          { html: '自定义按钮1', onClick: (event, code, lang)=>{console.log(`【${lang}】: ${code}`);} },
          { html: '自定义按钮2', onClick: (event, code, lang)=>{console.log(`【${lang}】: ${code}`);} },
        ],
      },
    },
});

效果：