javascript - Mostrando etiquetas C#<summary> en las páginas de Jekyll Github usando Highlight.js

github-pages

Question

Para mostrar códigos con éxito con HTML simple , agregué Highlight.js en mi blog basado en Jekyll que se ejecuta en páginas de Github

<!--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>

Necesito mostrar el siguiente código C #, es decir, todo entre <pre> <code class="csharp"> y </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>

Este código se agrega en este archivo .md que se muestra aquí .

Todo se está procesando, excepto las etiquetas <summary> . ¿ El Highlighter lo malinterpreta como HTML normal?

Pregunta:

¿Cómo se asegura un desarrollador de que todo entre <pre> <code class="csharp"> y </code> </pre> incluyendo esa etiqueta <summary> se muestre usando Highlight.js en tales escenarios?

Answer 1

El code HTML Tag utiliza contenido de fraseo, lo que significa que tratará las etiquetas HTML normales como <summary> como código HTML normal y, por lo tanto, omite la salida.

Para evitar este problema, tendría que codificar correctamente todas las etiquetas:

<pre>
<code class="csharp">

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

</code>
</pre>

Answer 2

Jekyll tiene una etiqueta de resaltado y css ( _sass/_syntax-highlighting.scss ) a bordo.

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

Esto funciona fuera de la caja sin necesidad de sobrecarga del lado del cliente. Todos los lexers de Pygment disponibles están here .