Fix appearance of multiple API calls in console codeblock

NOTICE.txt

@@ -555,5 +555,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-

docs/syntax/code.md

@@ -267,10 +267,6 @@ project:
 
 ### Console code blocks
 
-:::{note}
-This feature is still being developed.
-:::
-
 We document a lot of API endpoints at Elastic. For these endpoints, we support `console` as a language. The term console relates to the dev console in kibana which users can link to directly from these code snippets.
 
 In a console code block, the first line is highlighted as a dev console string and the remainder as json:
@@ -309,6 +305,54 @@ GET /mydocuments/_search
 
 ::::
 
+Console code blocks now support multiple API calls within a single code block. When you have multiple console commands, they are displayed as separate sections within the same block with proper visual separation:
+
+::::{tab-set}
+
+:::{tab-item} Output
+
+```console
+GET /mydocuments/_search
+{
+    "from": 1,
+    "query": {
+        "match_all" {}
+    }
+}
+
+POST /mydocuments/_doc
+{
+    "title": "New Document",
+    "content": "This is a sample document"
+}
+```
+
+:::
+
+:::{tab-item} Markdown
+
+````markdown
+```console
+GET /mydocuments/_search
+{
+    "from": 1,
+    "query": {
+        "match_all" {}
+    }
+}
+
+POST /mydocuments/_doc
+{
+    "title": "New Document",
+    "content": "This is a sample document"
+}
+```
+````
+
+:::
+
+::::
+
 ### Code block substitutions
 
 You can use substitutions to insert reusable values into your code block examples.

docs/testing/index.md

