代码美化 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 标签的右上角。