下載並設定 Code HTML <code> 字型
<style>
@font-face {
font-family: 'FontWithASyntaxHighlighter';
src:
url('./FontWithASyntaxHighlighter-Regular.woff2')
format('woff2')
;
}
code {
font-family: "FontWithASyntaxHighlighter", monospace !important;
font-palette: --kung-fury;
}
</style>
結果測試
@keyframes rounded-mask-reveal {
from {
clip-path: inset(10% 10% 10% 10% round 30px);
}
to {
clip-path: inset(0% 0% 0% 0% round 30px);
}
}
video {
animation: rounded-mask-reveal linear both;
animation-timeline: view();
animation-range: cover 0% cover 50%;
}
在內文中也可以用直接用 <code> 去將語法做 Hightlight，像是 function rad() {} 還是 a { color: red; }
<code>function rad() {}</code>
<code>a { color: red; }</code>
修改原始樣式顏色
/* light theme */
@font-palette-values --kung-fury {
font-family: "FontWithASyntaxHighlighter";
override-colors:
0 hsl(225 100% 40%), /* curlies and tags */
1 hsl(250 100% 80%), /* ? */
2 hsl(225 100% 40%), /* function */
3 hsl(225 100% 40%), /* ? */
4 hsl(270 50% 40%), /* () */
5 hsl(210 40% 2%), /* property name */
6 hsl(210 10% 30%), /* ? */
7 hsl(327 100% 54%) /* numbers */
;
}
@media (prefers-color-scheme: dark) {
@font-palette-values --kung-fury {
font-family: "FontWithASyntaxHighlighter";
override-colors:
0 hsl(188 100% 75%), /* curlies and tags */
1 hsl(250 100% 80%), /* ? */
2 hsl(188 100% 75%), /* function */
3 hsl(188 100% 75%), /* ? */
4 hsl(250 100% 80%), /* () */
5 hsl(210 40% 98%), /* property name */
6 hsl(210 40% 80%), /* ? */
7 hsl(300 100% 80%) /* numbers */
;
}
}