1. highlight.jsのstyleを変更

highlight.jsを使用してコードのハイライト機能を使用しています。

背景色が白っぽくて野暮ったい見た目だったのでstyleを変更してみます。もちろん背景色をダークカラーにして引き締まった印象のデザインにします。

styleを変更する方法を調べました。結果、方法は簡単なものでした。

2. 参照するcssを変更するだけ

変更するには参照するcssを変更するだけです。

変更前.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
変更後.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/agate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>

1行目の

  • githhub.min.css を

  • agate.min.css に変更

しただけです。

これだけでスタイルが変更されます。このページのスタイルは変更済みでダークカラーの背景色で引き締まっていてカッコイイ。

3. まとめ

簡単にstyleを変更できました。

今回は以上です。