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?
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?
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">
/// <summary>
/// Summary description for the function or property goes here
/// </summary>
</code>
</pre>