css渐变实现代码高亮显示代码-html代码-BFW代码库

css渐变实现代码高亮显示代码

代码语言：html

代码描述：css渐变实现代码高亮显示代码，通过override-colors和hsl属性实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@font-face {
  font-family: 'Monaspace';
  src: 
    url('//repo.bfw.wiki/bfwrepo/font/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') 
    format('woff2')
  ;
}

/* light theme */
@font-palette-values --kung-fury {
  font-family: "Monaspace";
  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: "Monaspace";
    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%),  /* .........完整代码请登录后点击上方下载按钮下载查看