はじめに
このブログではWP Code Higlight.js(WordPressでhiglight.jsを利用するプラグイン)を利用してソースコードを表示しているのですが、ソースコード部分に拡張子を表示させるようにCSSをカスタマイズしたのでそのやり方について共有します。
今回やろうとしていること
ブログのテーマにはスワローを利用しています。公式ドキュメントを見るとソースコードの拡張子名が表示されているデザインがありました。(正確には同じオープンケージ社が出しているストークのドキュメントですがスワローはストークと互換性があるのでスワローのドキュメントと言っています。)
該当の公式ページはこちら
![](https://i0.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット-2018-01-30-0.07.31.png?resize=754%2C274)
テーマのデモページなのでショートコードが用意されているのかと思ったのですが、どうやらこれはオープンケージ社が独自にカスタマイズしたものらしいです。(テーマのデフォルトにはない機能でテーマのデモページ作るのってどうなのと若干思いましたが。。)
本来であれば以下のようになります。
![](https://i1.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット-2018-01-30-0.09.16.png?resize=797%2C291)
今回は左上に拡張子をつけるようにCSSをカスタマイズしたいと思います。
拡張子部分のソースコードを実際にみてみる
開発ツールを利用してソースコードを表示してみます。
![](https://i1.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット_2018-01-29_23_00_38.png?resize=800%2C381)
higlight.jsを利用するとhljs
というクラスがソースコード部分に付与されていることがわかります。そしてhljs
クラスに擬似要素の:before
を適用していることがわかります。そしてそのbeforeが拡張子部分ということがわかります。CODE/TEXT
の部分はHTML上に書かれているのではなくCSSに書かれているようです。
自分のテーマに反映させて見る
開発ツールで確認したCSSを参考にWordPressの管理画面からstyle.cssを編集します。拡張子を表示しているラベルみたいなデザインは親要素にposition: relative
、子要素にposition: absolute
を付与することで実現しているようです。
.entry-content code { position: relative; } .entry-content .hljs:before{ font-size: .8em; font-weight: bold; padding: .1em 1em; background: #ce2c2c; color: #fff; position: absolute; top:0; left:0; }
これで以下のようになります。
![](https://i0.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット-2018-01-30-0.06.43.png?resize=793%2C293)
しかし、これだとソースコードの部分が重なっているので修正します。
.entry-content .hljs { padding: 2em 0.8em 0.8em; }
paddingを入れることで余白部分ができたので以下のように修正できました。
![](https://i1.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット-2018-01-30-0.04.21.png?resize=796%2C309)
拡張子を動的に変更させてみる
上記のままだと全てのソースコード常に「CODE/TEXT」というラベルが表示されてしまいます。ソースコードを確認するとhiglight.jsではhljs
クラスに加えて、ハイライトする言語ごとにクラスが動的に付与されます。よくみてみるとhljs bash
とクラスが指定されています
![](https://i1.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット_2018-01-29_23_00_38.png?resize=800%2C381)
ですので、content
を削除し、各言語ごとに上書きするようにします。
.entry-content .hljs:before{ font-size: .8em; font-weight: bold; padding: .1em 1em; background: #ce2c2c; color: #fff; position: absolute; top:0; left:0; } .entry-content .hljs.ruby:before{ content: 'RUBY'; } .entry-content .hljs.css:before{ content: 'CSS'; } .entry-content .hljs.html:before{ content: 'HTML'; } .entry-content .hljs.bash:before{ content: 'CODE/TEXT'; }
これで例えばrubyのソースコードを載せれば以下のようにRUBYと表示されるようになります。
![](https://i1.wp.com/nishinatoshiharu.com/wp-content/uploads/2018/01/スクリーンショット-2018-01-30-0.04.14.png?resize=796%2C394)
まとめ
以上でソースコード部分のカスタマイズの説明を終わります。一応デザインはできたのですが本来やりたいことはQiitaのようにソースコードのファイル名を動的に表示させることです。
デザインを作ってはみたものの、毎回異なるファイル名を記述するのは難しそうなので違う方法を考えたいと思います。