From 2cfbfb9d1f26c3b8b743ef5742a74d886786b39d Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Wed, 2 Apr 2025 15:27:03 +0200 Subject: [PATCH 1/4] Fix copy-paste of code blocks with code callouts --- docs/syntax/code.md | 36 +++++++++++++++++++ src/Elastic.Markdown/Assets/copybutton.ts | 4 +++ src/Elastic.Markdown/Assets/markdown/code.css | 8 +++-- .../EnhancedCodeBlockHtmlRenderer.cs | 14 ++++++-- 4 files changed, 56 insertions(+), 6 deletions(-) diff --git a/docs/syntax/code.md b/docs/syntax/code.md index 4dc1c8c90..15524985a 100644 --- a/docs/syntax/code.md +++ b/docs/syntax/code.md @@ -195,6 +195,42 @@ var client = new ElasticsearchClient("", apiKey); :::: +#### Align callouts + +You can align callouts with spaces. + +::::{tab-set} + +:::{tab-item} Output + +```yaml +foo: 1 <1> +barbar: 2 <2> +bazbazbaz: 3 <3> +``` + +1. Foo +2. Bar +3. Baz + +::: + +:::{tab-item} Markdown +````markdown +```yaml +foo: 1 <1> +barbar: 2 <2> +bazbazbaz: 3 <3> +``` + +1. Foo +2. Bar +3. Baz +```` +::: + +:::: + #### Disable callouts You can disable callouts by adding a code block argument `callouts=false`. diff --git a/src/Elastic.Markdown/Assets/copybutton.ts b/src/Elastic.Markdown/Assets/copybutton.ts index 9e4fa247c..f1c93315f 100644 --- a/src/Elastic.Markdown/Assets/copybutton.ts +++ b/src/Elastic.Markdown/Assets/copybutton.ts @@ -215,6 +215,10 @@ const addCopyButtonToCodeCells = () => { outputLines.push(line) } } + + for (let i = 0; i < outputLines.length; i++) { + outputLines[i] = outputLines[i].replace(/\s+$/, '') + } // If no lines with the prompt were found then just use original lines if (lineGotPrompt.some((v) => v === true)) { diff --git a/src/Elastic.Markdown/Assets/markdown/code.css b/src/Elastic.Markdown/Assets/markdown/code.css index b93fe66f8..1c9ea3da1 100644 --- a/src/Elastic.Markdown/Assets/markdown/code.css +++ b/src/Elastic.Markdown/Assets/markdown/code.css @@ -9,6 +9,7 @@ @apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm; background-color: #22272e; mix-blend-mode: unset; + line-height: 1.5em; } code:first-child { @apply rounded-t-sm; @@ -23,8 +24,10 @@ pre code .code-callout { @apply ml-1; - transform: translateY(-1px); user-select: none; + &::after { + content: attr(data-index); + } } ol.code-callouts { @@ -48,7 +51,7 @@ pre code .code-callout, ol.code-callouts li::before { - @apply bg-blue-elastic inline-flex size-5 items-center justify-center rounded-full font-mono text-xs! text-white!; + @apply bg-blue-elastic inline-flex size-4.5 items-center justify-center rounded-full font-mono text-xs! text-white!; } code { @@ -57,7 +60,6 @@ line-height: 1.4em; padding-left: 0.2em; padding-right: 0.2em; - letter-spacing: 0.02em; text-decoration: inherit; font-weight: inherit; mix-blend-mode: multiply; diff --git a/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs b/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs index c4e2d8df6..13aed7fc0 100644 --- a/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs +++ b/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs @@ -60,16 +60,24 @@ private static void RenderCodeBlockLines(HtmlRenderer renderer, EnhancedCodeBloc private static void RenderCodeBlockLine(HtmlRenderer renderer, EnhancedCodeBlock block, StringSlice slice, int lineNumber) { + var originalLength = slice.Length; + _ = slice.TrimEnd(); + var removedSpaces = originalLength - slice.Length; _ = renderer.WriteEscape(slice); - RenderCallouts(renderer, block, lineNumber); + RenderCallouts(renderer, block, lineNumber, removedSpaces); _ = renderer.WriteLine(); } - private static void RenderCallouts(HtmlRenderer renderer, EnhancedCodeBlock block, int lineNumber) + private static void RenderCallouts(HtmlRenderer renderer, EnhancedCodeBlock block, int lineNumber, int removedSpaces) { var callOuts = FindCallouts(block.CallOuts, lineNumber + 1); foreach (var callOut in callOuts) - _ = renderer.Write($"{callOut.Index}"); + { + // This adds a span with the same width as the removed spaces + // to ensure the callout number is aligned with the code + _ = renderer.Write($""); + _ = renderer.Write($""); + } } private static IEnumerable FindCallouts( From 681ad8b1c7702d7290db0c6c390554aaf6863eba Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Wed, 2 Apr 2025 15:38:33 +0200 Subject: [PATCH 2/4] Revert changes to copybutton.ts --- src/Elastic.Markdown/Assets/copybutton.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Elastic.Markdown/Assets/copybutton.ts b/src/Elastic.Markdown/Assets/copybutton.ts index f1c93315f..9e4fa247c 100644 --- a/src/Elastic.Markdown/Assets/copybutton.ts +++ b/src/Elastic.Markdown/Assets/copybutton.ts @@ -215,10 +215,6 @@ const addCopyButtonToCodeCells = () => { outputLines.push(line) } } - - for (let i = 0; i < outputLines.length; i++) { - outputLines[i] = outputLines[i].replace(/\s+$/, '') - } // If no lines with the prompt were found then just use original lines if (lineGotPrompt.some((v) => v === true)) { From 2fcda9358994e692a3c59b50dfb300dd50b24c90 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Wed, 2 Apr 2025 15:46:46 +0200 Subject: [PATCH 3/4] Fix tests --- tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs | 4 ++-- .../CodeBlocks/CodeBlockArgumentsTests.cs | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs b/tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs index af2f3c0b2..cf4a70c13 100644 --- a/tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs +++ b/tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs @@ -121,9 +121,9 @@ public void RendersExpectedHtml() => Html.ReplaceLineEndings().Should().Contain("""
- 
var x = 1; 1
+		                      		
var x = 1;
 		                      var y = x - 2;
