highlight.js
v11.11.0 - Happy Holidays
하이라이트 .js는 JavaScript로 작성된 구문 형광펜입니다. 브라우저뿐만 아니라 서버에서도 작동합니다. 거의 모든 마크 업으로 작동 할 수 있으며 다른 프레임 워크에 의존하지 않으며 자동 언어 감지가 있습니다.
내용물
requireimport항상 그렇듯이 주요 릴리스에는 사용자의 조치가 필요할 수있는 변경 사항이 포함됩니다. 변경 사항 중단 및 취해야 할 조치에 대한 자세한 요약은 version_11_upgrade.md를 읽으십시오.
장기 지원 정보는 Security.md를 참조하십시오.
웹 페이지에서 Highlower.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 > 하이라이트를 실제로 강조하지 않고 일반 텍스트에 styling을 적용하려면 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 highlight 또는 highlightAuto 에서 반환 한 결과 오브젝트에 대한 import require 은 API 문서를 참조하십시오.
Highlower.js는 핵심 라이브러리에서 180 개 이상의 언어를 지원합니다. 더 많은 언어를 지원할 수있는 타사 언어 정의도 있습니다. supported_languages.md에서 지원되는 언어의 전체 목록을 찾을 수 있습니다.
Highlight.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를 사용하는 것이 좋습니다 .
CSS를 사용하여 div 내부의 라인 브레이크를 보존하려면 :
div . code {
white-space : pre;
}Highlod.js와 잘 작동하는 간단한 VUE 플러그인은 HighlodJS/Vue-Plugin을 참조하십시오.
작동중인 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' ; 참고 : 지금은 highlight.js 대신 @highlightjs/cdn-assets 패키지를 설치하려고합니다. 미리 빌드 된 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 ) ;참고 : 사전 구축 된 ES6 모듈 CDN 리소스와 같은 완전 정적 URL에서 직접 가져올 수도 있습니다. 구체적인 예는 CDN을 통해 가져 오기를 참조하십시오.
Highlower.js를 호스팅 또는 사용자 정의 구축, 브라우저 스크립트 또는 서버 모듈로 얻을 수 있습니다. 바로 상자에서 브라우저 스크립트는 AMD와 CommonJS를 모두 지원하므로 원하는 경우 소스에서 빌드하지 않고도 요구 사항을 사용하거나 Browserify를 사용할 수 있습니다. 서버 모듈은 Browserify에서도 완벽하게 작동하지만 서버를위한 것이 아니라 브라우저에 맞는 빌드를 사용하는 옵션이 있습니다.
GitHub에 직접 연결하지 마십시오. 도서관은 소스에서 바로 작동하지 않아야하며 건물이 필요합니다. 사전 포장 된 옵션이 작동하지 않으면 건물 문서를 참조하십시오.
아몬드에서. 모듈에 이름을 부여하려면 Optimizer를 사용해야합니다. 예를 들어:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js많은 공통 언어로 번들로 제공되는 미리 건축 된 버전의 Highlod.js는 몇 가지 인기있는 CDN이 호스팅합니다. CDN을 통해 Heights.js를 사용하는 경우 추가 보안을 위해 하위 소스 무결성을 사용할 수 있습니다. 자세한 내용은 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 > 참고 : CDN-Hosted highlight.min.js 패키지는 모든 언어를 번들로 번들지는 것은 아닙니다. 매우 클 것입니다. 다운로드 페이지에서 기본적으로 묶는 "공통"언어 목록을 찾을 수 있습니다.
또한 본인의 CDN을 통해 우리가 제공하는 것과 동일한 자산을 다운로드하여 자조 할 수도 있습니다. 우리는 이러한 빌드를 CDN 방출 Github 저장소에 게시합니다. curl 등으로 CDN 엔드 포인트에서 개별 파일을 쉽게 가져올 수 있습니다. highlight.min.js 만 필요하다고 말하면 min.js와 단일 CSS 파일.
NPM 패키지 @HeydrightJS/ yarn -Assets도 npm 을 통해 자산을 끌어 올리면 빌드 프로세스가 더 쉬울 것입니다.
다운로드 페이지는 원하는 언어 만 포함하여 사용자 정의 단일 파일 미니딩 번들을 빠르게 생성 할 수 있습니다.
참고 : 소스에서 구축하면 웹 사이트 다운로드보다 약간 작은 빌드를 생산할 수 있습니다.
지원되는 모든 언어를 포함한 NPM 패키지는 NPM 또는 원사로 설치할 수 있습니다.
npm install highlight.js
# or
yarn add highlight.js브라우저에서 가져올 수있는 ES6 모듈을 포함하여 미리 건축 된 CDN 자산이 포함 된 또 다른 NPM 패키지 @Highlower @CDN-Assets도 있습니다.
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자세한 내용은 건물 문서를 참조하십시오.
Highlower.js는 모든 최신 브라우저 및 현재 지원되는 Node.js 버전에서 작동합니다. 핵심 라이브러리에 기여하려면 다음 소프트웨어가 필요합니다.
Highlower.js는 BSD 라이센스에 따라 릴리스됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.
도서관의 공식 웹 사이트는 https://highlightjs.org/입니다.
API 및 기타 주제에 대한 추가 심층 문서는 http://highlightjs.readthedocs.io/에 있습니다.
핵심 팀 및 기고자 목록은 Conflubors.md 파일에서 찾을 수 있습니다.
