highlight.js
v11.11.0 - Happy Holidays
Highlight.js เป็นปากกาเน้นข้อความไวยากรณ์ที่เขียนใน JavaScript มันใช้งานได้ในเบราว์เซอร์เช่นเดียวกับเซิร์ฟเวอร์ มันสามารถใช้งานได้กับมาร์กอัปใด ๆ ไม่ได้ขึ้นอยู่กับเฟรมเวิร์กอื่น ๆ และมีการตรวจจับภาษาอัตโนมัติ
สารบัญ
requireimportเช่นเคยการเผยแพร่ที่สำคัญมีการเปลี่ยนแปลงที่อาจต้องใช้การกระทำจากผู้ใช้ โปรดอ่าน version_11_upgrade.md สำหรับสรุปโดยละเอียดเกี่ยวกับการเปลี่ยนแปลงการเปลี่ยนแปลงและการกระทำใด ๆ ที่คุณอาจต้องใช้
โปรดดู Security.md สำหรับข้อมูลการสนับสนุนระยะยาว
ขั้นต่ำเปล่าสำหรับการใช้ไฮไลต์ js บนหน้าเว็บกำลังเชื่อมโยงไปยังห้องสมุดพร้อมกับหนึ่งในธีมและการเรียก highlightAll :
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > สิ่งนี้จะค้นหาและเน้นรหัสภายใน <pre><code> แท็ก; มันพยายามตรวจจับภาษาโดยอัตโนมัติ หากการตรวจจับอัตโนมัติไม่ได้ผลสำหรับคุณหรือคุณชอบที่จะชัดเจนคุณสามารถระบุภาษาด้วยตนเองโดยใช้แอตทริบิวต์ class :
< pre > < code class =" language-html " > ... </ code > </ pre > หากต้องการใช้ไฮไลต์สไตล์ js กับข้อความธรรมดาโดยไม่ต้องเน้นให้ใช้ภาษา plaintext :
< pre > < code class =" language-plaintext " > ... </ code > </ pre > หากต้องการข้ามไฮไลต์ของบล็อกโค้ดอย่างสมบูรณ์ให้ใช้คลาส nohighlight :
< pre > < code class =" nohighlight " > ... </ code > </ pre >ขั้นต่ำเปลือยเพื่อตรวจจับภาษาโดยอัตโนมัติและเน้นรหัสบางส่วน
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valueเพื่อโหลดเฉพาะชุดย่อย "สามัญ" ของภาษายอดนิยม:
hljs = require ( 'highlight.js/lib/common' ) ; ในการเน้นรหัสด้วยภาษาเฉพาะให้ใช้ highlight :
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value ดูการนำเข้าไลบรารีสำหรับตัวอย่างเพิ่มเติมเกี่ยวกับการใช้งาน require กับ import ฯลฯ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวัตถุผลลัพธ์ที่ส่งคืนโดย highlight หรือ highlightAuto อ้างถึงเอกสาร API
Highlight.js รองรับมากกว่า 180 ภาษาในห้องสมุดหลัก นอกจากนี้ยังมีคำจำกัดความภาษาของบุคคลที่สามที่สามารถสนับสนุนภาษาได้มากขึ้น คุณสามารถค้นหารายการภาษาที่รองรับทั้งหมดได้ใน support_languages.md
หากคุณต้องการการควบคุมการเริ่มต้นของไฮไลต์ Js อีกเล็กน้อยคุณสามารถใช้ highlightElement และ configure ค่าฟังก์ชั่น สิ่งนี้ช่วยให้คุณสามารถควบคุม สิ่งที่ จะเน้นและ เมื่อไหร่
ตัวอย่างเช่นต่อไปนี้เป็นสิ่งที่เทียบเท่ากับการเรียก highlightAll แต่ทำงานด้วยตนเองแทน:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; โปรดดูเอกสารสำหรับตัวเลือก configure
เราขอแนะนำ <pre><code> การห่อสำหรับบล็อกโค้ด มันค่อนข้างมีความหมายและ "ใช้งานได้" นอกกรอบโดยไม่มีการเล่นซอ เป็นไปได้ที่จะใช้องค์ประกอบ HTML อื่น ๆ (หรือคอมโบ) แต่คุณอาจต้องให้ความสนใจเป็นพิเศษกับการรักษาสายเลือด
สมมติว่ามาร์กอัปของคุณสำหรับบล็อกโค้ดใช้ DIV:
< div class =' code ' > ... </ div >เพื่อเน้นบล็อกดังกล่าวด้วยตนเอง:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; โดยไม่ต้องใช้แท็กที่เก็บรักษาเส้นแบ่ง (เช่น pre ) คุณจะต้องมี CS เพิ่มเติมเพื่อช่วยรักษาพวกเขา นอกจากนี้คุณยังสามารถหยุดสายงานก่อนและโพสต์กระบวนการด้วยปลั๊กอิน แต่ เราขอแนะนำให้ใช้ CSS
เพื่อรักษาเส้นเลือดภายใน div โดยใช้ CSS:
div . code {
white-space : pre;
}ดู HighlightJS/Vue-Plugin สำหรับปลั๊กอิน VUE แบบง่ายที่ใช้งานได้ดีกับไฮไลต์. js
ตัวอย่างของ vue-plugin ในการดำเนินการ:
< 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 >คุณสามารถเรียกใช้ไฮไลต์ภายในผู้ปฏิบัติงานบนเว็บเพื่อหลีกเลี่ยงการแช่แข็งหน้าต่างเบราว์เซอร์ในขณะที่จัดการกับรหัสขนาดใหญ่มาก
ในสคริปต์หลักของคุณ:
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;ใน Worker.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; ก่อนอื่นคุณจะติดตั้งไลบรารีผ่าน npm หรือ yarn - ดูการรับไลบรารี
requireต้องการไลบรารีระดับบนสุดจะโหลดทุกภาษา:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valueสำหรับรอยเท้าที่เล็กกว่าให้โหลดชุดย่อยทั่วไปของเรา (ชุดเดียวกับที่ใช้สำหรับการสร้างเว็บเริ่มต้นของเรา)
const hljs = require ( 'highlight.js/lib/common' ) ;สำหรับรอยเท้าที่เล็กที่สุดให้โหลดเฉพาะภาษาที่คุณต้องการ:
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' } ) . valueimportการนำเข้าเริ่มต้นจะลงทะเบียนทุกภาษา:
import hljs from 'highlight.js' ;มีประสิทธิภาพมากขึ้นในการนำเข้าเฉพาะห้องสมุดและลงทะเบียนภาษาที่คุณต้องการ:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;หากเครื่องมือสร้างของคุณประมวลผลการนำเข้า CSS คุณยังสามารถนำเข้าชุดรูปแบบได้โดยตรงเป็นโมดูล:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; หมายเหตุ: ตอนนี้คุณจะต้องติดตั้งแพ็คเกจ @highlightjs/cdn-assets แทน highlight.js ดูดาวน์โหลดสินทรัพย์ prebuilt CDN
ในการนำเข้าห้องสมุดและลงทะเบียนเฉพาะภาษาที่คุณต้องการ:
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 ) ;เพื่อนำเข้าห้องสมุดและลงทะเบียนทุกภาษา:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;หมายเหตุ: เส้นทางไปยังไฟล์เหล่านี้จะแตกต่างกันไปตามที่คุณติดตั้ง/คัดลอกภายในโครงการหรือไซต์ของคุณ เส้นทางข้างต้นเป็นเพียงตัวอย่าง
คุณยังสามารถใช้ importmap เพื่อนำเข้าในลักษณะเดียวกันกับโหนด:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > ใช้รหัสด้านบนใน HTML ของคุณ หลังจากนั้น JavaScript ของคุณสามารถนำเข้าได้โดยใช้คีย์ชื่อจาก importmap ของคุณเช่น @highlightjs ในกรณีนี้:
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;หมายเหตุ: คุณสามารถนำเข้าโดยตรงจาก URL แบบคงที่อย่างสมบูรณ์เช่นทรัพยากร CDN ของโมดูล ES6 ที่สร้างไว้ล่วงหน้าของเราเอง ดู Fetch ผ่าน CDN สำหรับตัวอย่างเฉพาะ
คุณสามารถรับไฮไลต์ Js เป็นโฮสต์หรือสร้างเองสคริปต์เบราว์เซอร์หรือเป็นโมดูลเซิร์ฟเวอร์ ทันทีจากกล่องสคริปต์เบราว์เซอร์รองรับทั้ง AMD และ CommonJS ดังนั้นหากคุณต้องการคุณสามารถใช้ VeutheJS หรือเบราว์เซอร์โดยไม่ต้องสร้างจากแหล่งที่มา โมดูลเซิร์ฟเวอร์ยังทำงานได้ดีอย่างสมบูรณ์แบบด้วยเบราว์เซอร์ แต่มีตัวเลือกในการใช้งานสร้างเฉพาะกับเบราว์เซอร์มากกว่าสิ่งที่มีความหมายสำหรับเซิร์ฟเวอร์
อย่าเชื่อมโยงไปยัง GitHub โดยตรง ห้องสมุดไม่ควรทำงานโดยตรงจากแหล่งที่มามันต้องมีการสร้าง หากไม่มีตัวเลือกที่บรรจุไว้ล่วงหน้าจะทำงานให้คุณอ้างถึงเอกสารประกอบอาคาร
บนอัลมอนด์ คุณต้องใช้เครื่องมือเพิ่มประสิทธิภาพเพื่อให้ชื่อโมดูล ตัวอย่างเช่น:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsไฮไลต์รุ่น prebuilt.js ที่รวมกับภาษาทั่วไปหลายภาษาโฮสต์โดย CDN ยอดนิยมหลายรายการ เมื่อใช้ไฮไลต์. js ผ่าน CDN คุณสามารถใช้ความสมบูรณ์ของแหล่งย่อยเพื่อความปลอดภัยเพิ่มเติม สำหรับรายละเอียดดู 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 > หมายเหตุ: แพ็คเกจ highlight.min.js ไม่รวมกันทุกภาษา มันจะมีขนาดใหญ่มาก คุณสามารถค้นหารายการภาษา "สามัญ" ของเราที่เรารวมกันเป็นค่าเริ่มต้นในหน้าดาวน์โหลดของเรา
นอกจากนี้คุณยังสามารถดาวน์โหลดและโฮสต์สินทรัพย์เดียวกับที่เราให้บริการผ่าน CDN ของเราเอง เราเผยแพร่สิ่งสร้างเหล่านั้นไปยังที่เก็บ GitHub ที่เปิดตัว CDN คุณสามารถดึงไฟล์แต่ละไฟล์ออกจากจุดปลาย CDN ด้วย curl ฯลฯ ได้อย่างง่ายดาย หากบอกว่าคุณต้องการเฉพาะ highlight.min.js และไฟล์ CSS เดียว
นอกจากนี้ยังมีแพ็คเกจ NPM @lepllightjs/cdn-assets หากการดึงสินทรัพย์ใน Via npm หรือ yarn จะง่ายขึ้นสำหรับกระบวนการสร้างของคุณ
หน้าดาวน์โหลดสามารถสร้างชุดมินเดอร์แบบมินิไฟล์เดี่ยวที่กำหนดเองได้อย่างรวดเร็วรวมถึงเฉพาะภาษาที่คุณต้องการ
หมายเหตุ: การสร้างจากแหล่งที่มาสามารถสร้างงานสร้างที่เล็กกว่าการดาวน์โหลดเว็บไซต์เล็กน้อย
แพ็คเกจ NPM ของเรารวมถึงภาษาที่รองรับทั้งหมดสามารถติดตั้งด้วย NPM หรือเส้นด้าย:
npm install highlight.js
# or
yarn add highlight.jsนอกจากนี้ยังมีแพ็คเกจ NPM อื่น @ไฮไลต์ JS/CDN-Assets ที่มีสินทรัพย์ CDN ที่สร้างไว้ล่วงหน้ารวมถึงโมดูล ES6 ที่สามารถนำเข้าในเบราว์เซอร์:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsหรือคุณสามารถสร้างแพ็คเกจ NPM จากแหล่งที่มา
ซอร์สโค้ดปัจจุบันมีอยู่เสมอใน GitHub
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonดูเอกสารประกอบอาคารของเราสำหรับข้อมูลเพิ่มเติม
Highlight.js ทำงานกับเบราว์เซอร์ที่ทันสมัยทั้งหมดและปัจจุบัน Node.js ที่รองรับในปัจจุบัน คุณจะต้องใช้ซอฟต์แวร์ต่อไปนี้เพื่อสนับสนุนห้องสมุดหลัก:
Highlight.js เปิดตัวภายใต้ใบอนุญาต BSD ดูไฟล์ใบอนุญาตของเราสำหรับรายละเอียด
เว็บไซต์อย่างเป็นทางการสำหรับห้องสมุดคือ https://highlightjs.org/
เอกสารเชิงลึกเพิ่มเติมสำหรับ API และหัวข้ออื่น ๆ อยู่ที่ http://highlightjs.readthedocs.io/
รายชื่อทีมหลักและผู้ร่วมให้ข้อมูลสามารถพบได้ในไฟล์ผู้มีส่วนร่วม
