Showing C# <summary> tags in Jekyll Github pages using Highlight.js

Question

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?

Answer 1

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>

Answer 2

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.