〇×〇站

个人博客,佛系更新

Vue配置marked链接添加target="_blank"

  • Pluto
  • 2023-04-27 17:08:50
  • 33
  • 转自https://segmentfault.com/a/1190000019809780

    1. 引入marked

    package.json

    "dependencies": {
        "marked": "^0.3.9"
    }
    
    import marked from "marked";
    

    2. 修改生成的HTML的方法

    const renderer = new marked.Renderer();
    //https://github.com/markedjs/marked/issues/655#issuecomment-383226346
    const linkRenderer = renderer.link;
    renderer.link = (href, title, text) => {
        const html = linkRenderer.call(renderer, href, title, text);
        return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ');
    };
    const html = marked(markdown, { renderer });
    

    Tips:marked参数配置

    const renderer = new marked.Renderer();
    //基本设置
    marked.setOptions({
        renderer: renderer,
        gfm: true, //允许 Git Hub标准的markdown.
        tables: true, //允许支持表格语法(该选项要求 gfm 为true)
        breaks: true, //允许回车换行(该选项要求 gfm 为true)
        pedantic: false, //不纠正原始模型任何的不良行为和错误(默认为false)
        sanitize: false, //对输出进行过滤(清理),将忽略任何已经输入的html代码(标签)
        smartLists: true, //使用比原生markdown更时髦的列表
        smartypants: false //使用更为时髦的标点
    });
    
    分类:
  • 代码
  • 标签:
  • vue