LoginSignup
17
7

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-08-23

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

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

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

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

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

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

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

■ 使うべき言語

今回、BatchPowerShellShellShell 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
    

▽ デモページ

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

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

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

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

以下に例として、npm --versionnpm 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_sessionshell-sessionconsoleterminal によって Shell Session のシンタックスハイライトを付けることが出来る。他の Markdown パーサーも利用する場合は、互換性を考慮して shell-sessionconsole を利用すると良いだろう。

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

実際、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 のシンタックスハイライトが上手く当たるようになりました。軽微修正。

17
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
7