Vue如何配置marked鏈接添加target="_blank"

這篇文章將為大家詳細講解有關Vue如何配置marked鏈接添加target="_blank"，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1."引入marked

package.json

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

1.修改生成的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" ');
};
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 //使用更為時髦的標點
});

ps：vue實現類似target="_blank"打開新窗口

//href的{}不能少
let {href} = this.$router.resolve({path:'/applySocSecCard'});
window.open(href, '_blank');

關于“Vue如何配置marked鏈接添加target="_blank"”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。