/dragoon8192-main/setting:コードブロックにアイコン

generated at 2/12/2025, 11:34:15 PM
setting:コードブロックにアイコン
#UserCSS
問題
issue:Scrapboxで外部のフォントを使えない
import元を修正したが
Deviconsは無理そう
設定
CSS:フォントの追加を参照
Devicons
Font Awesome
style.css@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
style.css.line span.code-block .code-block-start [title]:before {
    text-decoration: none !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
    font-weight: 400;
    display: inline-block;
 }
sh
test.zsh
style.css.line span.code-block .code-block-start [title="fish"]:before,
.line span.code-block .code-block-start [title="bash"]:before,
.line span.code-block .code-block-start [title="zsh"]:before,
.line span.code-block .code-block-start [title="sh"]:before,
.line span.code-block .code-block-start [title="terminal"]:before {
    font: var(--fa-font-solid);
    content: '\f120 ';
}
css
test.css
style.css.line span.code-block .code-block-start [title="css"]:before {
    font: var(--fa-font-brands);
    content: '\f38b ';
}
HTML
test.html
style.css.line span.code-block .code-block-start [title="html"]:before {
    font: var(--fa-font-brands);
    content: '\f13b ';
}
JavaScript
test.js
style.css.line span.code-block .code-block-start [title="javascript"]:before {
    font: var(--fa-font-brands);
    content: '\f3b9 ';
}
辞書
json, yaml, toml
test.json
style.css.line span.code-block .code-block-start [title="toml"]:before,
.line span.code-block .code-block-start [title="json"]:before,
.line span.code-block .code-block-start [title="yaml"]:before {
    font: var(--fa-font-solid);
    content: '\f1de ';
}
Git
test.gitignore
style.css.line span.code-block .code-block-start [title="gitignore"]:before {
    font: var(--fa-font-brands);
    content: '\f841 ';
}
Markdown
test.md
style.css.line span.code-block .code-block-start [title="markdown"]:before {
    font: var(--fa-font-brands);
    content: '\f60f ';
}
Haskell
test.hs
style.css.line span.code-block .code-block-start [title="haskell"]:before {
    font: var(--fa-font-solid);
    content: '\f121 ';
}
Rust
test.rs
style.css.line span.code-block .code-block-start [title="rust"]:before {
    font: var(--fa-font-brands);
    content: '\e07a ';
}
signature
test.sig
style.css.line span.code-block .code-block-start [title="sig"]:before {
    font: var(--fa-font-solid);
    content: '\f233 ';
}
更新
2024/2/17
Deviconsを取り除いてFont Awesomeに統一
2021/5/28
 a::before から :before に
無名のときに対応
スペースに気をつける
参考
/customize/コードブロックのファイル名に言語のアイコンを表示する
この人はnerdfont入りのフォントをアップロードして使ってた