Skip to content

Commit 2807814

Browse files
authored
Fix rendering of code blocks with callouts and a block in between (#686)
* Fix rendering of code blocks with callouts and a block in between * fix
1 parent b090291 commit 2807814

File tree

3 files changed

+92
-5
lines changed

3 files changed

+92
-5
lines changed

docs/syntax/code.md

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ project:
5858

5959
:::
6060

61-
6261
:::{tab-item} Markdown
6362

6463
````markdown
@@ -75,6 +74,69 @@ project:
7574

7675
::::
7776

77+
You can also have one block element in between the code block and the callout list:
78+
79+
::::{tab-set}
80+
81+
:::{tab-item} Output
82+
83+
```javascript
84+
var input1 = "World"; // <1>
85+
var input2 = "Elastic"; // <2>
86+
87+
function render(input) {
88+
return `Hello, ${input}!`;
89+
}
90+
91+
render(input1);
92+
render(input2);
93+
```
94+
95+
**Inputs:**
96+
97+
1. `World`
98+
2. `Elastic`
99+
100+
**Outputs**:
101+
102+
1. `Hello, World!`
103+
2. `Hello, Elastic!`
104+
105+
:::
106+
107+
108+
:::{tab-item} Markdown
109+
110+
````markdown
111+
```javascript
112+
var input1 = "World"; // <1>
113+
var input2 = "Elastic"; // <2>
114+
115+
function render(input) {
116+
return `Hello, ${input}!`;
117+
}
118+
119+
render(input1);
120+
render(input2);
121+
```
122+
123+
**Inputs:**
124+
125+
1. `World`
126+
2. `Elastic`
127+
128+
**Outputs**:
129+
130+
1. `Hello, World!`
131+
2. `Hello, Elastic!`
132+
````
133+
134+
:::
135+
136+
::::
137+
138+
139+
78140

79141
#### Magic Callouts
80142

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@ protected override void Write(HtmlRenderer renderer, EnhancedCodeBlock block)
126126
});
127127

128128
RenderRazorSlice(slice, renderer, block);
129-
130129
if (!block.InlineAnnotations && callOuts.Count > 0)
131130
{
132131
var index = block.Parent!.IndexOf(block);
@@ -137,11 +136,18 @@ protected override void Write(HtmlRenderer renderer, EnhancedCodeBlock block)
137136
var siblingBlock = block.Parent[index + 1];
138137
if (siblingBlock is not ListBlock)
139138
{
140-
//allow one block of content in between
141-
if (index + 2 <= (block.Parent!.Count - 1))
142-
siblingBlock = block.Parent[index + 2];
139+
// allow one block of content in between
140+
// render it immediately and remove it, so it's not rendered twice
141+
if (index + 2 <= block.Parent.Count - 1)
142+
{
143+
_ = renderer.Render(block.Parent[index + 1]);
144+
_ = block.Parent.Remove(block.Parent[index + 1]);
145+
siblingBlock = block.Parent[index + 1];
146+
}
143147
if (siblingBlock is not ListBlock)
148+
{
144149
block.EmitError("Code block with annotations is not followed by a list");
150+
}
145151
}
146152
if (siblingBlock is ListBlock l && l.Count < callOuts.Count)
147153
{

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,25 @@ public void ParsesMagicCallOuts() => Block!.CallOuts
116116
.And.HaveCount(2)
117117
.And.OnlyContain(c => c.Text.StartsWith('<'));
118118

119+
[Fact]
120+
public void RendersExpectedHtml() =>
121+
Html.Should().Contain("""
122+
<div class="highlight-csharp notranslate">
123+
<div class="highlight">
124+
<pre><code class="language-csharp">var x = 1; <span class="code-callout" data-index="1">1</span>
125+
var y = x - 2;
126+
var z = y - 2; <span class="code-callout" data-index="2">2</span>
127+
</code></pre>
128+
</div>
129+
</div>
130+
<p><strong>OUTPUT:</strong></p>
131+
<ol class="code-callouts">
132+
<li>Marking the first callout</li>
133+
<li>Marking the second callout</li>
134+
</ol>
135+
""");
136+
137+
119138
[Fact]
120139
public void AllowsAParagraphInBetween() => Collector.Diagnostics.Should().BeEmpty();
121140
}

0 commit comments

Comments
 (0)