highlight.js
v11.11.0 - Happy Holidays
Sorote.js adalah highlighter sintaks yang ditulis dalam JavaScript. Ini berfungsi di browser serta di server. Ini dapat bekerja dengan hampir semua markup, tidak tergantung pada kerangka kerja lainnya, dan memiliki deteksi bahasa otomatis.
Isi
requireimportSeperti biasa, rilis utama memang mengandung perubahan yang melanggar yang mungkin memerlukan tindakan dari pengguna. Harap baca Version_11_Upgrade.md untuk ringkasan terperinci tentang perubahan besar dan tindakan apa pun yang mungkin perlu Anda ambil.
Silakan lihat Security.md untuk informasi dukungan jangka panjang.
Minimum untuk menggunakan sorotan.js di halaman web menautkan ke perpustakaan bersama dengan salah satu tema dan panggilan highlightAll :
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > Ini akan menemukan dan menyorot kode di dalam tag <pre><code> ; Ia mencoba mendeteksi bahasa secara otomatis. Jika deteksi otomatis tidak berhasil untuk Anda, atau Anda lebih suka menjadi eksplisit, Anda dapat menentukan bahasa secara manual dengan menggunakan atribut class :
< pre > < code class =" language-html " > ... </ code > </ pre > Untuk menerapkan styling highlight.js ke plaintext tanpa benar -benar menyorotnya, gunakan bahasa plaintext :
< pre > < code class =" language-plaintext " > ... </ code > </ pre > Untuk melewatkan menyorot blok kode sepenuhnya, gunakan kelas nohighlight :
< pre > < code class =" nohighlight " > ... </ code > </ pre >Minimum untuk mendeteksi bahasa secara otomatis dan menyoroti beberapa kode.
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valueUntuk memuat hanya subset "umum" dari bahasa populer:
hljs = require ( 'highlight.js/lib/common' ) ; Untuk menyorot kode dengan bahasa tertentu, gunakan highlight :
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value Lihat Mengimpor Perpustakaan untuk lebih banyak contoh penggunaan require VS import , dll. Untuk informasi lebih lanjut tentang objek hasil yang dikembalikan oleh highlight atau highlightAuto Rujuk ke dokumen API.
Sorote.js mendukung lebih dari 180 bahasa di perpustakaan inti. Ada juga definisi bahasa pihak ke -3 yang tersedia untuk mendukung lebih banyak bahasa. Anda dapat menemukan daftar lengkap bahasa yang didukung di Supported_Languages.md.
Jika Anda membutuhkan sedikit lebih banyak kontrol atas inisialisasi Sorote.js, Anda dapat menggunakan Fungsi highlightElement dan configure . Ini memungkinkan Anda untuk lebih mengontrol apa yang harus disorot dan kapan .
Misalnya, inilah setara kasar dari panggilan highlightAll tetapi melakukan pekerjaan secara manual sebagai gantinya:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; Silakan merujuk ke dokumentasi untuk configure opsi.
Kami sangat merekomendasikan <pre><code> pembungkus untuk blok kode. Ini cukup semantik dan "hanya bekerja" di luar kotak dengan nol mengutak -atik. Dimungkinkan untuk menggunakan elemen HTML lainnya (atau kombo), tetapi Anda mungkin perlu memberikan perhatian khusus untuk melestarikan linebreak.
Katakanlah markup Anda untuk blok kode menggunakan Divs:
< div class =' code ' > ... </ div >Untuk menyoroti blok tersebut secara manual:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; Tanpa menggunakan tag yang melestarikan linebreak (seperti pre ) Anda akan memerlukan beberapa CSS tambahan untuk membantu melestarikannya. Anda juga bisa istirahat sebelum dan sesudah proses dengan plug-in, tetapi kami sarankan menggunakan CSS .
Untuk melestarikan linebreak di dalam div menggunakan CSS:
div . code {
white-space : pre;
}Lihat Sorotan/Vue-Plugin untuk plugin Vue sederhana yang sangat cocok dengan Sorote.js.
Contoh vue-plugin beraksi:
< 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 >Anda dapat menjalankan sorotan di dalam pekerja web untuk menghindari pembekuan jendela browser sambil berurusan dengan potongan kode yang sangat besar.
Di skrip utama Anda:
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;Di Worker.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; Pertama, Anda mungkin akan menginstal perpustakaan melalui npm atau yarn - lihat mendapatkan perpustakaan.
requireMembutuhkan perpustakaan tingkat atas akan memuat semua bahasa:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valueUntuk jejak yang lebih kecil, muat subset bahasa umum kami (set yang sama digunakan untuk build web default kami).
const hljs = require ( 'highlight.js/lib/common' ) ;Untuk jejak terkecil, hanya memuat bahasa yang Anda butuhkan:
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' } ) . valueimportImpor default akan mendaftarkan semua bahasa:
import hljs from 'highlight.js' ;Lebih efisien untuk mengimpor hanya perpustakaan dan mendaftarkan bahasa yang Anda butuhkan:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Jika alat build Anda memproses impor CSS, Anda juga dapat mengimpor tema secara langsung sebagai modul:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; CATATAN: Untuk saat ini Anda ingin menginstal paket @highlightjs/cdn-assets alih-alih highlight.js . Lihat Unduh Aset CDN Prebuilt
Untuk mengimpor perpustakaan dan hanya mendaftarkan bahasa yang Anda butuhkan:
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 ) ;Untuk mengimpor perpustakaan dan mendaftarkan semua bahasa:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;Catatan: Jalur ke file -file ini akan bervariasi tergantung di mana Anda telah menginstal/menyalinnya dalam proyek atau situs Anda. Jalur di atas hanyalah sebuah contoh.
Anda juga dapat menggunakan importmap untuk mengimpor dengan cara yang sama seperti Node:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > Gunakan kode di atas dalam HTML Anda. Setelah itu, JavaScript Anda dapat mengimpor menggunakan tombol bernama dari importmap Anda, misalnya @highlightjs dalam hal ini:
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Catatan: Anda juga dapat mengimpor langsung dari URL statis sepenuhnya, seperti sumber daya CDN modul ES6 kami sendiri. Lihat Fetch Via CDN untuk contoh -contoh tertentu.
Anda bisa mendapatkan sorotan.js sebagai skrip yang dihosting, atau membangun khusus, browser atau sebagai modul server. Tepat di luar kotak skrip browser mendukung AMD dan CommonJs, jadi jika Anda ingin Anda dapat menggunakan Persyaratan atau browserifikasi tanpa harus membangun dari sumber. Modul server juga berfungsi dengan baik dengan Browserify, tetapi ada opsi untuk menggunakan build yang spesifik untuk browser daripada sesuatu yang dimaksudkan untuk server.
Jangan menautkan ke GitHub secara langsung. Perpustakaan tidak seharusnya bekerja langsung dari sumbernya, itu membutuhkan bangunan. Jika tidak ada opsi yang sudah dikemas sebelumnya yang berfungsi untuk Anda merujuk pada dokumentasi bangunan.
Di almond. Anda perlu menggunakan pengoptimal untuk memberikan nama modul. Misalnya:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsVersi prebuilt dari sorotan. JS yang dibundel dengan banyak bahasa umum dihosting oleh beberapa CDN populer. Saat menggunakan Sorote.js melalui CDN, Anda dapat menggunakan integritas SubResource untuk keamanan tambahan. Untuk detailnya lihat 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 > CATATAN: Paket highlight.min.js yang di-host CDN.Min.js tidak menggabungkan setiap bahasa. Itu akan sangat besar. Anda dapat menemukan daftar bahasa "umum" yang kami bundel secara default di halaman unduhan kami.
Anda juga dapat mengunduh dan menjadi tuan rumah sendiri aset yang sama dengan yang kami sajikan melalui CDN kami sendiri. Kami menerbitkan bangunan itu ke repositori GitHub CDN-Release. Anda dapat dengan mudah menarik file individual dari titik akhir CDN dengan curl , dll; Jika mengatakan Anda hanya membutuhkan highlight.min.js dan satu file CSS.
Ada juga paket NPM @sorotan/CDN-aset jika menarik aset melalui npm atau yarn akan lebih mudah untuk proses pembuatan Anda.
Halaman unduhan dapat dengan cepat menghasilkan bundel minified file tunggal khusus termasuk hanya bahasa yang Anda inginkan.
Catatan: Bangunan dari sumber dapat menghasilkan bangunan yang sedikit lebih kecil daripada unduhan situs web.
Paket NPM kami termasuk semua bahasa yang didukung dapat diinstal dengan NPM atau benang:
npm install highlight.js
# or
yarn add highlight.jsAda juga paket NPM lain @sorotan/cdn-aset yang berisi aset CDN prebuilt termasuk modul ES6 yang dapat diimpor di browser:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsAtau, Anda dapat membangun paket NPM dari sumber.
Kode sumber saat ini selalu tersedia di GitHub.
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonLihat dokumentasi bangunan kami untuk informasi lebih lanjut.
Sorote.js bekerja pada semua browser modern dan versi Node.js yang saat ini didukung. Anda akan memerlukan perangkat lunak berikut untuk berkontribusi ke perpustakaan inti:
Sorote.js dirilis di bawah lisensi BSD. Lihat file lisensi kami untuk detailnya.
Situs web resmi untuk perpustakaan adalah https://highlightjs.org/.
Dokumentasi mendalam lebih lanjut untuk API dan topik lainnya adalah di http://highlightjs.readthedocs.io/.
Daftar tim inti dan kontributor dapat ditemukan di file kontributor.md.
