markdown-it插件实现图片点击放大,markdown-it-linkify-images插件实现给图片加a标签

--- markdown-it插件实现图片点击放大,markdown-it-linkify-images插件实现给图片加a标签。 --- # 简介在渲染markdown出来的html上发现图片显示为固定尺寸，还无法点击放大查看，也就导致无法看清图片细节。这个markdown-it-linkify-images插件能够实现给图片加a标签，并且还能给a标签设置样式。 ## 1. 安装插件 [插件github地址](https://github.com/crookedneighbor/markdown-it-linkify-images#readme) ```language npm install markdown-it-linkify-images --save ``` **先来看下效果：** 使用插件前： ![markdown默认渲染图片.png](http://www.codingyun.com/cloud/articles/20221120/ce3723b3f363c075169ab761d333ef0e.png) 图一：markdown默认渲染图片使用插件后： ![markdown插件渲染后添加a标签.png](http://www.codingyun.com/cloud/articles/20221120/707bc357c6d116d112fe0eae118b3961.png) 图一：markdown插件渲染后添加a标签 ## 2. 使用 ```javascript export default function markdownToHtml(content) { const MarkdownIt = require("markdown-it"); const mili = require('markdown-it-linkify-images'); // With Custom Configuration MarkdownIt.use(mili, { target: '_blank', linkClass: 'custom-link-class', imgClass: 'custom-img-class' }) var html = MarkdownIt.render(content) return html } ``` ## 3. 我的完整代码 ```javascript import mili from "markdown-it-linkify-images"; export default function markdownToHtml(content) { const MarkdownIt = require("markdown-it"); const hljs = require("highlight.js"); const mili = require('markdown-it-linkify-images'); // console.log('content:', content) // console.log( typeof(content) == "string" ) ; // true // console.log( content.constructor === String ) ; // true , String是字符串类 if(content.constructor !== String){ return '' } const md = new MarkdownIt({ html: true, linkify: true, typographer: true, breaks: true, highlight: function(str, lang) { // 当前时间加随机数生成唯一的id标识 var d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); } const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace( /[xy]/g, function(c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == "x" ? r : (r & 0x3) | 0x8).toString(16); } ); // 复制功能主要使用的是 clipboard.js let html = ``; const linesLength = str.split(/\n/).length - 1; // 生成行号 let linesNum = '"; if (lang == null) { lang = "java"; } if (lang && hljs.getLanguage(lang)) { // highlight.js 高亮代码 const preCode = hljs.highlight(lang, str, true).value; html = html + preCode; if (linesLength) { html += '' + lang + ""; } // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "<" 代替，不影响复制功能 return `

${html}${linesNum}

" )}`; } } }) .use(require("markdown-it-sub")) .use(require("markdown-it-sup")) .use(require("markdown-it-mark")) .use(require("markdown-it-abbr")) .use(require("markdown-it-container")) .use(require("markdown-it-deflist")) .use(require("markdown-it-emoji")) .use(require("markdown-it-footnote")) .use(require("markdown-it-ins")) .use(require("markdown-it-katex-external")) .use(require("markdown-it-task-lists")); // With Custom Configuration md.use(mili, { target: '_blank', linkClass: 'custom-link-class', imgClass: 'custom-img-class' }) // 将markdown替换为html标签 return md.render(content); } ```