Automatische Hervorhebung funktioniert bei einigen Code-Blöcken nicht

Dies tritt in meiner Entwicklungsumgebung auf, in einem Live-Discourse-Forum https://discourse.gohugo.io/ und im Discourse-Playground.

Im Allgemeinen wird bei Code-Blöcken mit Trennlinien (fenced code blocks), bei denen keine Sprache festgelegt ist, die automatische Erkennung aktiviert. Dies funktioniert bei einer normalen Highlight.JS-Nutzung (Node oder Browser) immer, indem etwas ausgewählt wird.

Discourse scheint solche Blöcke als <code class="lang-auto"> zu speichern, was keine gültige Sprache ist :wink:

Ich habe mit dem AI-Bot ask.discourse.cm…30386 gesprochen:
Er sagte, dass ihr einige Magie zur LAUFZEIT anwendet, um das „lang-auto“ zu entfernen und dann highlight.js die automatische Erkennung erneut ausführen lässt. Es sieht so aus, als ob diese Aktualisierung nicht immer stattfindet, BEVOR highlight.JS den Code bearbeitet. Das wirkt wie ein Fehler in der highlight.js-Integration und der Implementierung der automatischen Erkennung innerhalb von Discourse.

Das Deaktivieren einer Standardsprache funktioniert ebenfalls nicht, da dann das „Entfernen von lang-auto“ nicht funktioniert und es so aussieht, als ob der Discourse-Weg die automatische Erkennung nicht erneut ausführt.

  • Das manuelle Festlegen der Sprache funktioniert immer – für integrierte und eine benutzerdefinierte (hugo-templates) Sprache, die über die PluginAPI (registerHLJSLanguage) als Theme-Komponente hinzugefügt wurde.
  • Ohne Sprache schlägt es je nach Timing und Race Conditions von content() fehl.

Das Festlegen der Standardsprache auf „text“ ist keine Option, da wir möchten, dass sie hervorgehoben wird, und wir die automatische Erkennung aus Gründen der Benutzerfreundlichkeit wünschen (und sie funktioniert…).

Hier ist ein Markdown-Beispiel, bei dem der zweite Code-Block fehlschlägt (natürlich nur, wenn die Standardsprache auf „auto“ gesetzt ist). Leicht reproduzierbar mit dem unten stehenden Markdown auf https://try.discourse.org/

und innerhalb von 24 Stunden: Failed Discourse Autodetection breaks rendering of fenced code blocks - support - Discourse Demo

# Das funktioniert

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

# Das ist fehlgeschlagen und hat „lang-auto“ zugewiesen

```
{{ $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 }}
```

Vielleicht liegt es einfach daran, dass Discourse und HighlightJS die Sprache nicht erkennen können, weshalb sie so behandelt wird.

da liegt die Betonung auf Discourse und Highlight.JS

  • Highlight.JS alleine erkennt die Sprache immer und wählt sie aus

  • In Discourse wird ohne lang attribut die Sprache aber zur Laufzeit nicht immer erkannt.

Hugo Forum: 57307 Post 6:

Hier ist ein Post aus dem Forum: Proposal: Add highlighting support for Go/Hugo templates to Discourse - #6 by irkode - Meta - HUGO

  • erster code block ist mit ```hugo-html eingeleitet.
    das ergibt <code="lang-hugo-html>
  • der zweite block mit ```
    das ergibt <code=“lang-auto”>

beide fälle werden korrekt gehighlighted.

Hugo Forum: 57367 Post 2:

Und hier ein weiterer wo es nicht funktioniert: How to capture/generate revisions of page? - #2 by Welsh - support - HUGO

auch hier wird “lang-auto” zugewiesen, aber die automatische Erkennung zur Laufzeit funktioniert nicht.

Es hängt also irgendwie Discourse implementierung zusammen - eventuell abhängig com Inhalt wegen timesouts, promises …

Vielleicht missverstehe ich etwas, aber das ist, was ich im ersten von dir geposteten Link sehe:

Keiner von beiden zeigt lang-auto, und beide werden auf die gleiche Weise hervorgehoben, obwohl du für den zweiten Codeblock keine Programmiersprache angegeben hast.

Das ist die Entwicklerkonsole – sie zeigt den Code nachdem highlight.js die Sprache erfolgreich automatisch erkannt hat.

Du musst dir den Seitencode ansehen (Strg+U), wo du lang-auto sehen wirst.

Dies löst dann Discourse’ Art der automatischen Syntaxhervorhebung aus, indem lang-auto entfernt wird. Versuche es erneut und prüfe den zweiten Beitrag, den ich verlinkt habe – gleiche Situation, aber dort schlägt die Erkennung fehl.

Und ja – ohne das Discourse-Framework drumherum funktioniert es.

Beim Wechsel zu reinem Highlight.JS:

  • wird Code, der in <code class="lang-auto"> eingeschlossen ist, nicht hervorgehoben, es sei denn, wir haben eine Grammatik für „auto“ :wink:

  • wir könnten die automatische Erkennung für diejenigen neu starten, die ein Plugin verwenden:

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

Ich konnte das in Discourse nicht zum Laufen bringen, aufgrund der Art und Weise, wie Plugins und Grammatiken in die API integriert sind, und aufgrund der DOM-Kapselung der Highlight.JS-Engine und -Methoden, sowie der möglichen Race Conditions mit der standardmäßigen Live-Darstellung von Discourse.

1 „Gefällt mir“