@@ -31,3 +31,70 @@ The files in this directory are used for testing purposes. Do not edit these fil
         "key": "value"
       }
       ```
+
+```console
+PUT metricbeat-2016.05.30/_doc/1?refresh <1>
+{"system.cpu.idle.pct": 0.908}
+PUT metricbeat-2016.05.31/_doc/1?refresh <2>
+{"system.cpu.idle.pct": 0.105}
+```
+1. test 1
+2. test 2
+
+```console
+POST _reindex
+{
+  "max_docs": 10,
+  "source": {
+    "index": "my-index-000001",
+    "query": {
+      "function_score" : {
+        "random_score" : {},
+        "min_score" : 0.9
+      }
+    }
+  },
+  "dest": {
+    "index": "my-new-index-000001"
+  }
+}
+```
+
+```console
+GET metricbeat-2016.05.30-1/_doc/1
+GET metricbeat-2016.05.31-1/_doc/1
+```
+
+```console
+PUT my-index-000001
+{
+  "mappings": {
+    "enabled": false <1>
+  }
+}
+
+PUT my-index-000001/_doc/session_1
+{
+  "user_id": "kimchy",
+  "session_data": {
+    "arbitrary_object": {
+      "some_array": [ "foo", "bar", { "baz": 2 } ]
+    }
+  },
+  "last_updated": "2015-12-06T18:20:22"
+}
+
+GET my-index-000001/_doc/session_1 <2>
+
+GET my-index-000001/_mapping <3>
+```
+
+1. The entire mapping is disabled.
+2. The document can be retrieved.
+3. Checking the mapping reveals that no fields have been added.
+
+```javascript
+const foo = "bar"; <1>
+```
+
+1. This is a JavaScript code block.

src/Elastic.Documentation.Site/Assets/markdown/code.css

@@ -19,8 +19,13 @@
 			code:last-child {
 				@apply rounded-b-sm;
 			}
-			code.language-apiheader {
-				@apply border-b-grey-80 border-b-1;
+			code.language-apiheader + code.language-json {
+				@apply -mt-6 pt-0!;
+			}
+
+			code.language-json + code.language-apiheader,
+			code.language-apiheader + code.language-apiheader {
+				@apply border-t-grey-100 border-t-1 border-dotted;
 			}
 		}
 

src/Elastic.Markdown/Myst/CodeBlocks/Code.cshtml

@@ -8,6 +8,22 @@
 				<a class="headerlink" href="@Model.CrossReferenceName" title="Link to this code">¶</a>
 			</div>
 		}
-		<pre>@if (!string.IsNullOrEmpty(Model.ApiCallHeader)) { <code class="language-apiheader">@Model.ApiCallHeader</code> }@(Model.RenderBlock())</pre>
+		<pre>
+		@if (Model.ApiSegments.Count > 0)
+		{
+			@foreach (var segment in Model.ApiSegments)
+			{
+				<code class="language-apiheader">@(Model.RenderLineWithCallouts(segment.Header, segment.LineNumber))</code>
+				@if (segment.ContentLinesWithNumbers.Count > 0)
+				{
+					<code class="language-json">@(Model.RenderContentLinesWithCallouts(segment.ContentLinesWithNumbers))</code>
+				}
+			}
+		}
+		else
+		{
+			@(Model.RenderBlock())
+		}
+		</pre>
 	</div>
 </div>

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

@@ -9,7 +9,7 @@ namespace Elastic.Markdown.Myst.CodeBlocks;
 
 public class CodeViewModel
 {
-	public required string? ApiCallHeader { get; init; }
+	public required List<ApiSegment> ApiSegments { get; init; }
 	public required string? Caption { get; init; }
 	public required string Language { get; init; }
 	public required string? CrossReferenceName { get; init; }
@@ -29,4 +29,53 @@ public HtmlString RenderBlock()
 		DocumentationObjectPoolProvider.HtmlRendererPool.Return(subscription);
 		return new HtmlString(result);
 	}
+
+	public HtmlString RenderLineWithCallouts(string content, int lineNumber)
+	{
+		if (EnhancedCodeBlock?.CallOuts == null)
+			return new HtmlString(content);
+
+		var callouts = EnhancedCodeBlock.CallOuts.Where(c => c.Line == lineNumber);
+		if (!callouts.Any())
+			return new HtmlString(content);
+
+		var line = content;
+		var html = new System.Text.StringBuilder();
+
+		// Remove callout markers from the line
+		foreach (var callout in callouts)
+		{
+			var calloutPattern = $"<{callout.Index}>";
+			line = line.Replace(calloutPattern, "");
+		}
+		line = line.TrimEnd();
+
+		_ = html.Append(line);
+
+		// Add callout HTML after the line
+		foreach (var callout in callouts)
+		{
+			_ = html.Append($"<span class=\"code-callout\" data-index=\"{callout.Index}\"></span>");
+		}
+
+		return new HtmlString(html.ToString());
+	}
+
+	public HtmlString RenderContentLinesWithCallouts(List<(string Content, int LineNumber)> contentLinesWithNumbers)
+	{
+		if (contentLinesWithNumbers.Count == 0)
+			return HtmlString.Empty;
+
+		var html = new System.Text.StringBuilder();
+		for (var i = 0; i < contentLinesWithNumbers.Count; i++)
+		{
+			var (content, lineNumber) = contentLinesWithNumbers[i];
+
+			if (i > 0)
+				_ = html.Append('\n');
+
+			_ = html.Append(RenderLineWithCallouts(content, lineNumber));
+		}
+		return new HtmlString(html.ToString());
+	}
 }

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

@@ -10,6 +10,14 @@
 
 namespace Elastic.Markdown.Myst.CodeBlocks;
 
+public class ApiSegment
+{
+	public string Header { get; set; } = "";
+	public List<string> ContentLines { get; set; } = [];
+	public int LineNumber { get; set; }
+	public List<(string Content, int LineNumber)> ContentLinesWithNumbers { get; set; } = [];
+}
+
 public class EnhancedCodeBlock(BlockParser parser, ParserContext context)
 	: FencedCodeBlock(parser), IBlockExtension
 {
@@ -31,5 +39,5 @@ public class EnhancedCodeBlock(BlockParser parser, ParserContext context)
 
 	public string? Caption { get; set; }
 
-	public string? ApiCallHeader { get; set; }
+	public List<ApiSegment> ApiSegments { get; set; } = [];
 }

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

@@ -128,7 +128,7 @@ protected override void Write(HtmlRenderer renderer, EnhancedCodeBlock block)
 			CrossReferenceName = string.Empty,// block.CrossReferenceName,
 			Language = block.Language,
 			Caption = block.Caption,
-			ApiCallHeader = block.ApiCallHeader,
+			ApiSegments = block.ApiSegments,
 			EnhancedCodeBlock = block
 		});