コードブロックのファイル名に言語のアイコンを表示する
コードブロック記法のファイル名にプログラミング言語に応じたアイコンを表示するUserCSS
Nerd fontを使用
他のuserCSSと干渉したせいか、FontAwesomeを使用できなかった
普通の環境ならFontAwesomeを使えるはずです。その時は文字コードを置き換えてください
こんな感じ：
https://gyazo.com/1432febec572317011af1ea67c22eca4
code:style.css
.line span.code-block .code-block-start a::before {
display: inline-block;
}
.line span.code-block .code-block-start title="css" a::before {
content: '\e749';
}
.line span.code-block .code-block-start title="html" a::before {
content: '\f13b';
}
.line span.code-block .code-block-start title="javascript" a::before {
content: '\e74f';
}
.line span.code-block .code-block-start title="typescript" a::before {
content: '\e628';
}
.line span.code-block .code-block-start title="cpp" a::before {
content: '\e61d';
}
.line span.code-block .code-block-start title="c" a::before {
content: '\e61e';
}
.line span.code-block .code-block-start :is(
title="toml",
title="json",
title="yaml"
) a::before {
content: '\e60b';
}
.line span.code-block .code-block-start title="xml" a::before {
content: '\fabf';
}
.line span.code-block .code-block-start title="gitignore" a::before {
content: '\f013';
}
.line span.code-block .code-block-start title="markdown" a::before {
content: '\e73e';
}
.line span.code-block .code-block-start title="txt" a::before {
content: '\e612';
}
.line span.code-block .code-block-start title="csv" a::before {
content: '\f0ce';
}
.line span.code-block .code-block-start :is(
title="fish",
title="bash",
title="zsh"
) a::before {
content: '\f489';
}
.line span.code-block .code-block-start title="dos" a::before {
content: '\e629';
}
UserCSS.icon