L'evidenziazione automatica non funziona per alcuni blocchi di codice recintati

Contribuisci Bug
1

Questo si verifica nella mia configurazione di sviluppo, in un forum Discourse live https://discourse.gohugo.io/ e nel playground di Discourse.

In generale, quando un blocco di codice recintato non ha un linguaggio impostato, viene attivato il rilevamento automatico. Questo ha sempre successo in un utilizzo normale di Highlight.JS (node o browser) selezionando qualcosa.

Discourse sembra salvare tali blocchi come <code class="lang-auto">, che non è un linguaggio valido :wink:

Ho parlato con il Bot AI ask.discourse.cm…30386:
diceva che fate una magia IN TEMPO DI ESECUZIONE rimuovendo “lang-auto” e lasciando che highlight.js rifaccia il lavoro di rilevamento automatico. Sembra che questo aggiornamento non avvenga sempre PRIMA che highlight.JS tocchi il codice. Quindi sembra un particolare dell’integrazione di highlight.js e dell’implementazione del rilevamento automatico all’interno di Discourse.

Disabilitare un linguaggio predefinito non funzionerebbe neanche, perché allora la “rimozione di lang-auto” non funzionerebbe e sembra che il modo Discourse non rifaccia il rilevamento automatico.

  • impostare manualmente il linguaggio funziona sempre – per i linguaggi integrati e un linguaggio personalizzato (hugo-templates) aggiunto tramite la PluginAPI (registerHLJSLanguage) come componente del tema.
  • senza un linguaggio, fallisce a seconda delle condizioni di gara del contenuto(), dei tempi

Impostare il linguaggio predefinito su “text” non sarebbe una soluzione, perché vogliamo che sia evidenziato e vogliamo il rilevamento automatico per l’usabilità (e funziona…)

Ecco un esempio Markdown, dove il secondo blocco di codice fallisce (ovviamente solo se il linguaggio predefinito è impostato su “auto”. Facilmente riproducibile con il markdown qui sotto su https://try.discourse.org/

e entro 24h: Failed Discourse Autodetection breaks rendering of fenced code blocks - support - Discourse Demo

# Questo funziona

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

# Questo è fallito e ha assegnato "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>Modifiche alla pagina</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

Forse è semplicemente che Discourse e HighlightJS non riescono a riconoscere la lingua, rendendola quindi tale.

3

Qui l’accent è posto su Discourse e Highlight.JS

  • Highlight.JS da solo riconosce sempre la lingua e la seleziona

  • In Discourse, senza l’attributo lang, la lingua non viene sempre riconosciuta in fase di esecuzione.

Forum Hugo: 57307 Post 6:

Ecco un post dal forum: Proposal: Add highlighting support for Go/Hugo templates to Discourse - #6 by irkode - Meta - HUGO

  • il primo blocco di codice è introdotto con ```hugo-html.
    questo genera <code="lang-hugo-html>
  • il secondo blocco con ```
    questo genera <code=“lang-auto”>

in entrambi i casi l’evidenziazione della sintassi funziona correttamente.

Forum Hugo: 57367 Post 2:

Ecco un altro caso in cui non funziona: How to capture/generate revisions of page? - #2 by Welsh - support - HUGO

anche qui viene assegnato “lang-auto”, ma il riconoscimento automatico in fase di esecuzione non funziona.

Sembra quindi essere correlato in qualche modo all’implementazione di Discourse - eventualmente dipendente dal contenuto a causa di timeout, promise …

4

Forse mi sto sbagliando, ma ecco cosa vedo nel primo link che hai postato:

image
image680×325 10.3 KB

Nessuno dei due mostra lang-auto e entrambi sono evidenziati allo stesso modo, anche se non hai specificato la lingua del blocco di codice per il secondo blocco di codice.

5

Questa è la Console dello sviluppatore: mostra il codice dopo che highlight.js ha eseguito con successo il rilevamento automatico.

Dovrai esaminare il codice sorgente della pagina (Ctrl+u), dove vedrai lang-auto

che quindi attiverà il metodo di evidenziazione automatica di Discourse rimuovendo lang-auto. Riprova e controlla il secondo post che ho linkato: stessa situazione, ma lì il rilevamento fallisce.

E sì: senza il framework di Discourse intorno, funziona.

6

Quando si passa a Highlight.JS puro:

  • un codice avvolto in <code class="lang-auto"> non verrà evidenziato a meno che non abbiamo una grammatica per “auto” :wink:

  • potremmo riavviare l’auto-rilevamento per quelli che usano un plugin:

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

Non sono riuscito a farlo funzionare in Discourse a causa del modo in cui Plugin e Grammatiche sono integrate con l’API e a causa della capsulazione del DOM del motore e dei metodi di highlight.js, e potremmo incorrere in condizioni di gara con il rendering live predefinito di Discourse

1 Mi Piace