Markdown 是我幾乎用它來編寫所有內容的格式 - 自述文件、插件文件、發布說明、拉取請求描述、WP Adminify 的變更日誌、一半的內部說明。它適用於除一個之外的每個構造。當涉及表時,我停止寫入並開始計算管道字符,流程就消失了。在五行表中新增一列,然後手動編輯六行,加上分隔符號行,直到頁面呈現之前您不會知道自己是否正確。
TL;DR: 的 降價表 為您提供一個電子表格風格的網格,在鍵入時產生有效的 GitHub 風味 Markdown,並匯入 CSV、電子表格貼上或現有的 Markdown 表,以便您可以對其進行重組。一鍵設定每列對齊方式,然後匯出 Markdown、HTML 或 CSV。一切都在您的瀏覽器中運行。
該工具的存在是因為表語法是 Markdown 的一部分,來源格式在其中積極反對編輯。本指南涵蓋了 GFM 表的工作原理、決定您的表是否呈現的規則、破壞行的轉義陷阱以及如何使用工作流程表的生成器通常來自 - 電子表格、查詢結果或某人已經編寫的表格。
什麼是降價表?
Markdown 表是按固定順序堆疊的三個成分:標頭行、分隔符號行和零個或多個正文行。表格根本不是核心 Markdown 的一部分 - 它們是由 定義的擴充 GitHub 風味 Markdown 規格,這就是為什麼表可以在 GitHub 上渲染並在其他地方顯示為文字管道。單元格由管道字元分隔,每行恰好佔據一行。
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
分隔符號行是使其成為表而不是包含管道的段落的部分。它必須是第二行,它必須由帶有可選冒號的連字符組成,並且它必須具有與標頭相同數量的單元格。如果出現任何錯誤,渲染器會將整個區塊視為普通文字 - 這就是 " 的原因;我的表格呈現為純文字和引用;幾乎總是分隔符號行問題。
表格不是原始 CommonMark 規範的一部分。它們作為 GitHub 風味 Markdown 擴展出現,隨後幾乎在所有地方都被採用:GitHub、GitLab、Bitbucket、Obsidian、Notion、Docusaurus、MkDocs、VitePress、Hugo、Jekyll、Discord 和大多數靜態站點生成器。 &引用;幾乎&引用;是操作詞。沒有擴展的最小 CommonMark 渲染器會將您的表格顯示為文字管道,修復方法是發出 HTML - 生成器只需單擊輸出選項卡即可完成此操作。
為什麼語法比看起來更難維護
閱讀 Markdown 表格很容易。維護一個是成本隱藏的地方,它來自四個地方。
結構存在於標點符號中。 除了也出現在正規表示式、shell 指令和 TypeScript 聯合類型中的字元之外,沒有儲存格邊界。儲存格內的每個內容都必須轉義,否則該行會默默地獲得一列。
對齊以冒號放置進行編碼。 左邊的冒號表示左對齊,兩側的冒號表示居中,右邊的冒號表示右對齊。沒有關鍵字可以記住它,以及兩者之間的差異 ---: 和 :--- 是連續一個角色,沒有人仔細閱讀。
編輯是多行的。 新增列意味著觸摸每一行加上分隔符號。重新排序行意味著在沒有視覺回饋的情況下進行剪切和貼上。刪除列是搜尋每條線上的第 n 個管道。
源的對齊是手動的。 不需要帶襯墊的列 - 渲染器會忽略額外的空間 - 但未加襯墊的表格很難在差異中讀取,因此人們用手填充它們,然後在每次儲存格' 的內容增長時重新填充它們。
網格編輯器刪除所有四個。你編輯單元格;語法已生成。這就是該工具的整個前提。
如何使用 Markdown 表產生器
步驟 1:將您的資料輸入網格
三條路線,取決於資料已駐留的位置。
輸入它。 網格以填充的樣本打開。覆蓋單元格,或按 Clear 鍵三乘三空並重新開始。
從電子表格貼上。 打開匯入面板並貼上 Excel、Google Sheets、Numbers 或 LibreOffice 的複製範圍。電子表格將選項卡分隔的文字放在剪貼簿上,導入器會自動偵測到該文字 - 無需告訴它您正在使用哪個分隔符號。
貼上 CSV 或現有表格。 同一面板接受 CSV、分號分隔匯出(許多歐洲地區的預設值)、管道分隔文字和 Markdown 表。如果文字看起來像 Markdown 表(標題行後面跟著分隔符號行),則將其解析為一個,包括其列對齊,因此您可以從 README 載入表格、重組它並將其貼回。
CSV 匯入遵循 RFC 4180 規則,而不是天真地按逗號分割。引用的欄位可以包含逗號、換行符和代表字面引用字元的雙引號。這比聽起來更重要:任何包含地址、描述或使用逗號的區域設定中的價格的匯出都會打破簡單的分割,並且直到一列短一個單元格後您才會注意到。如果您的 CSV 足夠大,您想在匯入之前對其進行檢查,則 CSV 檢視器 首先在可排序的網格中開啟它。
第 2 步:塑造表格
網格周圍的控制涵蓋了原始 Markdown 中痛苦的操作:
- 行 和 列 添加到網格的末尾。
- 每行旁邊的箭頭將其向上或向下移動 - 對於根據您認為最重要的內容對比較表進行排序非常有用。
- 行或列標題上的減號按鈕會一次刪除每一行。
- 轉置 交換行和列。從報告中貼上資料通常會以錯誤的方式定向文件,並且轉置是一次點擊而不是完整的重新輸入。
步驟 3:設定每列的對齊方式
每個列標題都帶有三個對齊按鈕:左、中、右。按一下 1 將其套用,再次按一下以返回渲染器's 預設值。生成器將對應的冒號寫入分隔符號行。
對齊值得刻意使用。數字列 - 價格、計數、百分比、持續時間 - 右對齊閱讀效果要好得多,因為數字按位置值排列。短狀態值看起來整齊居中。文字屬於左邊。這不是裝飾;右對齊的數字列確實可以更快地掃描最大值。
第四步:選擇輸出格式並複製
三個輸出選項卡:
降價 製作 GFM。這 帶襯墊的柱子 切換控制單元格是否填充空格,以便原始來源在等寬編輯器中對齊。填充不會改變表的渲染方式 - 它純粹適用於在差異中讀取檔案的人。 外管 控制每排的前管和後管;這兩種風格都是有效的,而前管風格是迄今為止更常見的慣例。
HTML 產生a <table> 與 <thead> 和 <tbody> 並且內聯 text-align 樣式與列對齊相符。將其用於缺乏表格支援的渲染器、電子郵件範本或您需要時 colspan 以及 Markdown 無法表達的多行單元格。如果您想朝另一個方向從網頁中取出一張桌子, html 降價 處理它。
CSV 將網格作為資料傳回,正確引用,以便貼上到電子表格中或輸入到腳本中。
複製到剪貼簿或下載為 .md, .html,或者 .csv 文件。
真正打破桌子的逃避規則
幾乎每個損壞的 Markdown 表中都會出現兩個字符,並且兩者均由生成器自動處理 - 但您應該知道手動編輯的表的規則。
管道。 單元格內的文字管道必須寫成: \|。 如果沒有反斜線,渲染器會看到一個列分隔符,您的行會獲得一個單元格,從而丟棄後面的每一列。這在技術文件中最為困難,其中單元格合法地包含諸如此類的內容 string | null, grep foo | wc -l,或正規表示式交替。即使在反向勾選代碼跨度內,轉義也能起作用 - Markdown's 通常&引用;代碼跨度是字面和引用的罕見情況;規則不適用。
換行符。 GFM 表嚴格為每行一行,因此儲存格不能包含真正的換行符。通用解決方法是 HTML <br> 標籤。當您將多行內容貼上到網格中時,生成器會為您插入標籤;當您匯入包含的表格時 <br>,它會轉換回編輯器中的真實換行符,以便單元格編輯舒適。
另外兩條規則值得記住,因為它們會導致 "我的表不渲染&引用;與表格本身無關的報告。首先,當表格位於段落後面時,需要在其前面留有一行空白行。其次,在清單項目內,整個表格必須縮排到清單項目'內容列 - 否則清單會吞下第一行,並且分隔符號行落在錯誤的位置。
表格的來源以及每個案例的流程
您收到的電子表格
複製範圍,貼上到導入面板中,將其載入到網格中,刪除沒人需要的列,正確對齊數字列,複製 Markdown。對於需要十分鐘才能手動格式化的表格來說,不到一分鐘。
查詢結果或 API 回應
以 JSON 開頭的資料通常需要一跳。用轉換它 json 到 csv,然後將 CSV 貼到導入器中。反之亦然 - 您需要作為資料的 Markdown 表 - 從輸出選項卡匯出 CSV 並運行它 csv 到 json.
自述文件中已存在的表格
將其貼到導入面板中。它會完好無損地返回網格,因此添加列或重新排序行是正常編輯而不是重寫。這是我最常用的工作流程:文件表一次增長一行數月,然後需要一次重組。
您從頭開始編寫的比較表
從網格開始,按照您的想法輸入,然後讓填充自行排序。在網格中而不是管道語法中編寫比較可以讓您專注於比較是否公平,而不是列是否對齊。
必須在多個渲染器中工作的文件
為支援 GFM 表的平台產生 Markdown,然後將輸出標籤切換為不支援 GFM 表的平台的 HTML。相同的網格,兩次導出,無需重新輸入。如果您的管道無論如何都將 Markdown 轉換為 HTML, 標記到 HTML 向您準確展示轉換產生的結果。
標記表與 HTML 表
| 考慮 | 降價表 | HTML 表格 |
|---|---|---|
| 來源的可讀性 | 高掃描為純文字 | 低標籤主導內容 |
| 多線細胞 | 僅通過 <br> |
原生,任何區塊內容 |
| 合併單元格 | 不支援 | colspan 和 rowspan |
| 每列對齊 | 是的,透過分隔冒號 | 是的,透過 CSS 或屬性 |
| 造型控制 | 沒有 | 完整的 CSS |
| 渲染器支援 | GFM 擴展,廣泛但不普遍 | 只要允許 HTML,就通用 |
| 差異友好 | 好的,每行一行 | 可憐,每行很多行 |
實用規則:使用 Markdown,直到您需要合併的儲存格、儲存格內的區塊元素或特定樣式。然後將一個表切換到 HTML 並留下文件的其餘部分。大多數 Markdown 渲染器都會傳遞原始 HTML,因此將兩者混合在一個檔案中是正常的。
關於隱私的說明
人們建立的表格通常是他們不想上傳的:尚未公佈的定價、人數、內部基準、客戶和#39;從電子表格貼上來的資料。
生成器是客戶端 JavaScript。網格、導入解析器和頁面中的每次導出運行,您貼上的任何內容都不會離開您的機器。加載一次,它就會保持離線工作。這與 toolz。dev 上所有內容背後的原理相同,其推理值得在指南中完整閱讀 線上工具中的資料隱私. 如果您正在為日常工作整合更廣泛的基於瀏覽器的實用程序,那麼 編碼工具指南 和 web 開發人員工具包 涵蓋其他可以獲得書籤的內容。
實用技巧
保持標題較短。 填充後,列中最寬的儲存格會設定來源中每一行的寬度。冗長的標頭使原始檔案雜訊,但不會帶來渲染優勢。
不要擔心產生的檔案的輸出未添加。 如果表是由腳本編寫的並且從不作為來源讀取,請關閉填充並儲存位元組。
貼上前先排序。 一次一鍵點選一行重新排序對於五行來說很好,對於五十行來說很乏味。先在電子表格中排序,然後匯入。
注意空標題行。 與&引用;第一行是 header"關閉後,生成器會在您的資料上方發出空標頭,因為 GFM 無法表達無標頭表。一些渲染器將其顯示為薄空白行。如果它打擾您,請匯出 HTML,它根本不需要標頭。
檢查渲染的結果,而不是來源。 如果分隔符號行的儲存格數量錯誤,看起來完美的填充來源仍然可能會出錯。在呼叫完成之前,將其貼上到您正在發布的任何平台的預覽中。
問號
如何在 Markdown 中建立表格？
Markdown 表需要標頭行、連字符分隔符號行以及每筆記錄一行,單元格由管道字元分隔。填寫生成器中的網格,工具將為您編寫語法,包括分隔符號行和任何對齊冒號。
如何對齊降價表中的列？
對齊設定在分隔符號行中的冒號:左側的冒號向左對齊,兩側的冒號在中心,右側的冒號向右對齊。從編輯器中的列標題中選擇對齊方式,然後自動產生正確的冒號位置。
我可以將 Excel 或 Google 表格範圍轉換為 Markdown 表嗎？
是的。 複製電子表格中的單元並將它們貼到導入面板中。 電子表格在剪貼簿上放置標籤分隔的文字，導入器會自動偵測並載入到網格中。
如何將管道字元放在表格單元格中？
文字管道必須使用反斜線轉義,否則渲染器會將其讀取為列分隔符號。在編輯器中正常鍵入管道,生成器會在輸出中為您轉義管道。
降價表格儲存格可以包含多行嗎？
不適用於真正的換行符,因為 GFM 表嚴格為每行一行。通常的解決方法是儲存格內的 HTML 換行標記,當您貼上儲存格包含換行符時,此工具會自動插入該標記。
為什麼我的表格在 GitHub 上呈現純文字？
分隔符號行幾乎總是原因:它必須是第二行,並且必須具有與標頭相同數量的儲存格。當表格位於段落後面或位於清單內時,表格之前缺少的空白行也可以停止渲染。
我必須對列進行填充，以便來源對齊嗎？
不,渲染器會忽略額外的空間,因此未添加的表格顯示相同。填充的存在是為了人類在編輯器或差異中讀取原始檔案。如果您喜歡緊湊的來源,請使用填充輸出切換將其關閉。
到處都支援降價表嗎？
表格是 GitHub 風味 Markdown 擴展,而不是原始 CommonMark 規範的一部分。 GitHub、GitLab、Obsidian、Notion、Docusaurus 和大多數靜態網站產生器都支援它們,但一些最小的渲染器不支援它們。如果您的輸出是其中之一,請將輸出切換到 HTML。
