WEB ページ作成基準コマンド表示

コマンドとその実行結果の書き方

Windows のコマンドプロンプトや Linux のコマンドの使い方の説明文を書くときのコマンド入力の書き方です．

インラインコマンド

文章中にコマンドを記述する場合には，<span class="inline_command"> を使います．<span>はインライン要素なので，改行されません．

文書中にコマンドを書く場合

<span class="inline_command"><span class="command">コマンド</span> <span class="op">オプション</span> <span class="arg">引数</span></span>

インラインコマンド内の span では，以下のクラスを使うことができます．

これらのオプションを使うと，「command オプション 引数 目的語 強調 コメント」と表示できます．また，「<span class="inline_command mono_space">」とすると，等幅フォントになります．

単独コマンド

コマンドのみ単独で記述する場合は，<pre class="command"> を使います．<pre>はブロック要素なので，前後で改行されます．

単独コマンドの書き方

<pre class="command" style="width:幅(整数)px">
  <span class="prompt">プロンプト</span> コマンド  <span class="op">オプション</span> <span class="arg">引数</span>  <span class="obj">目的語</span>
</pre>

幅は「300px」のように単位付きで指定します．プロンプトのところには，「$」や「#」，「>」，「mysql>」を記述します．<pre class"command">と</pre>の間には，以下の <span> のクラスが使えます．

これらのオプションを使うと，以下のように表示されます.

$ sudo command  --option  引数  目的語  目的語2  強調 コメント

「<span class="command mono_space">」とすると，等幅フォントになります．また，複数個のコマンドを複数行に記述できます．

コマンドと端末出力

次のようにすれば，端末からの出力の様子を記述できます．コマンドとオプション，引数，コメントは色が変わります．コマンドを書かなければ，端末の様子を表示できます．

コマンドと端末出力の書き方

<pre class="terminal_screen" style="height:高さ(整数px or auto); width:幅(整数)px">
  <span class="command"> コマンド</span>   <span class="op"> オプション</span>   <span class="arg"> 引数</span>
      端末出力
      端末出力
      端末出力           <span class="comment">コメント</span>
      端末出力
</pre>

これらのオプションを使うと，以下のように表示されます.

$ sudo command  --option  引数  目的語  目的語2  強調 コメント

「<pre class="terminal_screen mono_space" style="height:auto; width:300px">」とすると，等幅フォントになります．また，「<pre class="terminal_screen auto_wrap" style="height:auto; width:300px">」とすると，自動的に折り返されます．等幅フォント (mono_space) と自動折り返し (auto_wrap) の同時指定も可能です．

整形済みコマンド出力

整形したコマンド実行結果を表示するときに使います(具体例)．

整形済みコマンド出力の書き方

<pre class="command_result" style="height:高さ(整数px or auto);width:高さ(整数px)">
	整形済みコマンド出力   <span class="comment">コメント</span>
	整形済みコマンド出力
</pre>

「<pre class="command_result mono_space" style="height:auto; width:300px">」とすると，等幅フォントになります．

html 出力

JavaScript を含む html での実行結果を表示するときに使います．実際にそこで実行された結果が表示されます(具体例)．

html 出力の書き方

<div class="html_result" style="height:高さ(整数px or auto);width:高さ(整数px)">
    html 文  <span class="comment">コメント</span>
    html 文
</div>

ページ作成情報

参考資料

更新履歴

last update:2020/08/12 07:59:26