WEBサイトでコードをシンタックス・ハイライトするなら「highlight.js」がおすすめです。
👉 highlight.js 
「スタイル」と呼ばれるきれいなテーマが今では 246個 もあるようです。
Androidアプリ向けIDE「AndroidStudio」というスタイルも登場していました。
ダークなほうの「Darcula」ですね、これ。
その他、いくつかメジャーどころを貼っておきます。
使い方
HTMLヘッダーの中に表示したいスタイル「androidstudio」のCSSファイルと、プログラミング言語を認識するJavaScriptファイルについて記述しておきます。
<link rel="stylesheet" href="/path/to/styles/androidstudio.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code class="language-kotlin"> ~ </code></pre> 内にコードを差し込みます。
言語はここで指定しなくても自動検出してくれるようですが、短いコードなどもあるので、念のため記述しておいたほうが良いでしょう。
実体参照にエスケープしたコードを以下のように差し込み貼り付けます。
<pre><code class="language-kotlin">
import kotlinx.serialization.Serializable
import kotlin.random.Random
interface Building
@Serializable
class House(
private val rooms: Int? = 3,
val name: String = "Palace"
) : Building {
var residents: Int = 4
get() {
println("Current residents: $field")
return field
}
fun burn(evacuation: (people: Int) -> Boolean) {
rooms ?: return
if (evacuation((0..residents).random()))
residents = 0
}
}
fun main() {
val house = House(name = "Skyscraper 1")
house.burn {
Random.nextBoolean()
}
}
</code></pre>
👉 【macOS】コピーしているテキストをHTMLエスケープする 
ブラウザでアクセスすると以下のように表示されています。
import kotlinx.serialization.Serializable
import kotlin.random.Random
interface Building
@Serializable
class House(
private val rooms: Int? = 3,
val name: String = "Palace"
) : Building {
var residents: Int = 4
get() {
println("Current residents: $field")
return field
}
fun burn(evacuation: (people: Int) -> Boolean) {
rooms ?: return
if (evacuation((0..residents).random()))
residents = 0
}
}
fun main() {
val house = House(name = "Skyscraper 1")
house.burn {
Random.nextBoolean()
}
}
👉 How to use highlight.js 
このサイトでも使っていましたが6年ぶりに更新してみましたので 🙆
