From fc3bf95e15be70347e2b7875a16816c3e65601ab Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Fri, 21 Feb 2025 11:54:07 +0100 Subject: [PATCH 1/3] Add table --- docs/syntax/tables.md | 60 +++++++++++++++---- .../Assets/markdown/table.css | 43 +++++++++++++ src/Elastic.Markdown/Assets/styles.css | 1 + .../Directives/DirectiveMarkdownExtension.cs | 3 + .../Myst/WrappedTableRenderer.cs | 19 ++++++ 5 files changed, 116 insertions(+), 10 deletions(-) create mode 100644 src/Elastic.Markdown/Assets/markdown/table.css create mode 100644 src/Elastic.Markdown/Myst/WrappedTableRenderer.cs diff --git a/docs/syntax/tables.md b/docs/syntax/tables.md index 339e0ee8b..3673834d1 100644 --- a/docs/syntax/tables.md +++ b/docs/syntax/tables.md @@ -6,24 +6,64 @@ A table is an arrangement of data with rows and columns. Each row consists of ce * a delimiter row separating the header from the data * zero or more data rows -## Notes +## Basic Table -* A leading and trailing pipe is recommended for clarity of reading -* Spaces between pipes and cell content are trimmed -* Block-level elements cannot be inserted in a table +::::{tab-set} -## GitHub Flavored Markdown (GFM) Table - -You can use the GFM table syntax to create a table: - -``` +:::{tab-item} Output | Country | Capital | | ------- | --------------- | | USA | Washington D.C. | | Canada | Ottawa | -``` +| Mexico | Mexico City | +| Brazil | Brasília | +| UK | London | +::: +:::{tab-item} Markdown +```markdown | Country | Capital | | ------- | --------------- | | USA | Washington D.C. | | Canada | Ottawa | +| Mexico | Mexico City | +| Brazil | Brasília | +| UK | London | +::: + +:::: + +:::{note} + +* A leading and trailing pipe is recommended for clarity of reading +* Spaces between pipes and cell content are trimmed +* Block-level elements cannot be inserted in a table + +::: + + +## Responsive Table + +Every table is responsive by default. The table will automatically scroll horizontally when the content is wider than the viewport. + +::::{tab-set} + +:::{tab-item} Output +| Product Name | Price ($) | Stock | Category | Rating | Color | Weight (kg) | Warranty (months) | +|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------| +| Laptop Pro | 1299.99 | 45 | Computer | 4.5 | Silver | 1.8 | 24 | +| Smart Watch | 299.99 | 120 | Wearable | 4.2 | Black | 0.045 | 12 | +| Desk Chair | 199.50 | 78 | Furniture | 4.8 | Gray | 12.5 | 36 | +::: + +:::{tab-item} Markdown +```markdown +| Product Name | Price ($) | Stock | Category | Rating | Color | Weight (kg) | Warranty (months) | +|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------| +| Laptop Pro | 1299.99 | 45 | Computer | 4.5 | Silver | 1.8 | 24 | +| Smart Watch | 299.99 | 120 | Wearable | 4.2 | Black | 0.045 | 12 | +| Desk Chair | 199.50 | 78 | Furniture | 4.8 | Gray | 12.5 | 36 | +::: +``` + +:::: diff --git a/src/Elastic.Markdown/Assets/markdown/table.css b/src/Elastic.Markdown/Assets/markdown/table.css new file mode 100644 index 000000000..e339e1eea --- /dev/null +++ b/src/Elastic.Markdown/Assets/markdown/table.css @@ -0,0 +1,43 @@ +@layer components { + .table-wrapper { + + @apply max-w-full overflow-x-auto my-4; + + table { + @apply w-full border-collapse; + } + + th, td { + @apply py-2 px-4 align-top min-w-30; + } + + th:first-of-type { + border-top-left-radius: var(--radius-sm); + } + th:last-of-type { + border-top-right-radius: var(--radius-sm); + } + tr:last-of-type td:first-of-type { + border-bottom-left-radius: var(--radius-sm); + } + tr:last-of-type td:last-of-type { + border-bottom-right-radius: var(--radius-sm); + } + + thead { + @apply font-semibold text-sm text-left; + } + + tbody { + + font-family: "Inter", sans-serif; + + tr { + @apply not-last:border-b-1 border-grey-30 hover:bg-grey-10; + /*&:nth-child(odd) {*/ + /* @apply bg-grey-10;*/ + /*}*/ + } + } + } +} diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index e16fa0016..09d794157 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/src/Elastic.Markdown/Assets/styles.css @@ -8,6 +8,7 @@ @import "./copybutton.css"; @import "./markdown/admonition.css"; @import "./markdown/dropdown.css"; +@import "./markdown/table.css"; #default-search::-webkit-search-cancel-button { padding-right: calc(var(--spacing) * 2); diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveMarkdownExtension.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveMarkdownExtension.cs index ffbd4473a..4f990e3b8 100644 --- a/src/Elastic.Markdown/Myst/Directives/DirectiveMarkdownExtension.cs +++ b/src/Elastic.Markdown/Myst/Directives/DirectiveMarkdownExtension.cs @@ -3,6 +3,7 @@ // See the LICENSE file in the project root for more information using Markdig; +using Markdig.Extensions.Tables; using Markdig.Parsers; using Markdig.Parsers.Inlines; using Markdig.Renderers; @@ -56,5 +57,7 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) } _ = renderer.ObjectRenderers.Replace(new SectionedHeadingRenderer()); + + _ = renderer.ObjectRenderers.Replace(new WrappedTableRenderer()); } } diff --git a/src/Elastic.Markdown/Myst/WrappedTableRenderer.cs b/src/Elastic.Markdown/Myst/WrappedTableRenderer.cs new file mode 100644 index 000000000..005a03ac1 --- /dev/null +++ b/src/Elastic.Markdown/Myst/WrappedTableRenderer.cs @@ -0,0 +1,19 @@ +// Licensed to Elasticsearch B.V under one or more agreements. +// Elasticsearch B.V licenses this file to you under the Apache 2.0 License. +// See the LICENSE file in the project root for more information + +using Markdig.Extensions.Tables; +using Markdig.Renderers; + +namespace Elastic.Markdown.Myst; + +public class WrappedTableRenderer : HtmlTableRenderer +{ + protected override void Write(HtmlRenderer renderer, Table table) + { + // Wrap the table in a div to allow for overflow scrolling + _ = renderer.Write("
"); + base.Write(renderer, table); + _ = renderer.Write("
"); + } +} From ccf8522bc41b24e09d9e236e98147fcd4b413bd1 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Fri, 21 Feb 2025 11:57:20 +0100 Subject: [PATCH 2/3] Fix link --- docs/syntax/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/index.md b/docs/syntax/index.md index 32acb8d79..712a68519 100644 --- a/docs/syntax/index.md +++ b/docs/syntax/index.md @@ -69,7 +69,7 @@ We support _some_ [GitHub Flavored Markdown (GFM) extensions](https://github.git ### Supported -* [](tables.md#github-flavored-markdown-gfm-table) +* [](tables.md#basic-table) * Strikethrough: ~~as seen here~~ ### Not supported From aced469d0c42a8af5a689ede582996e57adbc922 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Fri, 21 Feb 2025 12:28:52 +0100 Subject: [PATCH 3/3] Fine-tune --- src/Elastic.Markdown/Assets/markdown/table.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Elastic.Markdown/Assets/markdown/table.css b/src/Elastic.Markdown/Assets/markdown/table.css index e339e1eea..41f52a8ef 100644 --- a/src/Elastic.Markdown/Assets/markdown/table.css +++ b/src/Elastic.Markdown/Assets/markdown/table.css @@ -8,7 +8,7 @@ } th, td { - @apply py-2 px-4 align-top min-w-30; + @apply py-2 px-4 min-w-30; } th:first-of-type { @@ -25,7 +25,7 @@ } thead { - @apply font-semibold text-sm text-left; + @apply font-semibold text-sm text-left align-top; } tbody {