使用 Highlight.js 在 Jekyll Github 页面中显示 C# <summary> 标签

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

显示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>

我需要显示下面的 C# 代码,即 <pre> <code class="csharp"></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 .md file which is displayed here

一切都在渲染,除了 <summary> tags. Is the Highlighter 误认为是正常的 HTML?

问题:

在这种情况下,开发人员如何确保 <pre> <code class="csharp"></code> </pre> 之间的所有内容,包括 <summary> tag is displayed using Highlight.js

code HTML Tag uses Phrasing Content 这意味着它将把 HTML 等常规 <summary> 标记视为常规 HTML 代码,因此省略输出。

为避免此问题,您必须正确编码所有标签:

<pre>
<code class="csharp">

    /// &lt;summary&gt;
    /// Summary description for the function or property goes here
    /// &lt;/summary&gt;

</code>
</pre>

Jekyll 有高亮标签和 css (_sass/_syntax-highlighting.scss) 板载。

{% 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 %}

这是开箱即用的,不需要客户端过载。 所有可用的 Pygment 词法分析器都是 here.