Pour afficher les codes avec succès avec un HTML simple , j'ai ajouté Highlight.js dans mon blog basé sur Jekyll qui fonctionne sur les pages 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>
J'ai besoin de montrer le code C # ci-dessous, c'est-à-dire tout entre <pre> <code class="csharp">
et </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>
Ce code est ajouté dans ce fichier .md
qui s'affiche ici .
Tout est rendu, sauf <summary>
balises <summary>
. Est-ce que le surligneur ne l' entend pas comme HTML normal?
Comment un développeur s'assure-t-il que tout entre <pre> <code class="csharp">
et </code> </pre>
incluant cette <summary>
s'affiche à l'aide de Highlight.js dans ces scénarios?
Le code
HTML Tag utilise Phrasing Content, ce qui signifie qu'il traitera régulièrement des balises HTML telles que <summary>
tant que code HTML régulier et, par conséquent, omet la sortie.
Pour éviter ce problème, vous devriez coder correctement toutes les étiquettes:
<pre> <code class="csharp"> /// <summary> /// Summary description for the function or property goes here /// </summary> </code> </pre>
Jekyll a mis en évidence le tag et css ( _sass/_syntax-highlighting.scss
) à bord.
{% 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 %}
Cela fonctionne hors de la boîte sans nécessité de surcharge côté client. Tous les lecteurs Pygment disponibles sont ici .