To show codes successfully with simple HTML, I have added Highlight.js in my Jekyll based blog which is running on Github pages

<!--Add Highlight.js https://highlightjs.org/download/ -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

<!-- Using Highight.js https://highlightjs.org/usage/-->
<script>
  hljs.initHighlightingOnLoad();
</script>

I need to show the below C# code i.e. everything between <pre> <code class="csharp"> and </code> </pre>:

<pre>
<code class="csharp">

/// <summary>
/// Main class of the project
/// </summary>
class Program
{
    /// <summary>
    /// Main entry point of the program
    /// </summary>
    /// <param name="args">Command line args</param>
    static void Main(string[] args)
    {
        //Do stuff
    }
}

</code>
</pre>
     

This code is added in this .md file which is displayed here.

Everything is getting rendered, except <summary> tags. Is the Highlighter misunderstanding it as normal HTML?

Question:

How do a developer make sure that everything between <pre> <code class="csharp"> and </code> </pre> including that <summary> tag is displayed using Highlight.js in such scenarios?

Jekyll has highlight tag and css (_sass/_syntax-highlighting.scss) onboard.

{% highlight csharp %}
/// <summary>
/// Main class of the project
/// </summary>
class Program
{
    /// <summary>
    /// Main entry point of the program
    /// </summary>
    /// <param name="args">Command line args</param>
    static void Main(string[] args)
    {
        //Do stuff
    }
}
{% endhighlight %}

This works out of the box with no need to client side overload. All Pygment lexers available are here.

The code HTML Tag uses Phrasing Content which means it will treat regular HTML Tags such as <summary> as regular HTML Code and therefore omits the output.

To avoid this problem you'd have to properly encode all tags:

<pre>
<code class="csharp">

    /// &lt;summary&gt;
    /// Summary description for the function or property goes here
    /// &lt;/summary&gt;

</code>
</pre>