title: Showing C# <summary> tags in Jekyll Github pages using Highlight.js
body: <p>To show <a href="https://stackoverflow.com/a/11811335/2404470">codes successfully with simple HTML</a>, I have added <a href="https://highlightjs.org" rel="nofollow noreferrer">Highlight.js</a> in my <a href="http://xameeramir.github.io/" rel="nofollow noreferrer">Jekyll based blog</a> which is running on <a href="https://pages.github.com" rel="nofollow noreferrer">Github pages</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Add Highlight.js https://highlightjs.org/download/ --&gt;
  &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css"&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Using Highight.js https://highlightjs.org/usage/--&gt;
  &lt;script&gt;
    hljs.initHighlightingOnLoad();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I need to show the below <strong>C# code</strong> i.e. everything between <code>&lt;pre&gt; &lt;code class=&quot;csharp&quot;&gt;</code> and <code>&lt;/code&gt; &lt;/pre&gt;</code>:</p>
  <pre><code>&lt;pre&gt;
  &lt;code class=&quot;csharp&quot;&gt;
  
  /// &lt;summary&gt;
  /// Main class of the project
  /// &lt;/summary&gt;
  class Program
  {
      /// &lt;summary&gt;
      /// Main entry point of the program
      /// &lt;/summary&gt;
      /// &lt;param name=&quot;args&quot;&gt;Command line args&lt;/param&gt;
      static void Main(string[] args)
      {
          //Do stuff
      }
  }
  
  &lt;/code&gt;
  &lt;/pre&gt;
       
  </code></pre>
  <p>This code is added in <a href="https://github.com/xameeramir/xameeramir.github.io/blob/master/_posts/2015-11-22-vs-documentation.md" rel="nofollow noreferrer">this <code>.md</code> file</a> which is <a href="http://xameeramir.github.io/vs-documentation/" rel="nofollow noreferrer">displayed here</a>.</p>
  <p>Everything is getting rendered, except <a href="https://msdn.microsoft.com/en-us/library/2d6dt3kf.aspx" rel="nofollow noreferrer"><code>&lt;summary&gt;</code></a> tags. <em>Is <a href="https://highlightjs.org/" rel="nofollow noreferrer">the Highlighter</a> misunderstanding it as normal HTML?</em></p>
  <h1>Question:</h1>
  <p>How do a developer make sure that everything between <code>&lt;pre&gt; &lt;code class=&quot;csharp&quot;&gt;</code> and <code>&lt;/code&gt; &lt;/pre&gt;</code> including that <a href="https://msdn.microsoft.com/en-us/library/2d6dt3kf.aspx" rel="nofollow noreferrer"><code>&lt;summary&gt;</code></a> tag is displayed using <a href="https://highlightjs.org/" rel="nofollow noreferrer">Highlight.js</a> in such scenarios?</p>