highlight.jsで言語名を表示する方法

はじめに

こんにちは、よっしーです。

このサイトでも使用しているhighlight.js。便利ですよね。

軽くて、手軽で、キレイにコードを描画してくれるとても便利なツールです。

でも、僕は1点だけ不満があるんです。

それは、言語名が表示されないこと。

コードを見たり、前後の文脈見れば、何の言語かはわかるんだけど、どうせだったらかっこよく表示したい。

今回は、CSSをちょっといじるだけで、highlight.jsで言語名を表示する方法を紹介します。
highlight.jsの使い方そのものは、いろんなページで紹介されているので、そちらを参考にしてください。

変更前と変更後

僕が、使っているhighlight.jsのテーマはmonokaiです。それをベースに紹介しますね。

まず始めに、どんな外観に変わるかです。

変更前

変更前

変更後

変更後

結構かわるでしょ。
やっぱり、言語名が表示されているほうが格好いいし、わかりやすいです。

やりかた

コードが表示されている部分をChromeの開発者ツールとかで見てみると、hijsが割り当てられています。その他に、コードの言語名と同じクラスが割り当てられているともいます。先程の画像の例だとhtmlクラスになっています。

この2つのクラスをCSSで編集して、前後に言語名を表示すれば出来上がりです。

たとえば、上の例だとこんな感じのCSSです。

/*hljsの上に言語名の表示領域を作る*/
.hljs:before{
  font-size: 1em; 
  display: block; 
  padding:2px;
  font-weight:bold;
  width:5em;
  margin-top:-8px;
  margin-left:-8px;
  margin-bottom:5px;
  text-align:center;
  font: 700 13px/1.618 ArialMT,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic Pro W3,ヒラギノ角ゴ Pro W3,メイリオ,MS\ Pゴシック,Osaka;
}

/*実際の言語名を表示する*/
/*html用*/
.hljs.html:before{
  content: 'HTML';
  color: white; /*文字色*/
  background: #e54d26;
}

before擬似クラスを使用して、hljshtmlクラスの前に、表示領域を作って、言語名(HTML)を表示します。

あとは、使用する言語ごとにカスタマイズしたら出来上がりです。僕が使っている他の言語のCSSはこんな感じです。

/*JS用*/
.hljs.js:before{
  content: 'JS';
  color: white; /*文字色*/
  background: #eba90c;
}

/*css用*/
.hljs.css:before{
  content: 'CSS';
  color: white; /*文字色*/
  background: #026fb8;
}

/*LESS用*/
.hljs.LESS:before{
  content: 'LESS';
  color: white; /*文字色*/
  background: #026fb8;
}

/*shell用*/
.hljs.shell:before{
  content: 'shell';
  color: white; /*文字色*/
  background: #2660A1;
}

まとめ

いかがでしたでしょうか。highlight.jsを使いながら、ちょっと見栄えの良いコードの表示ができるようになりました。一手間かけることで、ちょっと見栄えが良くなるのっていいですよね。

是非試してみてくださいね。