Obsidianの編集モードでハイライトされる言語について

以前の記事↓にてコードブロックでサポートされている言語を辞書っぽくまとめてみました。
>[コードブロックでサポートされているPrism.jsについて #JavaScript - Qiita](https://qiita.com/Kei_Adachi/items/fd532414ffb1859c39a3)

「Obsidianって何？」という方は関連記事を色々書いてるので是非ご覧ください。
>[Obsidianとマークダウン記法を使い快適なメモ生活を！ #初心者 - Qiita](https://qiita.com/Kei_Adachi/items/3c471fbcf11b064b28ba)

宣伝はさておき本題に戻りますが、実際にコードブロックでハイライトされる言語はかなり少なく、[prismjsのサイト](https://prismjs.com/#supported-languages)に表記がある言語がすべてハイライトされるわけではありませんでした。
そこで、[prismjsのサイト](https://prismjs.com/#supported-languages)に表記がある言語の中で、実際にObsidianでハイライトされたものをまとめていきます。
まとめの前に

### そもそもコードブロックとは

```
これのこと
```
色々なプログラミング言語を勝手にハイライトしてくれます。プラグインの機能ではなくデフォルトでハイライトしてくれてとても便利です。

Pythonだとこんな感じになります。
```Python
# code block
a = 10
b = 20
result = a + b 
print(f"a + b = {result}")
```
↑綺麗
バッククォート3つの後にpythonなどの言語を指定すれば使えます。
では実際にハイライトされる言語を見ていきましょう。

### 実際にハイライトされる言語

<font color="#ff0000">※注意点</font>
ハイライトされる言語の中で\`\`\`の後に指定する文字が一対一対応でないものがあります。文章だとわかりにくいので例を示します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/95bd3a63-78d3-45a8-9b93-286e0b0d3a7e.png" Width="70%">


このように`sh` `bash` `shell`どれもハイライトされます。どの文字が対応しているかは、以前私が書いた記事か、Prism.jsの公式サイトを確認してください。
やる気あればこの記事上でもまとめるかも(やる気があった試しがない)。

>[コードブロックでサポートされているPrism.jsについて #JavaScript - Qiita](https://qiita.com/Kei_Adachi/items/fd532414ffb1859c39a3)
>[prismjsのサイト](https://prismjs.com/#supported-languages)

##### PDF出力について

今さっき気づいたんですが、Obsidianのマークダウン上でハイライトされていなくてもPDFで出力すると、ほとんどの言語でハイライトされます。
ですので、PDFで資料を作成するのであればあまり気にする必要ないと思います。
↓こんな感じ。左がマークダウンで右がPDFです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/98580600-8d69-41e2-bcb6-15b2a23f0a70.png" Width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/e1a773d3-6d81-46d2-8a45-81451f00631a.png" Width="50%">


というか、せっかく時間かけて記事書いたのにPDF出力だとハイライトされるのか......悲しい......

##### ハイライトされる言語(アルファベット順)

| アルファベット | ハイライトされる言語                                                                                                                                                        |
| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| A       | APL                                                                                                                                                               |
| B       | Bash, Brainfuck                                                                                                                                                   |
| C       | C, C\#(`dotnet`はだめ), C++, Clojure, CMake, COBOL, CoffeeScript, Crystal, CSS, Cypher                                                                               |
| D       | D, Dart, Diff, Docker(`dockerfile`と記述時のみ),                                                                                                                        |
| E       | EBNF, Eiffel, Elm, Erlang                                                                                                                                         |
| F       | F\#, Factor, Fortran                                                                                                                                              |
| G       | Gherkin, Go, Groovy                                                                                                                                               |
| H       | Haskell(`haskell`と記述時のみ), Haxe, HTTP                                                                                                                              |
| I       | Ini                                                                                                                                                               |
| J       | Java, JSON(`json`と記述時のみ), JSON5, Julia,                                                                                                                           |
| K       | Kotlin(`kotlin`と記述時のみ),                                                                                                                                           |
| L       | LaTeX(`latex`, `tex`と記述時のみ), Less, ,Lisp(`Lisp`, `commonlisp`と記述時のみ), Livescript, Lua                                                                             |
| M       | Markdown(`Markdown`と記述時のみ), Mermaid                                                                                                                               |
| N       | Nginx, NSIS                                                                                                                                                       |
| O       | Objectivec(`objc`と記述時のみ), Ocaml, Oz,                                                                                                                              |
| P       | Pascal, (`pascal`と記述時のみ), Perl, PHP, PL/SQL, PowerShell, .properties(`properties`と記述時のみ), Protocol Buffers(`protobuf`と記述時のみ), Pug, Puppet, Python(`python`と記述時のみ) |
| Q       | Q                                                                                                                                                                 |
| R       | R, React JSX, React TSX, Ruby, Rust                                                                                                                               |
| S       | SAS, Sass (Sass), Sass (SCSS), Scala, Scheme, Smalltalk, Smarty, SML(`sml`, と記述時のみ), SPARQL(`sparql`と記述時のみ), SQL, Squirrel, Stylus, Swift                         |
| T       | Tcl, Textile, TOML, Turtle(`turtle`と記述時のみ), Twig, TypeScript,                                                                                                     |
| U       |                                                                                                                                                                   |
| V       | Velocity, Verilog, VHDL, Visual Basic(`vb`と記述時のみ),                                                                                                                |
| W       | Web IDL(`webidl`と記述時のみ),                                                                                                                                          |
| X       | XML doc (.NET)(`xml`と記述時のみ), XQuery                                                                                                                               |
| Y       | YAML<br>                                                                                                                                                          |
| Z       |                                                                                                                                                                   |

### ※補足:方言について
Prism.jsにはSQLの記述があり、コードブロックではSQLをハイライトできます。
筆者がSPLに関するメモを書いている際に、SPLを色々なSQL方言でハイライトしてみました。
SPLはサポートされているはずなのに、ハイライトされないので仕方なくSQLを使っています。
そこで、ハイライトがそれぞれ微妙に違うことに気づきました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/1114022a-1d28-d25a-ccbc-22ec27c3a980.png" width="70%">

上からMySQL、PostgreSQL、SQLiteでハイライトしたものです。ハイライトがそれぞれ微妙に違うことがわかります。

これらのことから、言語によっては[prismjsのサイト](https://prismjs.com/#supported-languages)に掲載されていない方言でもハイライトできることもあるっぽいです\(多分)。


### おまけ

以前の記事で紹介したコードブロック関連の便利なプラグインをこっちでも紹介しときます。

#### CodeStyler
PythonやHTMLなどの言語ごとにコードブロックを更に見やすく表示してくれます。
と言われてもどんな風に見やすくなるかわからないので、百聞は一見に如かず！
↓がCodeStylerを使ったコードブロックのスクショです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/f64ad047-d98e-df26-ac20-ecc6e8310226.png" Width="70%">

Pythonのアイコンが表示され、背景に色が付き、行番号も表示され見やすくなりました！
ここまで見やすくするにはインストールした後に、設定画面からいくつか設定を変更して使いやすくしていきます。
ちょっと面倒ですがお付き合いください。


##### 設定1
`Theme`の項目を<font color="#ff0000">Solarized</font>に変更します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/cc12b722-0814-5cf3-1d5e-55dac5d09410.png" Width="70%">


##### 設定2

Codeblock Headerの`Display Header Language Tags`と`Display Header Language Icons`の項目がインストール直後はNeverになっているので<font color="#ff0000">Always</font>に変更しておきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/047e2004-d86b-b796-479b-220ae9b678d7.png" Width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/afb0fa54-a67f-d333-b2bf-16d30ce370cd.png" Width="50%">

##### 設定3

Codeblock Gutterの`Enable Line Numbers`をオンにします。これで行番号が表示されます。
`Highlight Line Numbers`もオンにしておくと、現在どの行にいるか分かりやすいのでオンしといた方がいいと思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/4d82991a-cbb6-733d-56c7-84f53112aebd.png" Width="70%">


##### 設定4
Codeblock HighLightingの`Add Alternative Highlight`で写真のように<font color="#ff0000">error</font>と書いてAddを押してください。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/5d632f66-8f3f-5bc1-ec02-f6cfae9ce7b9.png" Width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/1354882d-fd2c-b19c-f9d0-e84d9f68cf3d.png" Width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/3a860828-2ca6-7d4c-7ab5-f121f0bd2f97.png" Width="50%">

これでいつものコードブロックの特定の行だけを好きな色でハイライトできます。
エラーが出ている行をハイライトしたりと色々便利ですね。

```
\```Python error:3
a = 10
b = 20
c = 10 / 0
result = a + b 
print(f"a + b = {result}")
\```
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/25042b8e-acad-3142-25e2-de59f22b8143.png" width="70%">

#### QRCodeGenerator

コードブロックのバッククォートを3つ付けた後にqrcodeを付けるとコードブロック内の文字列を自動的にQRコードにしてくれます。

```
\```qrcode
https://prismjs.com/#supported-languages
\```
```

外部のQRコード生成のサイト使う必要なくなるのでめっちゃ便利です。
QRコードはこんな感じ↓

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853726/af758287-e8d5-60b6-08b5-657aab9f290d.png" Width="50%">


### 終わりに
こんな言語もハイライトされた！って発見あったら是非コメントください！
興味あるし、この記事の改善にも繋がるので！
それではよいObsidianライフを！