代码美化 css 实现 highlight 代码高亮显示语言类型

在实现代码区 macos 菜单样式后，又折腾了语言类型显示功能。

先上代码

.post-content code[class*=language-]::before {  
  content: "代码片断";  
  color: #222d55;  
  font-weight: bold;  
  font-size: 0.9rem;  
  position: absolute;  
  letter-spacing: 0.05rem;  
  text-align: right;  
  right: 20px;  
  top: 8px;  
  z-index: 9;  
}  
.post-content code[class~=language-c]::before {  
  content: "C";  
}  
.post-content code[class~=language-properties]::before {  
  content: "Properties";  
}  
.post-content code[class~=language-python]::before {  
  content: "Python";  
}  
.post-content code[class~=language-nginx]::before {  
  content: "Nginx";  
}  
.post-content code[class~=language-css]::before {  
  content: "CSS";  
}  
.post-content code[class~=language-javascript]::before {  
  content: "Javascript";  
}  
.post-content code[class~=language-js]::before {  
  content: "JS";  
}  
.post-content code[class~=language-typescript]::before {  
  content: "Typescript";  
}  
.post-content code[class~=language-ts]::before {  
  content: "TS";  
}  
.post-content code[class~=language-jsp]::before {  
  content: "JSP";  
}  
.post-content code[class~=language-php]::before {  
  content: "PHP";  
}  
.post-content code[class~=language-lua]::before {  
  content: "Lua";  
}  
.post-content code[class~=language-shell]::before {  
  content: "Shell";  
}  
.post-content code[class~=language-powershell]::before {  
  content: "PowerShell";  
}  
.post-content code[class~=language-flow]::before {  
  content: "Flow";  
}  
.post-content code[class~=language-sequence]::before {  
  content: "Sequence";  
}  
.post-content code[class~=language-sql]::before {  
  content: "SQL";  
}  
.post-content code[class~=language-yaml]::before {  
  content: "YAML";  
}  
.post-content code[class~=language-yml]::before {  
  content: "YML";  
}  
.post-content code[class~=language-ini]::before {  
  content: "ini";  
}  
.post-content code[class~=language-xml]::before {  
  content: "XML";  
}  
.post-content code[class~=language-cs]::before {  
  content: "CS";  
}  
.post-content code[class~=language-cpp]::before {  
  content: "CPP";  
}  
.post-content code[class~=language-java]::before {  
  content: "Java";  
}  
.post-content code[class~=language-html]::before {  
  content: "HTML";  
}  
.post-content code[class~=language-txt]::before {  
  content: "TXT";  
}  
.post-content code[class~=language-md]::before {  
  content: "MD";  
}  
.post-content code[class~=language-markdown]::before {  
  content: "Markdown";  
}  
.post-content code[class~=language-bat]::before {  
  content: "Bat";  
}  
.post-content code[class~=language-json]::before {  
  content: "Json";  
}  
.post-content code[class~=language-groovy]::before {  
  content: "Groovy";  
}  
.post-content code[class~=language-scss]::before {  
  content: "SCSS";  
}  
.post-content code[class~=language-bash]::before {  
  content: "Bash";  
}  
.post-content code[class~=language-cmd]::before {  
  content: "Cmd";  
}  
.post-content code[class~=language-latex]::before {  
  content: "Latex";  
}  
.post-content code[class~=language-zig]::before {  
  content: "Zig";  
}  
.post-content code[class~=language-ssml]::before {  
  content: "SSML";  
}  
.post-content code[class~=language-jsx]::before {  
  content: "JSX";  
}  
.post-content code[class~=language-tsx]::before {  
  content: "TSX";  
}  
.post-content code[class~=language-tsconfig]::before {  
  content: "tsconfig";  
}  
.post-content code[class~=language-git]::before {  
  content: "Git";  
}  
.post-content code[class~=language-csharp]::before {  
  content: "CSharp";  
}  
.post-content code[class~=language-csv]::before {  
  content: "CSV";  
}  
.post-content code[class~=language-cue]::before {  
  content: "cue";  
}  
.post-content code[class~=language-toml]::before {  
  content: "TOML";  
}  
.post-content code[class~=language-kt]::before {  
  content: "kt";  
}  
.post-content code[class~=language-kotlin]::before {  
  content: "Kotlin";  
}  
.post-content code[class~=language-go]::before {  
  content: "Go";  
}  
.post-content code[class~=language-rust]::before {  
  content: "Rust";  
}  
.post-content code[class~=language-regex]::before {  
  content: "Regex";  
}

实现原理是在利用 highlight 插件在美化代码显示时，会自动给pre code 标签上添加 language-xxx 的类，使用 css 正则匹配这一些类型，再通过::before伪类，定位显示在 pre 标签的右上角。