Fix copy-paste of code blocks with code callouts (#946)

* Fix copy-paste of code blocks with code callouts

* Revert changes to copybutton.ts

* Fix tests

* Naming

Author: reakaleek

docs/syntax/code.md

@@ -195,6 +195,42 @@ var client = new ElasticsearchClient("<CLOUD_ID>", 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`.

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;

src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs

@@ -61,16 +61,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 indent)
 	{
 		var callOuts = FindCallouts(block.CallOuts, lineNumber + 1);
 		foreach (var callOut in callOuts)
-			_ = renderer.Write($"<span class=\"code-callout\" data-index=\"{callOut.Index}\">{callOut.Index}</span>");
+		{
+			// This adds a span with the same width as the removed spaces
+			// to ensure the callout number is aligned with the code
+			_ = renderer.Write($"<span style=\"display: inline-block; width: {indent}ch\"></span>");
+			_ = renderer.Write($"<span class=\"code-callout\" data-index=\"{callOut.Index}\"></span>");
+		}
 	}
 
 	private static IEnumerable<CallOut> FindCallouts(

tests/Elastic.Markdown.Tests/CodeBlocks/CallOutTests.cs

@@ -121,9 +121,9 @@ public void RendersExpectedHtml() =>
 		Html.ReplaceLineEndings().Should().Contain("""
 		                      <div class="highlight-csharp notranslate">
 		                      	<div class="highlight">
-		                      		<pre><code class="language-csharp">var x = 1; <span class="code-callout" data-index="1">1</span>
+		                      		<pre><code class="language-csharp">var x = 1;<span style="display: inline-block; width: 1ch"></span><span class="code-callout" data-index="1"></span>
 		                      var y = x - 2;
-		                      var z = y - 2; <span class="code-callout" data-index="2">2</span>
+		                      var z = y - 2;<span style="display: inline-block; width: 1ch"></span><span class="code-callout" data-index="2"></span>
 		                      </code></pre>
 		                      	</div>
 		                      </div>

tests/Elastic.Markdown.Tests/CodeBlocks/CodeBlockArgumentsTests.cs

@@ -95,7 +95,7 @@ 1. This is a callout
 )
 {
 	[Fact]
-	public void Render() => Html.Should().Contain("<span class=\"code-callout\" data-index=\"1\">1</span>");
+	public void Render() => Html.Should().Contain("<span class=\"code-callout\" data-index=\"1\"></span>");
 
 	[Fact]
 	public void HasNoErrors() => Collector.Diagnostics.Should().HaveCount(0);