highlight.js
v11.11.0 - Happy Holidays
Destaque.js é um marcador de sintaxe escrito em JavaScript. Funciona no navegador e também no servidor. Ele pode funcionar com praticamente qualquer marcação, não depende de outras estruturas e possui detecção automática de idiomas.
Conteúdo
requireimportComo sempre, os principais lançamentos contêm mudanças de ruptura que podem exigir ação dos usuários. Leia versão_11_upgrade.md para obter um resumo detalhado das mudanças de quebra e quaisquer ações que você precise executar.
Consulte Security.md para obter informações de suporte de longo prazo.
O mínimo necessário para usar o Highlight.js em uma página da web é vincular à biblioteca junto com um dos temas e chamando highlightAll :
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > Isso encontrará e destacará o código dentro das tags <pre><code> ; Ele tenta detectar o idioma automaticamente. Se a detecção automática não funcionar para você, ou você simplesmente prefere ser explícito, pode especificar o idioma manualmente usando o atributo class :
< pre > < code class =" language-html " > ... </ code > </ pre > Para aplicar o estilo Highlight.js no texto semestre, sem realmente destacá -lo, use o idioma plaintext :
< pre > < code class =" language-plaintext " > ... </ code > </ pre > Para pular o destaque de um bloco de código completamente, use a classe nohighlight :
< pre > < code class =" nohighlight " > ... </ code > </ pre >O mínimo nu para detectar automaticamente o idioma e destacar algum código.
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valuePara carregar apenas um subconjunto "comum" de idiomas populares:
hljs = require ( 'highlight.js/lib/common' ) ; Para destacar o código com um idioma específico, use highlight :
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value Consulte Importar a biblioteca para obter mais exemplos de require de uso import , etc. Para obter mais informações sobre o objeto de resultado retornado por highlight ou highlightAuto , consulte os documentos da API.
Destaque.js suporta mais de 180 idiomas na biblioteca principal. Existem também definições de idioma de terceiros disponíveis para suportar ainda mais idiomas. Você pode encontrar a lista completa de idiomas suportados em suportado_languages.md.
Se você precisar de um pouco mais de controle sobre a inicialização do destaque.js, poderá usar as funções highlightElement e configure . Isso permite controlar melhor o que destacar e quando .
Por exemplo, aqui está o equivalente difícil de chamar highlightAll , mas fazer o trabalho manualmente: em vez disso:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; Consulte a documentação para configure opções.
Recomendamos fortemente <pre><code> embrulhar para blocos de código. É bastante semântico e "Just Works" fora da caixa com zero brincalhões. É possível usar outros elementos HTML (ou combos), mas você pode precisar prestar atenção especial à preservação do Linebreaks.
Digamos que sua marcação para blocos de código use divs:
< div class =' code ' > ... </ div >Para destacar esses blocos manualmente:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; Sem usar uma etiqueta que preserva os quebra -linhas (como pre ), você precisará de alguns CSs adicionais para ajudar a preservá -los. Você também pode pré e pós-processo quebras de linha com um plug-in, mas recomendamos o uso do CSS .
Para preservar os quebra -linhas dentro de um div usando CSS:
div . code {
white-space : pre;
}Consulte HighlightJs/Vue-Plugin para um plug-in simples do Vue que funciona muito bem com o Highlight.js.
Um exemplo de vue-plugin em ação:
< div id =" app " >
<!-- bind to a data property named `code` -->
< highlightjs autodetect :code =" code " />
<!-- or literal code works as well -->
< highlightjs language =' javascript ' code =" var x = 5; " />
</ div >Você pode executar o destaque dentro de um trabalhador da web para evitar congelar a janela do navegador enquanto lida com grandes pedaços de código.
Em seu script principal:
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;In Worker.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; Primeiro, você provavelmente estará instalando a biblioteca via npm ou yarn - consulte Obtendo a biblioteca.
requireExigir a biblioteca de nível superior carregará todos os idiomas:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valuePara uma pegada menor, carregue nosso subconjunto comum de idiomas (o mesmo conjunto usado para nossa compilação da web padrão).
const hljs = require ( 'highlight.js/lib/common' ) ;Para a menor pegada, carregue apenas os idiomas necessários:
const hljs = require ( 'highlight.js/lib/core' ) ;
hljs . registerLanguage ( 'xml' , require ( 'highlight.js/lib/languages/xml' ) ) ;
const highlightedCode = hljs . highlight ( '<span>Hello World!</span>' , { language : 'xml' } ) . valueimportA importação padrão registrará todos os idiomas:
import hljs from 'highlight.js' ;É mais eficiente importar apenas a biblioteca e registrar os idiomas necessários:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Se a sua ferramenta de construção processar as importações do CSS, você também poderá importar o tema diretamente como um módulo:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; NOTA: Por enquanto, você deseja instalar o pacote @highlightjs/cdn-assets em vez de highlight.js . Consulte o download de ativos CDN pré -construídos
Para importar a biblioteca e registrar apenas os idiomas que você precisa:
import hljs from './assets/js/@highlightjs/cdn-assets/es/core.js' ;
import javascript from './assets/js/@highlightjs/cdn-assets/es/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Para importar a biblioteca e registrar todos os idiomas:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;NOTA: O caminho para esses arquivos varia dependendo de onde você os instalou/copiou -os em seu projeto ou site. O caminho acima é apenas um exemplo.
Você também pode usar importmap para importar de maneira semelhante à do nó:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > Use o código acima no seu HTML. Depois disso, seu JavaScript pode importar usando a chave nomeada do seu importmap , por exemplo, @highlightjs neste caso:
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;NOTA: Você também pode importar diretamente dos URLs totalmente estáticos, como nossos próprios recursos de CDN do módulo ES6 pré-construído. Veja busca via CDN para exemplos específicos.
Você pode obter Highlight.js como um script de navegador hospedado ou personalizado, ou como um módulo de servidor. Desde a caixa, o script do navegador suporta AMD e Commonjs, por isso, se você deseja usar o requerjs ou o navegador sem precisar construir a partir da fonte. O módulo do servidor também funciona perfeitamente bem com o BrowSerify, mas há a opção de usar uma compilação específica para navegadores, em vez de algo destinado a um servidor.
Não vincule diretamente o GitHub. A biblioteca não deve trabalhar diretamente da fonte, requer construção. Se nenhuma das opções pré-embaladas funcionar para você se referir à documentação do edifício.
Em amêndoa. Você precisa usar o otimizador para dar um nome ao módulo. Por exemplo:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsUma versão pré -construída do Highlight.js agrupada com muitos idiomas comuns é hospedada por vários CDNs populares. Ao usar o Destact.js via CDN, você pode usar a integridade do SubreSource para obter segurança adicional. Para detalhes, consulte Digests.md.
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/dark.min.css " >
< script type =" module " >
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script src =" https://unpkg.com/@highlightjs/[email protected]/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://unpkg.com/@highlightjs/[email protected]/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://unpkg.com/@highlightjs/[email protected]/es/highlight.min.js' ;
// and it's easy to individually load & register additional languages
import go from 'https://unpkg.com/@highlightjs/[email protected]/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > NOTA: O pacote Host highlight.min.js hospedado no CDN não agrupa todos os idiomas. Seria muito grande. Você pode encontrar nossa lista de idiomas "comuns" que agruparemos por padrão em nossa página de download.
Você também pode baixar e auto-hospedar os mesmos ativos que servimos através de nossos próprios CDNs. Publicamos essas compilações no repositório GitHub de liberação da CDN. Você pode facilmente extrair arquivos individuais dos pontos de extremidade do CDN com curl , etc; Se digamos, você só precisava de highlight.min.js e um único arquivo CSS.
Há também um pacote NPM @HighlightJs/CDN-atribui se a retirada dos ativos via npm ou yarn seria mais fácil para o seu processo de construção.
A página de download pode gerar rapidamente um pacote minificado de arquivo único personalizado, incluindo apenas os idiomas que você deseja.
Nota: A construção da fonte pode produzir construções um pouco menores do que o download do site.
Nosso pacote NPM, incluindo todos os idiomas suportados, pode ser instalado com NPM ou YARN:
npm install highlight.js
# or
yarn add highlight.jsHá também outro pacote NPM @HighlightJs/CDN-atiradores que contém ativos CDN pré-construídos, incluindo módulos ES6 que podem ser importados no navegador:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsComo alternativa, você pode criar o pacote NPM a partir da fonte.
O código -fonte atual está sempre disponível no GitHub.
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonConsulte nossa documentação de construção para obter mais informações.
Destaque.js funciona em todos os navegadores modernos e atualmente suportados versões Node.js. Você precisará do software a seguir para contribuir com a biblioteca principal:
Destaque.js é liberado sob a licença BSD. Veja nosso arquivo de licença para obter detalhes.
O site oficial da biblioteca é https://highlightjs.org/.
Documentação mais aprofundada para a API e outros tópicos está em http://highlightjs.readthedocs.io/.
Uma lista da equipe principal e dos colaboradores pode ser encontrada no arquivo colaborador.md.
