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

その他 インターネット
この記事は約6分で読めます。

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

【ワードプレス】プリズムを手動で導入して、ソースコードをハイライト表示させる
これまで WordPress(ワードプレス)の投稿の中で表示する、ソースコードのシンタックスハイライト表示は、highlight.js(ハイライト ジェイエス)を使ってきました。なぜなら WordPress に導入しているテーマ「Cocoon(コクーン)」に、組み込まれていたからです。た...

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

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

スポンサーリンク

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;
}

修正内容:

  • ツールバー用に上マージンを取る。
  • ソースコード表示領域の下側の角だけを丸くする(0.3em)。
  • ツールバーの中に含まれる項目を flex で、両側(space-between)に表示させる。
  • ツールバーの左右にパディング(0.5em)を設定する。
  • ソースコード表示領域のデザインに合わせて、ツールバーにボーダーを引き、上側の角だけを丸くする(0.3em)。
  • ツールバーの背景色を黒っぽい色(#333)にして、見えるようにする(opacity: 1)。
  • ツールバーをソースコード表示領域の上に乗せて、左右に広げる。
  • ツールバーの中に並ぶもの(aタグ, buttonタグ, spanタグ)に、共通のデザインを設定する。
  • ツールバーの中に並ぶもの(aタグ, buttonタグ, spanタグ)の影を消して、背景色を透明にする。
  • ツールバーのボタンなどにマウスカーソルを乗せたとき、文字色を白色(#fff)にする。
  • ボタンにマウスカーソルを合わせたら、マウスカーソルの形を変える。

あとがき

はじめて Prism.js を導入したときから、ツールバーのボタンの表示が気になっていました。
とりあえず見やすい感じに修正できて良かったです。

日曜大工

なおスタイル定義(CSS)は、ほぼ必要最低限のことしか記述していません。
好みのデザインにするには、スタイル定義(CSS)を変更する必要があります。

コメント

タイトルとURLをコピーしました