highlightjs-cshtml-razor
highlightjs-cshtml-razor copied to clipboard
Nested Razor blocks breaks formatting
Hi there - first and foremost thanks for the grammar!
I am finding that nested blocks of Razor break the formatting. Specifically I am using the following to illustrate this:
<markdown>
```cshtml
@@if (this)
{
<span>this</span>
@@if (this)
{
<span>this</span>
}
else if (that)
{
<span>that</span>
}
else {
<span>nope</span>
}
}
else if (that)
{
<span>that</span>
@@if (this)
{
<span>this</span>
}
else if (that)
{
<span>that</span>
}
else {
<span>nope</span>
}
}
else {
<span>nope</span>
@@if (this)
{
<span>this</span>
}
else if (that)
{
<span>that</span>
}
else {
<span>nope</span>
}
}
```
</markdown>
This results in the following HTML:
<code class="language-cshtml hljs language-cshtml-razor"><span class="hljs-built_in">@</span><span class="language-csharp"><span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>)
</span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">@</span><span class="language-csharp"><span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>)
</span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (that)
{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">that</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> </span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">nope</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span>
}
else if (that)
{
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>that<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-built_in">@</span><span class="language-csharp"><span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>)
</span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (that)
{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">that</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> </span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">nope</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span>
}
else {
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>nope<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-built_in">@</span><span class="language-csharp"><span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>)
</span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (that)
{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">that</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span><span class="language-csharp">
<span class="hljs-keyword">else</span> </span><span class="hljs-built_in">{</span><span class="language-csharp">
</span><span class="hljs-tag"><<span class="hljs-name">span</span>></span><span class="language-csharp">nope</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="language-csharp">
</span><span class="hljs-built_in">}</span>
}
</code>
Specifically, note the instances of e.g. }
, else if (that)
, {
, and else {
that have no surrounding HTML tags.
This ends up rendering (with the GitHub Dark theme) as such: