markdown-it 重定义渲染规则

ゞ浴缸里的玫瑰 2022-04-23 14:46 520阅读 0赞

[使用 markdown-it 解析 markdown 代码][markdown-it _ markdown]  
从这篇文章中了解到 markdown-it 解析 markdown 代码的过程，了解“token”和渲染规则

// add target="_blank" to all link
    var defaultRender = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) {
        return self.renderToken(tokens, idx, options);
    };
    markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) {
        // 获取属性target的索引号，如果小于0说明没有该属性
        var aIndex = tokens[idx].attrIndex('target');
    
        if (aIndex < 0) {
            tokens[idx].attrPush(['target', '_blank']); // add new attribute
        } else {
            //attrs:获取该标签的属性名及值，["target", "_blank"]
            tokens[idx].attrs[aIndex][1] = '_blank';    // replace value of existing attr
        }
        //另外token还有以下方法：
        //tokens[idx].attrGet=function(name){}
        //tokens[idx].attrSet=function(name,value){}
        //tokens[idx].attrJoin=function(name,value){}
    
        //idx:link_open的token在tokens数组的索引值
        //options就是一些初始化markdown-it的配置项
        //self就是Renderer对象，有rules属性，还有好多方法，打印可以查看rules里的属性和方法
    
        // pass token to default renderer.
        return defaultRender(tokens, idx, options, env, self);
    };

每一种渲染规则参数都不一样，在控制台打印rules  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
可以点击圈中的文件查看渲染规则。  
欢迎交流。。

[markdown-it _ markdown]: https://www.jianshu.com/p/a95c04a68d14
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220307/44ef7df51cf8447aab4b6c2739dc05db.png