markdown - 在 vuejs 上自定义 markdown 解析
问题描述
我在使用 libarymarkdown-it
和 parse markdown-it 时遇到问题。我希望我的 formatText\\my_text\\
可以更改为斜体。基于 markdown-it 当文本想要更改斜体时使用*italicized text*
。\\my_text\\
使用库markdown-it或解析其他多种格式的文本时,如何更改文本的格式我的意思是解析为斜体
//my code markdown-it , use mixin vue
const MarkdownIt = require('markdown-it')
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true
});
export default {
methods: {
marked(payload: string): string {
if (payload) return this.parse(md.render(payload));
return "";
},
parse(payload: string, type: any = "") {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(payload, "text/html");
const links = htmlDoc.querySelectorAll("a");
links.forEach(link => {
link.setAttribute("target", "_blank");
link.classList.add(
"hover:underline",
"hover:text-orange",
"text-indigo-200"
);
});
if (type === "commentTask") {
const divs = htmlDoc.querySelectorAll(
".phabricator-remarkup-embed-layout-link"
);
divs.forEach(div => {
const url = div.attributes.item(0)?.value;
div.classList.add("border", "border-red-300", "p-2", "w-72", "mt-2");
const spans = div.querySelectorAll(
".phabricator-remarkup-embed-layout-name"
);
spans.forEach(span => {
const newA = htmlDoc.createElement("a");
newA.classList.add("hover:text-orange", "mr-1", "pr-1");
newA.innerHTML = span.innerHTML;
newA.setAttribute("href", url as string);
newA.setAttribute("target", "_blank");
span.innerHTML = "";
span.appendChild(newA);
});
const as = div.querySelectorAll(
".phabricator-remarkup-embed-layout-download"
);
as.forEach(a => {
a.classList.add("ml-2");
a.removeAttribute("target");
});
});
}
return htmlDoc.documentElement.innerHTML;
}
}
};
<!-- my code use vueJS, Vuejs mixins-->
<div
id="vue-html"
class="text-sm p-4 overflow-y-auto text-black border-2 mt-3"
style="max-height: 30rem"
v-html="marked(data)"
/>
解决方案
你不能用*替换\\吗?
marked(payload: string): string {
if (payload) return this.parse(md.render(payload.replace(/\\\\/g, '*')));
return "";
}
推荐阅读
- php - PHP - 在 mysqli 查询中使用数组
- git - Git状态命令-未跟踪文件下的整台计算机
- spring - Spring Security HTTP 403 禁止
- javascript - 在 html 表单上提交打开模式,将数据传递给他
- c# - 通过命令行c#运行测试用例
- swift - 如何将数据插入此字典 - Swift 4
- javascript - $slider.css({'transform' : 'translateY(' + (-$height * $counter) + 'px)'})
- codeigniter - 如何在更改事件下拉列表中添加前缀代码
- google-sheets - Google 表格 IF、ISNUMBER、SUM 公式
- r - 替换变量中的一些元素