-		                      var z = y - 2; 2
+		                      var z = y - 2;
diff --git a/tests/Elastic.Markdown.Tests/CodeBlocks/CodeBlockArgumentsTests.cs b/tests/Elastic.Markdown.Tests/CodeBlocks/CodeBlockArgumentsTests.cs index 9f240dc6d..703d5625f 100644 --- a/tests/Elastic.Markdown.Tests/CodeBlocks/CodeBlockArgumentsTests.cs +++ b/tests/Elastic.Markdown.Tests/CodeBlocks/CodeBlockArgumentsTests.cs @@ -95,7 +95,7 @@ 1. This is a callout ) { [Fact] - public void Render() => Html.Should().Contain("1"); + public void Render() => Html.Should().Contain(""); [Fact] public void HasNoErrors() => Collector.Diagnostics.Should().HaveCount(0); From 3e8f4c6029eb97f36bebc607f30f3de12ec23f1c Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Wed, 2 Apr 2025 15:51:27 +0200 Subject: [PATCH 4/4] Naming --- .../Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs b/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs index 13aed7fc0..272f15cbe 100644 --- a/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs +++ b/src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs @@ -68,14 +68,14 @@ private static void RenderCodeBlockLine(HtmlRenderer renderer, EnhancedCodeBlock _ = renderer.WriteLine(); } - private static void RenderCallouts(HtmlRenderer renderer, EnhancedCodeBlock block, int lineNumber, int removedSpaces) + private static void RenderCallouts(HtmlRenderer renderer, EnhancedCodeBlock block, int lineNumber, int indent) { var callOuts = FindCallouts(block.CallOuts, lineNumber + 1); foreach (var callOut in callOuts) { // This adds a span with the same width as the removed spaces // to ensure the callout number is aligned with the code - _ = renderer.Write($""); + _ = renderer.Write($""); _ = renderer.Write($""); } }