YamlBox

ウェブとエンコーディング · 5 分で読みました

Markdown テーブル: パイプを数える代わりにテーブルを生成し

マークダウン テーブルは、パイプとダッシュで書かれたセルのグリッドであり、マークダウンの中で手書きで書くのが本当に不快な部分の 1 つです。パイプをカウントすること、区切り文字行をヘッダーと同じ幅に保つこと、セル内に表示されるパイプをエスケープすることはすべて、注目を集めるために競合します。テーブルを生成すると、3 つの問題がすべて一度に解決されます。

更新されました

構文の一例では、

                | Tool          | Input       | Offline |
| :------------ | :---------: | ------: |
| YAML to JSON  | YAML        | yes     |
| JWT decoder   | JWT         | yes     |
              

最初の行はヘッダー、2 番目の行は区切り文字行、その後はすべてデータです。区切り文字行のコロンは、配置を設定します: `:---` 左、`:---:` 中央、`---:` 右。 GitHub とほとんどのレンダラーは先頭と末尾のパイプをオプションとして受け入れますが、これらを含めることで生のテキストをエディターで読み取れる状態に保ちます。

テーブルを壊す 3 つの要素

  • セル内のパイプ — `\|` としてエスケープするか、行が 1 つの列に分割されすぎています。
  • 区切り行の列数が間違っている - ヘッダーが移動し、テーブルがずれて表示されます。
  • テーブル内の空白行 — レンダラーはこれをテーブルの終わりとして扱い、残りをテキストとして出力します。

エスケープは、セル内のコードと正規表現にとって最も重要です。 `a|b` と `\bfoo\b` は両方とも、テーブル内で問題なく動作する前に注意が必要です。

スプレッドシートからデータを取得する

自然なワークフローは、スプレッドシートまたは CSV エクスポートから選択内容を貼り付け、ジェネレータに引用と位置合わせを行わせることです。これは、行を入力するよりも高速でエラーが発生しにくく、可変の列幅、右揃えにする必要がある数値、カンマを含むセルなどの退屈なケースにも対応します。空白としてレンダリングされる架空の列が表に含まれるのを避けるために、貼り付ける前に末尾の空の列をトリミングします。

テーブルを使用しない場合

表は比較用です: 機能マトリックス、フラグ参照、互換性リスト、環境変数。散文には適しておらず、長い説明には適しておらず、マークダウンには応答動作がないため、狭い画面では苦痛です。レンダラーは水平にスクロールするか、列を読み取れない細片に押し込むかのどちらかです。セルに段落が必要な場合は、代わりに定義リスト、エントリごとの見出し、または箇条書きリストを使用します。携帯電話で誰も読めない表は、置き換えられたリストよりも悪いです。

生成して任意の場所に貼り付けます

出力はプレーンなマークダウンであるため、README、プル リクエストの説明、Wiki ページ、Jira チケット、またはコメントに直接組み込まれます。 YamlBox マークダウン テーブル ジェネレーターはブラウザーで実行され、列を整列し、パイプをエスケープし、オフラインで動作し続けるため、どこにも公開せずに内部データを貼り付けることができます。

Markdown テーブルジェネレーター — よくある質問

マークダウン テーブルのセル内にパイプ文字を挿入するにはどうすればよいですか?

バックスラッシュ (`\|`) でエスケープします。それ以外の場合、レンダラーはそれをセルの終わりとして扱います。ジェネレーターはこれを自動的に処理します。これが、手動ではなくツールを使用してテーブルを作成する主な理由です。

マークダウンで列を整列するにはどうすればよいですか?

区切り文字行にはコロンを使用します。左は `:---`、中央は `:---:`、右は `---:` です。配置は列全体に適用されるため、最も読みやすい結果を得るには、数値列を右揃えにし、テキストを左揃えにします。

マークダウン テーブルがレンダリングされないのはなぜですか?

3 つの点を確認してください。区切り文字行にはヘッダーと同じ数の列があること、テーブル内に空白行がないこと、ヘッダー行が区切り文字行の直前にあることです。これら 3 つのいずれかでは、GitHub フレーバーのマークダウンではレンダリングが中断されます。

この投稿で言及されているツール

19 ツールの完全なリストを参照する

さらに読む記事

5 分で読みました

SRT ~ VTT: ブラウザが実際にロードする字幕

HTML5 ビデオ プレーヤー用に SRT を VTT に変換します。タイムコード形式、スタイル、キュー設定について、重要なアクセシビリティに関する注意事項とともに説明します。

すべての 19 投稿 →