Menampilkan tag C# ‹ringkasan› di halaman Jekyll Github menggunakan Highlight.js

Untuk menampilkan kode berhasil dengan HTML sederhana, saya telah menambahkan Highlight.js di blog berbasis Jekyll saya yang berjalan di halaman Github

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

Saya perlu menunjukkan kode C# di bawah ini, yaitu segala sesuatu antara <pre> <code class="csharp"> dan </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>

Kode ini ditambahkan di file .md ini yang ditampilkan di sini.

Semuanya dirender, kecuali tag <summary>. Apakah Penyorot salah memahaminya sebagai HTML biasa?

Pertanyaan:

Bagaimana cara pengembang memastikan bahwa segala sesuatu antara <pre> <code class="csharp"> dan </code> </pre> termasuk <summary> tag ditampilkan menggunakan Highlight.js dalam skenario seperti itu?


javascript jekyll c# github-pages highlight
person Zameer Ansari    schedule 30.12.2015    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

code Tag HTML menggunakan Frasa Konten yang artinya akan memperlakukan Tag HTML biasa seperti <summary> sebagai Kode HTML biasa dan karenanya menghilangkan output.

Untuk menghindari masalah ini, Anda harus menyandikan semua tag dengan benar:

<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
Ini sempurna dan bermanfaat. Terima kasih! - person Zameer Ansari; 30.12.2015

arrow_upward
7
arrow_downward

Jekyll memiliki tag highlight dan css (_sass/_syntax-highlighting.scss) di dalamnya.

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

Ini berfungsi dengan baik tanpa perlu membebani sisi klien secara berlebihan. Semua lexer Pygment yang tersedia ada di sini.

person David Jacquel    schedule 30.12.2015
comment
+3 ini keren! Saya lebih mementingkan server daripada klien;) - person Zameer Ansari; 31.12.2015