highlightjs-cshtml-razor icon indicating copy to clipboard operation
highlightjs-cshtml-razor copied to clipboard

Nested Razor blocks breaks formatting

Open nwoolls opened this issue 2 years ago • 0 comments

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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">that</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">nope</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">
    </span><span class="hljs-built_in">}</span>
}
else if (that)
{
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>that<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">that</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">nope</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">
    </span><span class="hljs-built_in">}</span>
}
else {
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>nope<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp"><span class="hljs-keyword">this</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">that</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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">&lt;<span class="hljs-name">span</span>&gt;</span><span class="language-csharp">nope</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</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:

Screenshot 2023-02-08 at 14-34-12 IDMWORKS MVC Template - Access Control

nwoolls avatar Feb 08 '23 19:02 nwoolls