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 ie 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

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 .

Answer 2

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>