highlight.js
v11.11.0 - Happy Holidays
Aightly.js هو أداة تمييز بناء جملة مكتوب في JavaScript. إنه يعمل في المتصفح وكذلك على الخادم. يمكن أن تعمل مع أي ترميز إلى حد كبير ، ولا يعتمد على أي أطر أخرى ، ولديه اكتشاف اللغة التلقائي.
محتويات
requireimportكما هو الحال دائمًا ، تحتوي الإصدارات الرئيسية على تغييرات كسر قد تتطلب إجراءً من المستخدمين. يرجى قراءة الإصدار_11_upgrade.md للحصول على ملخص مفصل لكسر التغييرات وأي إجراء قد تحتاج إلى اتخاذه.
يرجى الاطلاع على Security.md للحصول على معلومات الدعم على المدى الطويل.
الحد الأدنى العاري لاستخدام Aightlight.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 > لتطبيق تصميم Alminry.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.
تسليط الضوء. js يدعم أكثر من 180 لغة في المكتبة الأساسية. هناك أيضًا تعريفات لغة الطرف الثالث المتاحة لدعم المزيد من اللغات. يمكنك العثور على القائمة الكاملة لللغات المدعومة في Supported_languages.md.
إذا كنت بحاجة إلى مزيد من التحكم في تهيئة Almmission.js ، فيمكنك استخدام وظائف highlightElement configure . هذا يتيح لك التحكم بشكل أفضل في ما يجب تسليط الضوء عليه ومتى .
على سبيل المثال ، إليك المكافئ القاسي لاتصالات highlightAll ولكن القيام بالعمل يدويًا بدلاً من ذلك:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; يرجى الرجوع إلى الوثائق configure خيارات.
نوصي بشدة <pre><code> التغليف لكتل التعليمات البرمجية. إنه دلالي تمامًا و "يعمل فقط" خارج الصندوق بدون تعبئة. من الممكن استخدام عناصر HTML الأخرى (أو المجموعات) ، ولكن قد تحتاج إلى إيلاء اهتمام خاص للحفاظ على خطوط الخطوط.
لنفترض أن ترميزك لكتل الكود يستخدم divs:
< div class =' code ' > ... </ div >لتسليط الضوء على مثل هذه الكتل يدويًا:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; دون استخدام علامة تحافظ على قصاصات الخط (مثل pre ) ، ستحتاج إلى بعض CSS إضافية للمساعدة في الحفاظ عليها. يمكنك أيضًا استراحات خط ما قبل وبعد العملية مع مكون إضافي ، لكننا نوصي باستخدام CSS .
للحفاظ على خطوط الخطوط داخل div باستخدام CSS:
div . code {
white-space : pre;
}انظر AightlizeJs/Vue-plugin للحصول على مكون إضافي VUE بسيط يعمل بشكل رائع مع Aightly.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 ) ;
} ) ;في العامل. 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 . انظر تنزيل أصول CDN Prebuilt
لاستيراد المكتبة وتسجيل فقط تلك اللغات التي تحتاجها:
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 الخاصة بنا. انظر الجلب عبر CDN للحصول على أمثلة محددة.
يمكنك الحصول على Aightly.js كخبر استضافة أو بناء مخصص أو متصفح أو كوحدة خادم. من خارج الصندوق ، يدعم البرنامج النصي للمتصفح كلاً من AMD و CommonJs ، لذلك إذا كنت ترغب في استخدام متطلبات أو متصفح دون الحاجة إلى البناء من المصدر. تعمل وحدة الخادم أيضًا بشكل جيد تمامًا مع Browserify ، ولكن هناك خيار لاستخدام بناء محدد للمتصفحات بدلاً من شيء مخصص لخادم.
لا ترتبط بـ Github مباشرة. من غير المفترض أن تعمل المكتبة مباشرة من المصدر ، فهي تتطلب البناء. إذا لم يعمل أي من الخيارات المعبأة مسبقًا من أجلك ، فيعيش على وثائق المبنى.
على اللوز. تحتاج إلى استخدام المحسن لإعطاء الوحدة اسمًا. على سبيل المثال:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsيتم استضافة نسخة مسبقة من Aightly.js المجمعة مع العديد من اللغات الشائعة من قبل العديد من CDNs الشعبية. عند استخدام Almmission.js عبر CDN ، يمكنك استخدام سلامة SubResource للأمان الإضافي. لمزيد من التفاصيل ، انظر 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 لا تجمع كل لغة. سيكون كبير جدا. يمكنك العثور على قائمة اللغات "المشتركة" التي نحملها افتراضيًا على صفحة التنزيل الخاصة بنا.
يمكنك أيضًا تنزيل الأصول نفسها التي نخدمها عبر CDNs الخاصة بنا. ننشر تلك البنيات إلى مستودع GitHub CDN. يمكنك بسهولة سحب الملفات الفردية من نقاط النهاية CDN باستخدام curl ، إلخ ؛ إذا قلت أنك بحاجة فقط إلى highlight.min.js وملف CSS واحد.
هناك أيضًا حزمة NPM @Amplislejs/CDN-ASSETS في حالة سحب الأصول عبر npm أو yarn سيكون أسهل لعملية الإنشاء الخاصة بك.
يمكن لصفحة التنزيل إنشاء حزمة مصغرة مخصصة واحدة بما في ذلك اللغات التي تريدها فقط.
ملاحظة: يمكن أن ينتج البناء من المصدر بنيات أصغر قليلاً من تنزيل موقع الويب.
يمكن تثبيت حزمة NPM بما في ذلك جميع اللغات المدعومة مع NPM أو الغزل:
npm install highlight.js
# or
yarn add highlight.jsهناك أيضًا حزمة أخرى من NPM @Amplislejs/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انظر وثائق المبنى لدينا لمزيد من المعلومات.
يعمل Gightly.js على جميع المتصفحات الحديثة وإصدارات Node.js المدعومة حاليًا. ستحتاج إلى البرنامج التالي للمساهمة في المكتبة الأساسية:
يتم إصدار Aightly.js بموجب ترخيص BSD. انظر ملف الترخيص الخاص بنا للحصول على التفاصيل.
الموقع الرسمي للمكتبة هو https://highlightjs.org/.
المزيد من الوثائق المتعمقة لواجهة برمجة التطبيقات والمواضيع الأخرى هي في http://highlightjs.readthedocs.io/.
يمكن العثور على قائمة بالفريق الأساسي والمساهمين في ملف المساهمين.
