问题

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?

回答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>

回答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.

来源：https://stackoverflow.com/questions/34532476/showing-c-sharp-summary-tags-in-jekyll-github-pages-using-highlight-js

标签

javascript