/**
 * 渲染解析书签
 */
async function render() {

    // 获取符合条件的 code 标签
    let elements = getElementWithoutCustomf_wz();

    // 正则表达式： '(#(.*?)[|](.*?)#){1,1}?([\(](#?[\\d\\w]+)(!)?[\)])?' 
    let simplePatt = new RegExp(config.theme.regs.wz);
    

    for(let e of elements){
       
        let oldHTML =e.innerHTML;
        // 处理 `#微章标题|微章内容#(颜色名称!)` 其中 ()
        if (simplePatt.test(oldHTML)){

            // let parseInfo = new ParseInfo(
            //     RegExp.$1,  // 微章标题
            //     RegExp.$2,  // 微章内容
            //     RegExp.$3,  // (颜色名称!) <可为空>, 这个不需要，主要用于调试和测试
            //     RegExp.$4,  // 颜色名称 <可为空>
            //     RegExp.$5   // ! <可为空>
            // )

            // #测试|efabcd#(#efabcd!)
            let parseInfo = new ParseInfo(
                // RegExp.$1, // #微章标题|微章内容#
                RegExp.$2,    // 微章标题
                RegExp.$3,    // 微章内容
                RegExp.$4,    // (颜色名称!) <可为空>, 这个不需要，主要用于调试和测试
                RegExp.$5,    // 颜色名称 <可为空>
                RegExp.$6     // ! <可为空>
            )

            if (!empty(parseInfo.wzTitle+parseInfo.wzMsg) && e.className!=='custom-codelabel-wz'){   
                
                let wz = new WzStyleInfo();

                e.className += 'custom-codelabel-wz'
                e.innerHTML = '<span>'+oldHTML +'</span>'
                e.setAttribute("custom-codelabel-wz-title",parseInfo.wzTitle)
                e.setAttribute("custom-codelabel-wz-msg",parseInfo.wzMsg)

                // 这个函数就是解析颜色，设置 wz.bgcolor 等的值
                wz.rerender(parseInfo.wzColor,parseInfo.wzEndsuffix)

                e.style ="--theme-wz-bgcolor: "+wz.bgcolor
                       +";--theme-wz-title-color:"+wz.titlecolor+";"
                       +";--theme-wz-msg-color:"+wz.msgcolor+";"
                       +";--theme-wz-msg-bgcolor:"+wz.msgbgcolor+";"
            }

        }
    }

}

// 对应的 css
/* ****************** custom-codelabel-wz *******************/
.protyle-wysiwyg *[data-node-id] :not([custom-f~=wz]) code.custom-codelabel-wz {
    /* background-color: #2aa899;   */
    background-color: var(--theme-wz-bgcolor);  
    padding: 5px;
    border-radius: 3px;
}

.protyle-wysiwyg *[data-node-id] .custom-codelabel-wz span{
    display: none;  
}

.protyle-wysiwyg *[data-node-id] .custom-codelabel-wz::before{
    color: var(--theme-wz-title-color);
    content: attr(custom-codelabel-wz-title);
    padding-right: 3px;
}

.protyle-wysiwyg *[data-node-id] .custom-codelabel-wz::after{
    /* color: #1f2e3b;  */
    color: var(--theme-wz-msg-color); 
    background-color: var(--theme-wz-msg-bgcolor);
    content: attr(custom-codelabel-wz-msg);
    padding: 3px;
    border-radius: 3px;
}