highlight.js に「AndroidStudio」スタイルが登場してた件

WEBサイトでコードをシンタックス・ハイライトするなら「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 = &quot;Palace&quot;
) : Building {
    var residents: Int = 4
        get() {
            println(&quot;Current residents: $field&quot;)
            return field
        }

    fun burn(evacuation: (people: Int) -&gt; Boolean) {
        rooms ?: return
        if (evacuation((0..residents).random()))
            residents = 0
    }
}

fun main() {
    val house = House(name = &quot;Skyscraper 1&quot;)
    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