扩展代码块语法

扩展代码块语言

例子

new Cherry({
    id: 'markdown-container', 
    syntax: {
      codeBlock: {
        customRenderer: {
          // 自定义语法渲染器
          myRenderer1: {
            render: (src, sign, cherryEnding)=> {
              return `<p class="my-render">${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}`);} },
        ],
      },
    },
});

效果：