【シンタックスハイライト】プリズムに加えたツールバーのデザインを調整しました

ホームページなどで、ソースコードを見栄え良く表示するのに便利なのが、シンタックスハイライターです。
最近、Prism.js（プリズムジェイエス）を手動で WordPress（ワードプレス）に導入してみました。

Prism.js にプラグインとして「Show Language」と「Copy to Clipboard Button」を追加したので、ソースコード表示領域にマウスカーソルを合わせると、言語名とコピーボタンが表示されるようになっています。

ただ表示の仕方が揃（そろ）っていなかったので、調整してみました。

Prism.jsのツールバー
必要最低限バージョン
常時表示バージョン
あとがき

Prism.jsのツールバー

Prism.js のツールバーは、標準ではマウスカーソルをソースコード表示領域の上に乗せると表示されます。
ボクの場合、言語名とコピーボタンを表示させてみました。

ただボタンの形が揃っておらず、すき間なく並んでいるので、見栄えが良くありません。
スタイル定義（CSS）で、ボタンのスタイルを調整してみました。

ボタンがソースコード表示領域の下に表示される場合は、CSS の定義が足りていません。
Prism.js では、選んだ言語とプラグインに合わせて、prism.js と prism.css が生成されます。

必要最低限バージョン

必要最低限、見栄えが良くなるように、言語名の表示とコピーボタンの形を揃えて、間隔を空けてみました。

/******************************
 * Prism.js
 *****************************/

div.code-toolbar > .toolbar .toolbar-item {
  margin-right: .5em;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  display: inline-block;
  padding: .1em .8em;
  line-height: normal;
}

div.code-toolbar > .toolbar button {
  cursor: pointer;
}

修正内容：

ツールバーの中に並ぶ項目に、右マージン（0.5em）を付ける。
ツールバーの中に並ぶもの（aタグ, buttonタグ, spanタグ）に、共通のデザインを設定する。
ボタンにマウスカーソルを合わせたら、マウスカーソルの形を変える。

常時表示バージョン

常にツールバーが表示されるようにしてみました。
ツールバーを表示させるのに、マウスカーソルをソースコード表示領域の上に乗せる必要はありません。

/******************************
 * Prism.js
 *****************************/

div.code-toolbar {
  margin-top: 3.2em;
}

div.code-toolbar > pre {
  border-radius: 0 0 .3em .3em / 0 0 .3em .3em;
}

div.code-toolbar > .toolbar {
  display: flex;
  padding: 0 .5em;
  border: solid 1px #ccc;
  border-radius: .3em .3em 0 0 / .3em .3em 0 0;
  background-color: #333;
  opacity: 1;
  justify-content: space-between;
  top: -1.8em;
  right: 0;
  left: 0;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  display: inline-block;
  padding: .1em .8em;
  box-shadow: none;
  background-color: transparent;
  line-height: normal;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar span:hover {
  color: #fff;
}

div.code-toolbar > .toolbar button {
  cursor: pointer;
}

修正内容：