前言

之前就在vue文档中看到这样的效果，在代码块的右上角会显示代码种类（javaascript， css等），如下图所示

刚好最近自己在做一个练手的项目要使用到markdown，所以就稍微研究了下这个功能的实现。

实现

css部分

css3中新增加了伪类before，after。其中content可以通过调用attr() 方法获取到某个伪类所属dom元素的属性值。

举个例子

  
      
      
      Document    
    
复制代码

我们可以得到如下效果

我们通过attr函数得到了html标签的属性class，因此我们可以把语言种类保存到 dom中的属性data-language中。

js

我使用的是remarkable库，可以将一段markdown转换成一段html。

举个例子

"```let a = 1;let b = 3;```"复制代码

这样的一段markdown文本，使用remarkable 实例中的render后会返回如下字符串

let a = 1;let b = 3;
复制代码

那么怎样添加data-language 属性呢，因为现在只是一段字符串，我们可以使用正则表达式来对字符串进行替换。

const reg = /([\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 = /([\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字符串。复制代码

最终效果

对比

看了下vue官网实现方法，是通过把内容写死直接在伪类中渲染，在vue文档中的场景中，只需要写js，css，html这是一个很好的方法。相比来说，vue官网的做法更简单，我的做法会稍微复杂但是会更加灵活。最终的做法还是需要根据具体的场景决定。