【CSS】コードブロックの特定のプログラミング言語だけリガチャーを無効にしたい

Question

やりたいこと

特定のプログラミング言語に対して、フォントのリガチャーを無効化する方法はありますか？

Marp for VSCodeという拡張機能を使ってスライドを作っています。これはMarkdownファイルからスライドを作れるものです。

スライドのテーマはCSSファイルで設定しています。
そこで、コードブロック（？）を表す部分（Markdownで```で囲む部分）のフォントはFira Codeに設定しています。
Fira Codeにすると演算子などがリガチャーされてみやすくなるからです。

section.slides code {
    /* display: inline-block; */
    font-family: Fira Code;
    background-color: #eeeeee;
    border-radius: 5px;
}

しかしプログラミング言語によってはリガチャーされて欲しくないものがあります。例えばVerilog-HDLでは<=は矢印として表示したいのに、リガチャーされて「≦」として表示されてしまいます。

このように表示させたい↓

しかしフォントがリガチャーされてこのように表示されてしまう（これは画像です）↓

検索すると、font-variant-ligatures: none;を追加すれば良いと出てきました。
確かに

section.slides code {
    /* display: inline-block; */
    font-family: Fira Code;
    background-color: #eeeeee;
    border-radius: 5px;
    font-variant-ligatures: none;
}

とすればFira Codeのリガチャーを解除できますが、全てのプログラミング言語に対してそうなってしまいます。

特定のプログラミング言語に対して、フォントのリガチャーを無効化する方法はありますか？

どうかよろしくお願いします。

---

追記

テスト用のスライドを作ってみました。 このGoogle Driveに置いておきます。

私が作成したのはtest.mdとtest_theme.cssで、Marp for VSCodeを使ってpdf, htmlにエクスポートしました。test_theme.cssは次のようにしました。

/* @theme test_theme */

@import 'default';


section.slides code {
    /* display: inline-block; */
    font-family: Fira Code;
    background-color: #eeeeee;
    color: #1e4c92;
    border-radius: 5px;
    /* font-variant-ligatures: none; */
}

変換されたhtmlファイルを開いて「verilog」というワードで検索をかけると、この部分だけヒットしました。

<code class="language-verilog">
```

ここからどうすればいいかわかりますか？　どうぞよろしくお願いいたします。

Comments

[m.ts10806]

Visual Studio Codeの質問のように見えますが、いかがでしょうか
https://teratail.com/tags/Visual+Studio+Code

[int32_t]

スライドのHTMLはどのようになっていますか? コードブロックがHTMLに変換された結果に、言語を判定できるような情報は残っていますか?

[BOLTE]

追記をいたしました。どうぞよろしくお願いいたします。

[BOLTE]

すいません、リンク先がPDFだけだったので修正しました。

Answer 1

code.language-verilog {
    font-variant-ligatures: none;
}

を追加すれば期待どおりになりそうですね。

Comments

[BOLTE]

ありがとうございます！！　大変助かりました。