highlight.js скачать - highlight.js исходный код скачать

Hight.js

Hight.js - это синтаксис, написанный в JavaScript. Он работает в браузере, а также на сервере. Он может работать практически с любой разметкой, не зависит от любых других структур и имеет автоматическое обнаружение языка.

Содержимое

Основное использование
- В браузере
  - Код открытого текста блоки
  - Игнорирование кодового блока
- Node.js на сервере
Поддерживаемые языки
Пользовательское использование
- Использование пользовательского HTML
- Использование с Vue.js
- Использование веб -работников
Импорт библиотеки
- Node.js Commonjs модули / require
- Node.js es6 модули / import
- Модули браузера ES6
Получение библиотеки
- Получить через CDN
  - cdnjs (ссылка)
  - jsdelivr (ссылка)
  - unpkg (ссылка)
- Скачать предварительные активы CDN
- Скачать с нашего сайта
- Установите через пакет NPM
- Строить из источника
Требования
Лицензия
Ссылки

Обновление до версии 11

Как всегда, основные выпуски содержат нарушающие изменения, которые могут потребовать действий от пользователей. Пожалуйста, прочитайте version_11_upgrade.md для подробного резюме нарушения изменений и любых действий, которые вам могут потребоваться.

Поддержка старых версий

Пожалуйста, смотрите Security.md для долгосрочной информации о поддержке.

Основное использование

В браузере

Минимум для использования hight.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 >

Код открытого текста блоки

Чтобы применить стиль hight.js к открытому тексту, не выделяя его, используйте язык plaintext :

 < pre > < code class =" language-plaintext " > ... </ code > </ pre >

Игнорирование кодового блока

Чтобы полностью пропустить выделение кодового блока, используйте класс nohighlight :

 < pre > < code class =" nohighlight " > ... </ code > </ pre >

Node.js на сервере

Минимум для автоматического определения языка и выделите некоторый код.

 // 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.

Поддерживаемые языки

Hight.js поддерживает более 180 языков в основной библиотеке. Существуют также сторонние определения языка, доступных для поддержки еще большего количества языков. Вы можете найти полный список поддерживаемых языков в поддерживаемой_лангсуаги.md.

Пользовательское использование

Если вам нужно немного больше контроля над инициализацией hight.js, вы можете использовать функции highlightElement и configure . Это позволяет вам лучше контролировать , что выделить и когда .

Например, вот грубое эквивалент вызова highlightAll , но вместо этого выполняет работу вручную:

 document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
  document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
    hljs . highlightElement ( el ) ;
  } ) ;
} ) ;

Пожалуйста, обратитесь к документации для configure параметров.

Использование пользовательского HTML

Мы настоятельно рекомендуем <pre><code> упаковка для блоков кода. Это довольно семантическое и «просто работает» из коробки с нулевым возобновлением. Можно использовать другие элементы HTML (или комбо), но вам может потребоваться уделять особое внимание сохранению линейных разбил.

Допустим, ваша разметка для кодовых блоков использует DOV:

 < 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;
}

Использование с Vue.js

См. HighlingJS/Vue-Plugin для простого плагина Vue, который отлично работает с hight.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 ) ;
} ) ;

В рабочих.

 onmessage = ( event ) => {
  importScripts ( '<path>/highlight.min.js' ) ;
  const result = self . hljs . highlightAuto ( event . data ) ;
  postMessage ( result . value ) ;
} ;

Импорт библиотеки

Во -первых, вы, вероятно, будете устанавливать библиотеку через npm или yarn - см. Получение библиотеки.

