Le surbrillance automatique échoue pour certains blocs de code clôturés

Contribuer Bug
1

Cela se produit dans ma configuration de développement, sur le forum Discourse en direct https://discourse.gohugo.io/ et sur le terrain de jeu Discourse.

En général, lorsqu’un bloc de code clôturé n’a pas de langage défini, nous obtenons une détection automatique. Cela réussit dans une utilisation normale de Highlight.JS (node ou navigateur) à chaque fois en sélectionnant quelque chose.

Discourse semble sauvegarder ces blocs sous forme de <code class="lang-auto">, ce qui n’est pas un langage valide :wink:

J’ai discuté avec le bot IA ask.discourse.cm…30386 :
il a dit que vous faites de la magie AU MOMENT DE L’EXÉCUTION en supprimant le “lang-auto” et en laissant highlight.js refaire le travail automatique. Il semble que cette mise à jour ne se produise pas toujours AVANT que highlight.JS ne touche au code. Cela ressemble donc à une particularité de l’intégration de highlight.js et de l’implémentation de la détection automatique dans Discourse.

Désactiver un langage par défaut ne fonctionnera pas non plus, car alors la “suppression de lang-auto” ne fonctionne pas et il semble que la méthode Discourse ne refasse pas la détection automatique.

  • définir le langage manuellement fonctionne à chaque fois – pour les langages intégrés et un langage personnalisé (hugo-templates) ajouté via l’API Plugin (registerHLJSLanguage) en tant que composant de thème.
  • sans langage, cela échoue selon les conditions de course content(), les timings

Définir le langage par défaut sur “text” ne sera pas une solution car nous voulons que cela soit mis en surbrillance et nous voulons la détection automatique pour l’utilisabilité (et cela fonctionne…)

Voici un exemple Markdown, où le deuxième bloc de code échoue (bien sûr seulement si le langage par défaut est défini sur “auto”. Facilement reproductible avec le markdown ci-dessous sur https://try.discourse.org/

et dans les 24h : Failed Discourse Autodetection breaks rendering of fenced code blocks - support - Discourse Demo

# Cela fonctionne

```
{{ $currentPagemd5 := md5 $currentPage.File.Path }}
    {{ $currentPagemd5ext := (print $currentPagemd5 ".json")}}
```

# Cela a échoué et assigné "lang-auto"

```
{{ $currentPage := . }}
{{ $jsonFile := "" }}
{{ with $currentPage.File }}
    {{ $currentPagemd5 := md5 $currentPage.File.Path }}
    {{ $currentPagemd5ext := (print $currentPagemd5 ".json")}}
    {{ $files := readDir "data/commits/" }}
    {{if gt (len $files ) 0}}
        <div class="bord-bas"></div>
        <div>
        <details>
            <summary>Changements de la page</summary>
            <div>
            {{ range $files }}
                {{ if eq .Name $currentPagemd5ext }}
                    {{ $jsonFile := $currentPagemd5 }}
                    {{ $data := index $.Site.Data.commits $jsonFile }}
                    <ul>
                    {{ range $data }}
                        <li>
                            {{ dateFormat "02/01/2006" .commit_date }} : {{ trim .message "\n" }} ({{ .author }})
                        </li>
                    {{ end }}
                    </ul>
                {{ end }}
            {{ end }}
            </div>
        </details>
        </div>
    {{ end }}
{{ end }}
```
2

Il se peut simplement que Discourse et HighlightJS ne parviennent pas à reconnaître le langage, ce qui explique ce comportement.

3

L’accent est mis sur Discourse et Highlight.JS

  • Highlight.JS seul détecte toujours la langue et la sélectionne

  • Dans Discourse, sans l’attribut lang, la langue n’est pas toujours détectée au moment de l’exécution.

Forum Hugo : 57307 Message 6 :

Voici un message du forum : Proposal: Add highlighting support for Go/Hugo templates to Discourse - #6 by irkode - Meta - HUGO

  • le premier bloc de code est introduit par ```hugo-html.
    cela donne <code="lang-hugo-html>
  • le deuxième bloc par ```
    cela donne <code=“lang-auto”>

les deux cas sont correctement mis en surbrillance.

Forum Hugo : 57367 Message 2 :

Et voici un autre où cela ne fonctionne pas : How to capture/generate revisions of page? - #2 by Welsh - support - HUGO

ici aussi, “lang-auto” est attribué, mais la détection automatique au moment de l’exécution ne fonctionne pas.

Cela dépend donc d’une manière ou d’une autre de l’implémentation de Discourse - éventuellement en fonction du contenu en raison de timeouts, de promesses …

4

Je me trompe peut-être, mais c’est ce que je vois dans le premier lien que vous avez posté :

image
image680×325 10.3 KB

Aucun des deux n’affiche lang-auto, et les deux sont mis en évidence de la même manière, bien que vous n’ayez pas spécifié le langage du bloc de code pour le second bloc de code.

5

Ceci est la Console développeur — elle affiche le code après que highlight.js a réussi à détecter automatiquement le langage.

Vous devrez examiner le code source de la page (Ctrl+u), où vous verrez lang-auto.

Ce qui déclenchera ensuite la méthode de surbrillance automatique de Discourse en supprimant lang-auto. Essayez de nouveau et vérifiez le deuxième message que j’ai lié ; c’est la même situation, mais là, la détection échoue.

Et oui — sans le framework Discourse autour, cela fonctionne.

6

Lors du passage à Highlight.JS pur :

  • un code enveloppé dans <code class="lang-auto"> ne sera pas mis en surbrillance à moins que nous ayons une grammaire pour “auto” :wink:

  • nous pourrions relancer la détection automatique pour ceux utilisant un plugin :

    hljs.addPlugin({
   'before:highlight': (ctx) => {
      if (ctx.language === 'auto') {
         result = hljs.highlightAuto(ctx.code);
         ctx.language = result.language
         ctx.result = result
      }
   }
});

Je n’ai pas réussi à faire fonctionner cela dans Discourse en raison de la manière dont les plugins et les grammaires sont intégrés à l’API, ainsi que de l’encapsulation DOM du moteur et des méthodes de highlight.js, et nous pourrions rencontrer des conditions de concurrence avec le rendu en direct par défaut de Discourse.

1 « J'aime »