highlight.js
v11.11.0 - Happy Holidays
Spowslant.js es un resaltador de sintaxis escrito en JavaScript. Funciona tanto en el navegador como en el servidor. Puede funcionar con casi cualquier marcado, no depende de ningún otro marco y tiene una detección de lenguaje automático.
Contenido
requireimportComo siempre, las versiones importantes contienen cambios de ruptura que pueden requerir la acción de los usuarios. Lea la versión_11_upgrade.md para un resumen detallado de los cambios de ruptura y cualquier acción que deba tomar.
Consulte Security.MD para obtener información de soporte a largo plazo.
El mínimo para usar resaltar.js en una página web se vincula a la biblioteca junto con uno de los temas y llamadas highlightAll :
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > Esto encontrará y resaltará el código dentro de las etiquetas <pre><code> ; Intenta detectar el lenguaje automáticamente. Si la detección automática no funciona para usted, o simplemente prefiere ser explícita, puede especificar el idioma manualmente utilizando el atributo class :
< pre > < code class =" language-html " > ... </ code > </ pre > Para aplicar el estilo destacado.js al texto sin formato sin resaltarlo realmente, use el lenguaje plaintext :
< pre > < code class =" language-plaintext " > ... </ code > </ pre > Para omitir el resaltado de un bloque de código por completo, use la clase nohighlight :
< pre > < code class =" nohighlight " > ... </ code > </ pre >El mínimo de detectar automáticamente el idioma y resaltar algún código.
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valuePara cargar solo un subconjunto "común" de idiomas populares:
hljs = require ( 'highlight.js/lib/common' ) ; Para resaltar el código con un idioma específico, use highlight :
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value Consulte Importar la biblioteca para obtener más ejemplos de uso import require , etc. Para obtener más información sobre el objeto de resultado devuelto por highlight o highlightAuto consulte los documentos de la API.
Stop stopd.js admite más de 180 idiomas en la biblioteca central. También hay definiciones de idioma de terceros disponibles para apoyar aún más idiomas. Puede encontrar la lista completa de idiomas compatibles en Supported_Languages.md.
Si necesita un poco más de control sobre la inicialización de Stoppect.js, puede usar el highlightElement y configure funciones. Esto le permite controlar mejor qué resaltar y cuándo .
Por ejemplo, aquí está el equivalente aproximado de llamar highlightAll pero hacer el trabajo manualmente:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; Consulte la documentación para obtener opciones configure .
Recomendamos encarecidamente la envoltura <pre><code> para bloques de código. Es bastante semántico y "solo funciona" fuera de la caja con cero violín. Es posible utilizar otros elementos HTML (o combos), pero es posible que deba prestar especial atención a la preservación de los brotes de línea.
Digamos que su marcado para bloques de código usa divs:
< div class =' code ' > ... </ div >Para resaltar tales bloques manualmente:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; Sin usar una etiqueta que preserva los borde de línea (como pre ) necesitará algunos CSS adicionales para ayudar a preservarlos. También puede ir y posterior a los descansos de línea con un complemento, pero recomendamos usar CSS .
Para preservar los borde de línea dentro de un div usando CSS:
div . code {
white-space : pre;
}Consulte SPOOPJS/VUE-Plugin para un complemento VUE simple que funcione muy bien con Stop Stopc.js.
Un ejemplo de vue-plugin en acción:
< 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 >Puede ejecutar resaltar dentro de un trabajador web para evitar congelar la ventana del navegador mientras se trata de grandes fragmentos de código.
En tu guión 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 ) ;
} ) ;En Worker.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; Primero, es probable que instale la biblioteca a través de npm o yarn ; consulte obtener la biblioteca.
requireRequerir la biblioteca de nivel superior cargará todos los idiomas:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valuePara una huella más pequeña, cargue nuestro subconjunto común de idiomas (el mismo conjunto utilizado para nuestra construcción web predeterminada).
const hljs = require ( 'highlight.js/lib/common' ) ;Para la huella más pequeña, cargue solo los idiomas que necesita:
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' } ) . valueimportLa importación predeterminada registrará todos los idiomas:
import hljs from 'highlight.js' ;Es más eficiente importar solo la biblioteca y registrar los idiomas que necesita:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Si su herramienta de compilación procesa las importaciones de CSS, también puede importar el tema directamente como un módulo:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; Nota: Por ahora querrá instalar el paquete @highlightjs/cdn-assets en lugar de highlight.js . Ver Descargar activos de CDN preBuilt
Para importar la biblioteca y registrar solo aquellos idiomas que necesita:
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 la biblioteca y registrar todos los idiomas:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;Nota: La ruta a estos archivos variará dependiendo de dónde los haya instalado/copiado dentro de su proyecto o sitio. La ruta anterior es solo un ejemplo.
También puede usar importmap para importar de manera similar al nodo:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > Use el código anterior en su HTML. Después de eso, su JavaScript puede importar utilizando la clave nombrada de su importmap , por ejemplo @highlightjs en este caso:
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Nota: También puede importar directamente de URL totalmente estáticas, como nuestros propios recursos de CDN del módulo ES6 pre-construido. Vea la búsqueda a través de CDN para ejemplos específicos.
Puede obtener resaltar.js como un script de navegador alojado o personalizado o como módulo de servidor. Salir de la caja, el script del navegador admite AMD y CommonJS, por lo que si lo desea, puede usar necesidades o navegación sin tener que construir desde la fuente. El módulo del servidor también funciona perfectamente bien con Browserify, pero existe la opción de usar una compilación específica para los navegadores en lugar de algo destinado a un servidor.
No vincule directamente a GitHub. Se supone que la biblioteca no funciona directamente desde la fuente, requiere la construcción. Si ninguna de las opciones preenvasadas funciona para usted, se refiere a la documentación del edificio.
En almendras. Debe usar el optimizador para darle un nombre al módulo. Por ejemplo:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsUna versión previa a la construcción de SPART.js Bundled con muchos idiomas comunes está alojada por varios CDN populares. Cuando se usa resaltar.js a través de CDN, puede usar Subresource Integrity para seguridad adicional. Para más detalles ver 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: El paquete highlight.min.js alojado en CDN no agrupa cada idioma. Sería muy grande. Puede encontrar nuestra lista de idiomas "comunes" que agrupamos de forma predeterminada en nuestra página de descarga.
También puede descargar y autohost los mismos activos que servimos a través de nuestros propios CDN. Publicamos esas compilaciones en el repositorio de GitHub de Liberación de CDN. Puede extraer fácilmente archivos individuales de los puntos finales CDN con curl , etc. Si digas que solo necesitabas highlight.min.js y un solo archivo CSS.
También hay un paquete NPM @stoppectjs/cdn-assets si extraer los activos a través de npm o yarn sería más fácil para su proceso de construcción.
La página de descarga puede generar rápidamente un paquete minificado personalizado que incluye solo los idiomas que desea.
Nota: El edificio desde la fuente puede producir compilaciones ligeramente más pequeñas que la descarga del sitio web.
Nuestro paquete NPM, incluidos todos los idiomas compatibles, se puede instalar con NPM o hilo:
npm install highlight.js
# or
yarn add highlight.jsTambién hay otro paquete NPM @stoppectjs/cdn-assets que contiene activos CDN prebuilados, incluidos los módulos ES6 que se pueden importar en el navegador:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsAlternativamente, puede construir el paquete NPM a partir de la fuente.
El código fuente actual siempre está disponible en GitHub.
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonConsulte nuestra documentación de construcción para obtener más información.
Stop stopd.js funciona en todos los navegadores modernos y actualmente compatibles con las versiones Node.js. Necesitará el siguiente software para contribuir a la biblioteca principal:
Spight.js se lanza bajo la licencia BSD. Vea nuestro archivo de licencia para obtener más detalles.
El sitio web oficial de la biblioteca es https://highlightjs.org/.
Una documentación más profunda para la API y otros temas está en http://highlightjs.readthedocs.io/.
Se puede encontrar una lista del equipo central y los contribuyentes en el archivo contribuyente.md.
