前言
之前就在vue文档中看到这样的效果,在代码块的右上角会显示代码种类(javaascript, css等),如下图所示
刚好最近自己在做一个练手的项目要使用到markdown, 所以就稍微研究了下这个功能的实现。实现
css部分
css3中新增加了伪类before,after。其中content可以通过调用attr() 方法获取到某个伪类所属dom元素的属性值。
举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.test::after {
content: attr(class)
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
复制代码
我们可以得到如下效果
我们通过attr函数得到了html标签的属性class,因此我们可以把语言种类保存到 dom中的属性data-language中。js
我使用的是remarkable
库,可以将一段markdown转换成一段html。
举个例子
"```
let a = 1;
let b = 3;
```"
复制代码
这样的一段markdown文本,使用remarkable
实例中的render后会返回如下字符串
<pre><code class="language-javascript">
<span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;
<span class="hljs-keyword">let</span> b = <span class="hljs-number">3</span>;
</code></pre>
复制代码
那么怎样添加data-language 属性呢,因为现在只是一段字符串,我们可以使用正则表达式来对字符串进行替换。
const reg = /(<code class="language-)([a-z]+)"(>[\w\W]*?<\/code>)/g;
const result = hljsMarkdown.replace(reg, (match, p1, p2, p3) => {
return [p1, p2, `" data-language="${p2}"`, p3].join('');
});
复制代码
hljsMarkdown 是使用remarkable 转译得到的html字符串就是上面一段的markdown字符串,通过replace方法可以在class后面添加data-language 自定义属性。使用replace方法后可以得到result
将你得到的这段字符串插入到你需要展示markdown的容器dom中,即可。
结果
css
.markdown-body code::after {
position: absolute;
top: 0;
right: 10px;
font-size: 1rem;
font-weight: bold;
content: attr(data-language);
}
复制代码
js
let hljsMarkdown = md.render(content);
const reg = /(<code class="language-)([a-z]+)"(>[\w\W]*?<\/code>)/g;
const result = hljsMarkdown.replace(reg, (match, p1, p2, p3) => {
return [p1, p2, `" data-language="${p2}"`, p3].join('');
}); // result 带有data-language 属性的dom字符串。
复制代码