以前の記事↓にてコードブロックでサポートされている言語を辞書っぽくまとめてみました。
「Obsidianって何？」という方は関連記事を色々書いてるので是非ご覧ください。
宣伝はさておき本題に戻りますが、実際にコードブロックでハイライトされる言語はかなり少なく、prismjsのサイトに表記がある言語がすべてハイライトされるわけではありませんでした。
そこで、prismjsのサイトに表記がある言語の中で、実際にObsidianでハイライトされたものをまとめていきます。
まとめの前に
そもそもコードブロックとは
これのこと
色々なプログラミング言語を勝手にハイライトしてくれます。プラグインの機能ではなくデフォルトでハイライトしてくれてとても便利です。
Pythonだとこんな感じになります。
# code block
a = 10
b = 20
result = a + b
print(f"a + b = {result}")
↑綺麗
バッククォート3つの後にpythonなどの言語を指定すれば使えます。
では実際にハイライトされる言語を見ていきましょう。
実際にハイライトされる言語
※注意点
ハイライトされる言語の中で```の後に指定する文字が一対一対応でないものがあります。文章だとわかりにくいので例を示します。
このようにsh bash shellどれもハイライトされます。どの文字が対応しているかは、以前私が書いた記事か、Prism.jsの公式サイトを確認してください。
やる気あればこの記事上でもまとめるかも(やる気があった試しがない)。
コードブロックでサポートされているPrism.jsについて #JavaScript - Qiita
prismjsのサイト
PDF出力について
今さっき気づいたんですが、Obsidianのマークダウン上でハイライトされていなくてもPDFで出力すると、ほとんどの言語でハイライトされます。
ですので、PDFで資料を作成するのであればあまり気にする必要ないと思います。
↓こんな感じ。左がマークダウンで右がPDFです。
というか、せっかく時間かけて記事書いたのに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 |
| Z |
※補足:方言について
Prism.jsにはSQLの記述があり、コードブロックではSQLをハイライトできます。
筆者がSPLに関するメモを書いている際に、SPLを色々なSQL方言でハイライトしてみました。
SPLはサポートされているはずなのに、ハイライトされないので仕方なくSQLを使っています。
そこで、ハイライトがそれぞれ微妙に違うことに気づきました。
上からMySQL、PostgreSQL、SQLiteでハイライトしたものです。ハイライトがそれぞれ微妙に違うことがわかります。
これらのことから、言語によってはprismjsのサイトに掲載されていない方言でもハイライトできることもあるっぽいです(多分)。
おまけ
以前の記事で紹介したコードブロック関連の便利なプラグインをこっちでも紹介しときます。
CodeStyler
PythonやHTMLなどの言語ごとにコードブロックを更に見やすく表示してくれます。
と言われてもどんな風に見やすくなるかわからないので、百聞は一見に如かず！
↓がCodeStylerを使ったコードブロックのスクショです。
Pythonのアイコンが表示され、背景に色が付き、行番号も表示され見やすくなりました！
ここまで見やすくするにはインストールした後に、設定画面からいくつか設定を変更して使いやすくしていきます。
ちょっと面倒ですがお付き合いください。
設定1
Themeの項目をSolarizedに変更します。
設定2
Codeblock HeaderのDisplay Header Language TagsとDisplay Header Language Iconsの項目がインストール直後はNeverになっているのでAlwaysに変更しておきます。
設定3
Codeblock GutterのEnable Line Numbersをオンにします。これで行番号が表示されます。
Highlight Line Numbersもオンにしておくと、現在どの行にいるか分かりやすいのでオンしといた方がいいと思います。
設定4
Codeblock HighLightingのAdd Alternative Highlightで写真のようにerrorと書いてAddを押してください。
これでいつものコードブロックの特定の行だけを好きな色でハイライトできます。
エラーが出ている行をハイライトしたりと色々便利ですね。
\```Python error:3
a = 10
b = 20
c = 10 / 0
result = a + b
print(f"a + b = {result}")
\```
QRCodeGenerator
コードブロックのバッククォートを3つ付けた後にqrcodeを付けるとコードブロック内の文字列を自動的にQRコードにしてくれます。
\```qrcode
https://prismjs.com/#supported-languages
\```
外部のQRコード生成のサイト使う必要なくなるのでめっちゃ便利です。
QRコードはこんな感じ↓
終わりに
こんな言語もハイライトされた！って発見あったら是非コメントください！
興味あるし、この記事の改善にも繋がるので！
それではよいObsidianライフを！