コマンドラインの実行と結果をハイライトしたい

コードブロックを利用してコマンドラインを記述する際、どの言語を指定すれば良いのだろうか。言語を指定せずに記述しても良いが、少々味気なく感じることもある。適切にハイライトさせたい。

本記事において、言語に関しては斜体、コードブロックで指定する言語や言語エイリアスはインラインコードで表現することとする。

■ 対象にするコードブロック

• $ や # などのプロンプトを含むコマンドライン

  ```
  $ ls
  ```
  

• $ や # などのプロンプトを含むコマンドラインとその結果

  ```
  $ ls
  file01.ext file02.ext file03.ext
  file04.ext file05.ext file06.ext
  ```
  

■ 使うべき言語

今回、Batch、PowerShell、Shell、Shell Session (console) の 4 つの言語について考えたい。これらの言語はスクリプトファイルやコマンドラインとして利用される。

これらの言語の用途は大きく分けて 2 つに大別される。

• スクリプトファイル or プロンプトを含まないコマンドライン
  • Batch
  • PowerShell
  • Shell
• プロンプトを含むコマンドライン（実行結果を含んでも良い）
  • Shell Session (console)

したがって、プロンプトを含むコマンドラインを記述する場合は Shell Session を指定する。

■ 言語エイリアス一覧

2022/08/23 現在の言語エイリアス一覧です。

それぞれの言語とハイライトツールのエイリアスを一覧にしておきたい。それぞれには対応している言語の一覧のリンク (⧉) を付している。ただし、一覧が常に最新のエイリアスを更新し続けているわけではないようなので、一部 GitHub 等のリポジトリを確認している。

また、複数のハイライトツールに共通するエイリアスには下線を付している。

Language	Prism.js ⧉	Rouge ⧉	highlight.js ⧉	Linguist ⧉ (GitHub)	Pygments ⧉
Batch	batch	bat, batch, batchfile	dos, bat, cmd	batchfile, bat, batch, dosbatch, winbatch	batchfile
PowerShell	powershell	powershell, posh, microsoftshell, msshell	powershell, ps, ps1	powershell, posh, pwsh	powershell
Shell	shell, bash, sh	shell, bash, sh, zsh, ksh	bash, sh, zsh	shell, bash, sh, shell-script, zsh	bash
Shell Session (console)	shell-session, se-session, shellsession	shell_session, shell-session, console, terminal	shell, shellsession, console	shellsession, bash session, console	msdos session, bash session, powershell session

highlihgt.js の Shell Session は、他の Shell と同じエイリアスを含むため、少し注意が必要になる。複数のパーサーで互換性を求めるならば、shell を利用することは避けた方が良いだろう。

Shell Session では実行するコマンドの先頭に一般ユーザープロンプト $ や管理者 (root) ユーザープロンプト # を置き、次の行に実行結果を書く。ただし、> を置いてもプロンプトとして理解されない場合があるようだ。

■ Shell Session の例

• コマンドラインのみ

  ```shell-session
  $ ls
  ```
  

  $ ls
  

• コマンドラインとその結果

  ```shell-session
  $ ls
  file01.ext file02.ext file03.ext
  file04.ext file05.ext file06.ext
  ```
  

  $ ls
  file01.ext file02.ext file03.ext
  file04.ext file05.ext file06.ext
  

▽ デモページ

各ハイライトツールのデモを利用できるページを紹介しておきたい。

• Prism.js

  https://prismjs.com/test.html#language=shell-session

• Rouge

  http://rouge.jneen.net/v3.30.0/console/

• highlight.js

  https://highlightjs.org/static/demo/#:~:text=%40content%3B%0A%20%20%7D%0A%7D-,Shell%20Session,-%24%20echo%20%24EDITOR

■ プロンプトを含まないコマンドライン

プロンプトを含まないコマンドラインは読者にとってコピーして利用しやすい利点がある。

$ や # などのプロンプトを含まないコマンドラインのみをコードブロックで記述したい場合は Batch、PowerShell、Shell を利用すると良いだろう。

以下に例として、npm --version と npm install typescript をまとめて示しておく。どの言語を選択するかは各々の判断に委ねたい。（ハイライトの結果はハイライトツールによって異なることに注意）

• Batch 例：

  ```batch
  npm --version
  npm install typescript
  ```
  

  npm --version
  npm install typescript
  

• PowerShell 例：

  ```powershell
  npm --version
  npm install typescript
  ```
  

  npm --version
  npm install typescript
  

• Shell 例：

  ```bash
  npm --version
  npm install typescript
  ```
  

  npm --version
  npm install typescript
  

同一記事内でハイライトの色が異なると余計な誤解を生じさせる可能性があるため、理由がない限りこれらをごちゃまぜに使うことは避けた方が良いだろう。

まとめ

Qiita では Rouge を利用しているので shell_session、shell-session、console、terminal によって Shell Session のシンタックスハイライトを付けることが出来る。他の Markdown パーサーも利用する場合は、互換性を考慮して shell-session や console を利用すると良いだろう。

Prism.js や GitHub では正規表現 (Regular Expression) をハイライトすることが出来るが、Prism.js では regex、GitHub では regex と regexp になるなど、言語とエイリアス名が少しだけ異なる。やめてくれ。目的が異なる同名エイリアスもやめてくれ。
各ハイライトツールの言語エイリアス統一協会を設立したい。

実際、highlight.js の言語は他のシンタックスハイライトツールの命名とはかなり異なる。本記事では他のツールと比較して言語を記載しているが、本当は Batch → “DOS”、Shell → “Bash”、Shell Session → “Shell” となっている。

各サイトのハイライトツール

Markdown を利用して記事を書くことのできるサイトで利用されるシンタックスハイライトツールを明らかにしておきたい。各サイト名の横には、利用しているシンタックスハイライトツールが明示されている公式ページを参照している。

サイト	シンタックスハイライトツール
Qiita [↗]	Rouge
Zenn [↗]	Prism.js
GitHub [↗]	Linguist
GitLab [↗]	highlight.js, Rouge
VS Code [↗] （デフォルトビューワ）	highlight.js

追記

2022/10/24: Shell Session のシンタックスハイライトが上手く当たるようになりました。軽微修正。