シンタックスハイライトライブラリ「highlight.js」CSS カスタマイズ

2019年02月01日

jQuery不要の軽量コードハイライト「highlight.js」はとても便利ですが、殺風景な感じだったので、左上に言語を出カするようにしようかと思います。
ソースコードごとの言語を出すようにするとわかりやすくなるので、左上に言語の種類を表示するようにCSSを書いていきます。
＊highlight.jsの標準機能にはありません

変更前

変更後　言語PHPがパープルで左上表示に

Googleデベロッパーツールで確認すると、　「.hljs」が付与されているので、.hljsと、言語ごとのクラス名をつけます
.php (言語ごとのクラス名)だけで心配なら .php.hljs (言語ごとのクラス名プラス.hljs)まで指定し、::before擬似クラスを使います。


.hljs {
  position: relative;
  padding: 40px 12px 12px;
}
.hljs::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  color: #fff;
  font-weight: bold;
  padding: 1px 7px;
}
.hljs.html::before {
  content: 'HTML';
  background-color: #006eb9;
}
.hljs.css::before {
  content: 'CSS';
  background-color: #e44d26;
}
.hljs.javascript::before {
  content: 'JavaScript';
  background-color: #DBCC33;
}
.hljs.php::before {
  content: 'PHP';
  background-color: #8D78E9;
}
.hljs.sql::before {
  content: 'SQL';
  background-color: #E68EC7;
}