การแสดงแท็ก C# ‹summary› ในหน้า Jekyll Github โดยใช้ Highlight.js

หากต้องการแสดง โค้ดได้สำเร็จด้วย HTML แบบง่าย ฉันได้เพิ่ม Highlight.js ใน บล็อกที่ใช้ Jekyll ของฉันซึ่งทำงานบน หน้า Github

<!--Add Highlight.js https://highlightjs.org/download/ -->
<link rel="stylesheet" href="/th//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>

รหัสนี้ถูกเพิ่มใน ไฟล์ .md นี้ ซึ่งแสดงที่นี่

ทุกอย่างกำลังได้รับการแสดงผล ยกเว้นแท็ก <summary> เครื่องมือเน้นข้อความ เข้าใจผิดว่าเป็น HTML ปกติหรือไม่

คำถาม:

นักพัฒนาจะแน่ใจได้อย่างไรว่าทุกอย่างระหว่าง <pre> <code class="csharp"> ถึง </code> </pre> รวมถึง <summary> แท็กแสดงโดยใช้ Highlight.js ในสถานการณ์เช่นนี้


javascript jekyll c# github-pages highlight
person Zameer Ansari    schedule 30.12.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
3
arrow_downward

code แท็ก HTML ใช้ เนื้อหาการใช้ถ้อยคำ ซึ่งหมายความว่าจะจัดการกับแท็ก HTML ปกติ เช่น <summary> เป็นโค้ด HTML ปกติดังนั้นจึงละเว้นเอาต์พุต

เพื่อหลีกเลี่ยงปัญหานี้ คุณจะต้องเข้ารหัสแท็กทั้งหมดอย่างถูกต้อง:

<pre>
<code class="csharp">

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

</code>
</pre>
person Fabio Poloni    schedule 30.12.2015
comment
นี่เป็นสิ่งที่สมบูรณ์แบบและเป็นประโยชน์ ขอบคุณ! - person Zameer Ansari; 30.12.2015

arrow_upward
7
arrow_downward

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 lexers ทั้งหมดที่มีอยู่ที่นี่

person David Jacquel    schedule 30.12.2015
comment
+3 นี่เจ๋ง! ฉันกังวลกับเซิร์ฟเวอร์มากกว่าลูกค้ามาก;) - person Zameer Ansari; 31.12.2015