使用css的伪类给html代码块添加代码种类

最新推荐文章于 2024-07-27 10:32:57 发布

weixin_34082695

最新推荐文章于 2024-07-27 10:32:57 发布

阅读量955

点赞数

文章标签： markdown javascript ViewUI

原文链接：https://juejin.im/post/5b67cb27e51d45190c1909bf

版权

前言

之前就在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字符串。
复制代码

最终效果

对比

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

weixin_34082695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css的伪类给html代码块添加代码种类

前言之前就在vue文档中看到这样的效果，在代码块的右上角会显示代码种类（javaascript， css等），如下图所示刚好最近自己在做一个练手的项目要使用到markdown，所以就稍微研究了下这个功能的实现。实现css部分css3中新增加了伪类before，after。其中content可以通过调用attr() 方法获取到某个伪类所属dom元素的属性值。举个例子&lt;!...
复制链接

扫一扫