setting:コードブロックにアイコン

#UserCSS

問題

issue:Scrapboxで外部のフォントを使えない

import元を修正したが

Deviconsは無理そう

設定

CSS:フォントの追加を参照

Devicons

Font Awesome

code:style.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

code: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;

}

code:test.zsh

code: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

code:test.css

code:style.css

.line span.code-block .code-block-start title="css":before {

font: var(--fa-font-brands);

content: '\f38b ';

}

HTML

code:test.html

code:style.css

.line span.code-block .code-block-start title="html":before {

font: var(--fa-font-brands);

content: '\f13b ';

}

JavaScript

code:test.js

code:style.css

.line span.code-block .code-block-start title="javascript":before {

font: var(--fa-font-brands);

content: '\f3b9 ';

}

辞書

json, yaml, toml

code:test.json

code: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

code:test.gitignore

code:style.css

.line span.code-block .code-block-start title="gitignore":before {

font: var(--fa-font-brands);

content: '\f841 ';

}

Markdown

code:test.md

code:style.css

.line span.code-block .code-block-start title="markdown":before {

font: var(--fa-font-brands);

content: '\f60f ';

}

Haskell

code:test.hs

code:style.css

.line span.code-block .code-block-start title="haskell":before {

font: var(--fa-font-solid);

content: '\f121 ';

}

Rust

code:test.rs

code:style.css

.line span.code-block .code-block-start title="rust":before {

font: var(--fa-font-brands);

content: '\e07a ';

}

signature

code:test.sig

code: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入りのフォントをアップロードして使ってた