Evidenzia.js

Highlight.js è un evidenziatore di sintassi scritto in JavaScript. Funziona sia nel browser che sul server. Funziona praticamente con qualsiasi markup, non dipende da alcun framework e ha il rilevamento automatico della lingua.

Iniziare

Il minimo indispensabile per utilizzare highlight.js su una pagina Web è collegarsi alla libreria insieme a uno degli stili e chiamare initHighlightingOnLoad:

1
2
3
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Questo troverà ed evidenzierà il codice all'interno dei <pre><code>tag; tenta di rilevare automaticamente la lingua. Se il rilevamento automatico non funziona per te, puoi specificare la lingua nell'attributo class:

1
<pre><code class="html">...</code></pre>

L'elenco delle classi linguistiche supportate è disponibile nel riferimento alle classi . Le classi possono anche avere il prefisso language-o lang-.

Per disabilitare del tutto l'evidenziazione utilizzare la nohighlightclasse:

1
<pre><code class="nohighlight">...</code></pre>

Inizializzazione personalizzata

Quando hai bisogno di un po' più di controllo sull'inizializzazione di highlight.js, puoi utilizzare le funzioni highlightBlocke configure , che ti consentono di controllare cosa evidenziare e quando .

Ecco un modo equivalente per chiamare initHighlightingOnLoadutilizzando jQuery:

1
2
3
4
5
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

Puoi utilizzare qualsiasi tag invece <pre><code>di contrassegnare il tuo codice. Se non utilizzi un contenitore che preservi le interruzioni di riga dovrai configurare highlight.js per utilizzare il <br>tag:

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

Per altre opzioni fare riferimento alla documentazione di configure.

Lavoratori del web

È possibile eseguire l'evidenziazione all'interno di un web lavoratore per evitare di bloccare la finestra del browser mentre si gestiscono porzioni di codice molto grandi.

Nel tuo script principale:

1
2
3
4
5
6
addEventListener('load', function() {
  var code = document.querySelector('#code');
  var worker = new Worker('worker.js');
  worker.onmessage = function(event) { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
})

In lavoratore.js:

1
2
3
4
5
onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}

Ottenere la Biblioteca

Puoi ottenere highlight.js come script del browser ospitato o personalizzato o come modulo server. Lo script del browser supporta immediatamente sia AMD che CommonJS, quindi se lo desideri puoi utilizzare RequireJS o Browserify senza doverlo fare build dal sorgente. Anche il modulo server funziona perfettamente con Browserify, ma c'è la possibilità di utilizzare una build specifica per i browser piuttosto che qualcosa pensata per un server. Vai alla pagina di download per tutte le opzioni.

Non collegarsi direttamente a GitHub. La libreria non dovrebbe funzionare direttamente dalla fonte, richiede la creazione. Se nessuna delle opzioni preconfezionate funziona per te, fai riferimento alla documentazione di creazione .

Il pacchetto ospitato su CDN non ha tutte le lingue. Altrimenti sarebbe troppo grande. Se non vedi la lingua che ti serve nella sezione "Comune" , può essere aggiunta manualmente:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

Su Almond. È necessario utilizzare l'ottimizzatore per assegnare un nome al modulo. Ad esempio:

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Licenza

Highlight.js è rilasciato sotto licenza BSD. Consulta il file LICENSE per i dettagli.

Collegamenti

Il sito ufficiale della biblioteca è https://highlightjs.org/ .

Ulteriore documentazione approfondita per l'API e altri argomenti è disponibile all'indirizzo http://highlightjs.readthedocs.io/ .

Autori e contributori sono elencati nel file AUTHORS.en.txt .