Fix appearance of multiple API calls in console codeblock

Author: reakaleek

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,34 @@ 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
+{"system.cpu.idle.pct": 0.908}
+PUT metricbeat-2016.05.31/_doc/1?refresh
+{"system.cpu.idle.pct": 0.105}
+```
+
+```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
+```

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

@@ -19,8 +19,16 @@
 			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 pt-0! -mt-3;
+			}
+			
+			code.language-json + code.language-apiheader {
+				@apply border-t-grey-90 border-t-1;
+			}
+			
+			code.language-apiheader + code.language-apiheader {
+				@apply border-t-grey-90 border-t-1;
 			}
 		}
 

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">@segment.Header</code>
+				@if (segment.ContentLines.Count > 0)
+				{
+					<code class="language-json">@string.Join("\n", segment.ContentLines)</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; }

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

@@ -10,6 +10,12 @@
 
 namespace Elastic.Markdown.Myst.CodeBlocks;
 
+public class ApiSegment
+{
+	public string Header { get; set; } = "";
+	public List<string> ContentLines { get; set; } = [];
+}
+
 public class EnhancedCodeBlock(BlockParser parser, ParserContext context)
 	: FencedCodeBlock(parser), IBlockExtension
 {
@@ -31,5 +37,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
 		});