前端展示代码块时 除了关键字外其他的不高亮是怎么回事?
highlight.js里面的代码发出来看看。
这个不是不高亮,应该是你选择的主题就是这样的吧
markdownToHtml(article) {
const MarkdownIt = require("markdown-it");
const hljs = require("highlight.js");
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: 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 = `<button class="copy-btn iconfont iconfuzhi" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}"></button>`;
const linesLength = str.split(/\n/).length - 1;
// 生成行号
let linesNum = '<span aria-hidden="true" class="line-numbers-rows">';
for (let index = 0; index < linesLength; index++) {
linesNum = linesNum + "<span></span>";
}
linesNum += "</span>";
if (lang && hljs.getLanguage(lang)) {
// highlight.js 高亮代码
const preCode = hljs.highlight(lang, str, true).value;
html = html + preCode;
if (linesLength) {
html += '<b class="name">' + lang + "</b>";
}
// 将代码包裹在 textarea 中,由于防止textarea渲染出现问题,这里将 "<" 用 "<" 代替,不影响复制功能
return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(
/<\/textarea>/g,
"</textarea>"
)}</textarea>`;
}
}
});
// 将markdown替换为html标签
article.articleContent = md.render(article.articleContent);
this.article = article;
},
您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632