Node.js Commonjs модули / `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' } ) . value

Node.js es6 модули / `import`

Импорт по умолчанию зарегистрирует все языки:

 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' ;

Модули браузера ES6

Примечание. На данный момент вы захотите установить пакет @highlightjs/cdn-assets вместо highlight.js . См. Скачать предварительно построенные активы 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 для конкретных примеров.

Получение библиотеки

Вы можете получить hight.js в качестве размещенного или настраиваемого сценария браузера или в качестве модуля сервера. Прямо из коробки сценарий браузера поддерживает как AMD, так и CommonJS, поэтому, если вы хотите использовать потребности или браузероиз без необходимости строительства из источника. Серверный модуль также отлично работает с браузерофидом, но есть возможность использовать сборку, специфичную для браузеров, а не что -то, предназначенное для сервера.

Не ссылайтесь на GitHub напрямую. Библиотека не должна работать прямо из источника, она требует строительства. Если ни один из предварительно упакованных вариантов не работает для вас, обратитесь к документации по зданию.

На миндале. Вам нужно использовать оптимизатор, чтобы дать модулю имя. Например:

r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Получить через CDN

Предварительная версия Altember.js в комплекте со многими распространенными языками размещена несколькими популярными CDN. При использовании hight.js через CDN вы можете использовать целостность Subresource для дополнительной безопасности. Подробности см. Digests.md.

cdnjs (ссылка)

Обыкновенный JS

 < 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 >

ES6 модули

 < 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 >

jsdelivr (ссылка)

Обыкновенный JS

 < 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 >

ES6 модули

 < 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 >

unpkg (ссылка)

Обыкновенный JS

 < 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 >

ES6 модули

 < 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 >

ПРИМЕЧАНИЕ. Пакет CDN, пройденная highlight.min.js , не связывает каждый язык. Это было бы очень большое. Вы можете найти наш список «общих» языков, которые мы по умолчанию связываем на нашей странице загрузки.

Скачать предварительные активы CDN

Вы также можете загрузить и самостоятельно, те же активы, которые мы обслуживаем через наши собственные CDN. Мы публикуем эти сборки в репозиторий GitHub, выпускающего CDN. Вы можете легко вытащить отдельные файлы с конечных точек CDN с помощью curl и т. Д.; Если скажем, вам нужно только highlight.min.js и один файл CSS.

Существует также пакет npm @hightjs/cdn-assets, если вытащить активы в npm или yarn будет проще для вашего процесса сборки.

Скачать с нашего сайта

Страница загрузки может быстро генерировать пользовательский однофотонный мини-пакет, включая только желаемые языки.

Примечание. Строительство из исходного источника может производить немного меньшие сборки, чем загрузка сайта.

Установите через пакет NPM

Наш пакет NPM, включая все поддерживаемые языки, можно установить с помощью NPM или пряжи:

npm install highlight.js
# or
yarn add highlight.js

Существует также еще один пакет NPM @hightjs/cdn-активы, который содержит предварительно построенные активы CDN, включая модули ES6, которые могут быть импортированы в браузере:

npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assets

В качестве альтернативы, вы можете построить пакет NPM из Source.

Строить из источника

Текущий исходный код всегда доступен на GitHub.

node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :common

Смотрите нашу строительную документацию для получения дополнительной информации.

Требования

Hight.js работает во всех современных браузерах и в настоящее время поддерживаемых Node.js версий. Вам понадобится следующее программное обеспечение, чтобы внести свой вклад в основную библиотеку:

Node.js> = 12.x
npm> = 6.x

Лицензия

Hight.js выпускается по лицензии BSD. Смотрите наш файл лицензии для получения подробной информации.

Ссылки

Официальный веб -сайт библиотеки - https://highlightjs.org/.

Дальнейшая углубленная документация для API и других тем-http://highlightjs.readthedocs.io/.

Список основной команды и участников можно найти в файле Antormors.md.

Расширять

highlight.js

Hight.js

Обновление до версии 11

Поддержка старых версий

Основное использование

В браузере

Код открытого текста блоки

Игнорирование кодового блока

Node.js на сервере

Поддерживаемые языки

Пользовательское использование

Использование пользовательского HTML

Использование с Vue.js

Использование веб -работников

Импорт библиотеки

Node.js Commonjs модули / require

Node.js es6 модули / import

Модули браузера ES6

Получение библиотеки

Получить через CDN

cdnjs (ссылка)

Обыкновенный JS

ES6 модули

jsdelivr (ссылка)

Обыкновенный JS

ES6 модули

unpkg (ссылка)

Обыкновенный JS

ES6 модули

Скачать предварительные активы CDN

Скачать с нашего сайта

Установите через пакет NPM

Строить из источника

Требования

Лицензия

Ссылки

Node.js Commonjs модули / `require`

Node.js es6 модули / `import`