シンタックスハイライトの言語名はサービスによって多少異なることがある

2021/06/25に公開1

それはそうという内容ですが、間違えていた自戒として記事にしました.

事象

ZennやQiita等の(エンジニア向け)ブログサービスでは、以下のように言語名を指定して書くとシンタックスハイライトをしてくれる機能があります.

`​``rust
fn main() {
    println!("Hello World!");
}
`​``
fn main() {
    println!("Hello World!");
}

ところが、シンタックスハイライトに使っているライブラリが、ZennではPrism.js、QiitaではRouge(こっちはRubyで書かれています)が使われており、当然ながらサポートしている言語だけではなく、その名前が異なる場合があります.

シンタックスハイライトには Prism.js を使用しています。
https://zenn.dev/zenn/articles/markdown-guide#コードブロック より引用)

シンタックスハイライトには Rouge を利用しており、(後略)
https://qiita.com/Qiita/items/e84f5aad7757afce82ba より引用)

例えば、コンソールの入出力であることを示したいとき、Rougeではconsole,terminal,shell_session,shell-sessionという名前が使えますが、Prism.jsではshell-session,sh-session,shellsessionと、shell-sessionを除き異なります.(一方で、RougeというかQiitaの方はシンタックスハイライトが当たっていない気がします.公式サンプルと明らかに違うし…….それに慣れていたせいで、当たっていないことに違和感を持てませんでした)

$ echo ok

その他にもC++に対して、Rougeではcpp,c++という2つの名前が使えるのに対し、Prism.jsではcppのみしか使えない等、基本的にRougeの方がエイリアスが多く存在している印象です.

対策

Zenn CLIを使っている場合、ファイル保存したタイミングで、zenn previewをしたコンソールにLanguage does not exist: hogehogeとログが表示されるので、すぐに気付くことができるでしょう.
Web版はGitHub連携切るのが面倒なので確認はしていませんが、私の記憶が正しく、そして変更がされていなければ、特に警告はされなかったと思います.

正しい名称は https://prismjs.com/#supported-languages で確認できるので、何も変わっていないと思ったら一度確認しておくのがよいでしょう.

プレーンテキストについて

プレーンテキストに対して、Rougeではplaintext,textで指定できますが、Prism.jsではできないようなので(多分)、ファイル名だけ表示したい場合に良い方法がないなと思っています.

例えば、以下のように種類を書かないとファイル名は無視されてしまいます.

`​``:出力
Hello World!
`​``
出力
Hello World!

また、以下のようにPrism.jsが認識できない言語名を書くと、ファイル名は表示されるものの、Zenn CLIを使っていると、Language does not exist: textと編集中何度も出力されるため、少し気になります.

`​``text:出力
Hello World!
`​``
出力
Hello World!

今は、行頭に+や-が来なければ、diffをつければいいかなと思っています.何かもっと良い方法を知っていたら教えてください.

`​``diff:出力
Hello World!
`​``
出力
Hello World!
GitHubで編集を提案

Discussion

eduidleduidl

GitHub Markdownではsh-sessionconsoleが動く.今のところsh-session推奨かな.