cssの擬似クラスを使用してhtmlコードブロックにコード種類を追加
5430 ワード
前言
以前からvueドキュメントでこのような効果を見ていたのですが、コードブロックの右上隅にコード種別(javaascript,cssなど)が表示されていて、下図のようにちょうど最近自分が練習している項目をmarkdownに使うようになったので、この機能の実現を少し検討しました.
インプリメンテーション
css部分
css 3には擬似クラスbefore,afterが新たに追加された.ここでcontentはattr()メソッドを呼び出すことによって、ある擬似クラスが属するdom要素の属性値を取得することができる.
例を挙げる
次のような効果が得られます
htmlタグの属性classをattr関数で得たので,domの属性data-languageに言語種を保存することができる.
js
私が使っているのは
このようなmarkdownテキストは、
以前からvueドキュメントでこのような効果を見ていたのですが、コードブロックの右上隅にコード種別(javaascript,cssなど)が表示されていて、下図のようにちょうど最近自分が練習している項目をmarkdownに使うようになったので、この機能の実現を少し検討しました.
インプリメンテーション
css部分
css 3には擬似クラスbefore,afterが新たに追加された.ここでcontentはattr()メソッドを呼び出すことによって、ある擬似クラスが属するdom要素の属性値を取得することができる.
例を挙げる
<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>Documenttitle>
<style>
.test::after {
content: attr(class)
}
style>
head>
<body>
<div class="test">div>
body>
html>
次のような効果が得られます
htmlタグの属性classをattr関数で得たので,domの属性data-languageに言語種を保存することができる.
js
私が使っているのは
remarkableライブラリで、markdownをhtmlに変換することができます.例を挙げる"```
let a = 1;
let b = 3;
```"
このようなmarkdownテキストは、
remarkableインスタンスのrenderを使用すると次の文字列を返します."language-javascript">
"hljs-keyword">let a = "hljs-number">1;
"hljs-keyword">let b = "hljs-number">3;
では、data-languageプロパティをどのように しますか. は にすぎないので、 を して を き えることができます.const reg = /([\w\W]*?)/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]*?)/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 サイトのやり はもっと で、 のやり は し ですが、もっと になります. なやり はやはり なシーンによって まる があります.