멋진 커뮤니티 모듈

Highlight.js

빌드 상태

Highlight.js는 JavaScript로 작성된 구문 하이 라이터입니다. 브라우저와 서버에서 작동합니다. 거의 모든 마크 업과 함께 작동하고 프레임 워크에 의존하지 않으며 자동 언어 감지 기능이 있습니다.

시작하기

웹 페이지에서 highlight.js를 사용하기위한 최소한의 것은 스타일 중 하나와 함께 라이브러리에 연결하고 initHighlightingOnLoad 호출하는 initHighlightingOnLoad .

1 2 3
<link rel="stylesheet" href="/path/to/styles/default.css"> <script src="/path/to/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>

그러면 <pre><code> 태그 내에서 코드를 찾아 강조 표시합니다. 언어를 자동으로 감지하려고합니다. 자동 감지가 작동하지 않는 경우 class 속성에서 언어를 지정할 수 있습니다.

1
<pre><code class="html">...</code></pre>

지원되는 언어 클래스 목록은 클래스 참조 에서 확인할 수 있으며 클래스 앞에 language- 또는 lang- 붙일 수도 있습니다.

강조 표시를 nohighlight 비활성화하려면 nohighlight 클래스를 사용하십시오.

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

사용자 지정 초기화

당신이 highlight.js의 초기화를 통해 좀 더 컨트롤을 필요로 할 때, 당신은 사용할 수 있습니다 highlightBlockconfigure 기능을. 이것은 당신이 무엇을 강조하고 제어 할 수 있습니다.

다음은 jQuery를 사용하여 initHighlightingOnLoad 를 호출하는 것과 동일한 방법입니다.

1 2 3 4 5
$(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); });

<pre><code> 대신 태그를 사용하여 코드를 마크 업할 수 있습니다. 줄 바꿈을 유지하는 컨테이너를 사용하지 않는 경우 <br> 태그를 사용하도록 highlight.js를 구성해야합니다.

1 2 3 4 5
hljs.configure({useBR: true}); $('div.code').each(function(i, block) { hljs.highlightBlock(block); });

다른 옵션은 configure 문서를 참조하십시오.

웹 워커

웹 워커 내부에서 강조 표시를 실행하여 매우 큰 코드 청크를 처리하는 동안 브라우저 창을 멈추지 않도록 할 수 있습니다.

기본 스크립트에서 :

1 2 3 4 5 6
addEventListener('load', function() { var code = document.querySelector('#code'); var worker = new Worker('worker.js'); worker.onmessage = function(event) { code.innerHTML = event.data; } worker.postMessage(code.textContent); })

worker.js에서 :

1 2 3 4 5
onmessage = function(event) { importScripts('<path>/highlight.pack.js'); var result = self.hljs.highlightAuto(event.data); postMessage(result.value); }

도서관 구하기

Highlight.js를 호스팅, 사용자 지정 빌드, 브라우저 스크립트 또는 서버 모듈로 얻을 수 있습니다. 즉시 브라우저 스크립트는 AMD와 CommonJS를 모두 지원하므로 원하는 경우 RequireJS 또는 Browserify를 사용할 필요없이 사용할 수 있습니다. 소스에서 빌드합니다. 서버 모듈은 Browserify에서도 완벽하게 작동하지만 서버용 빌드가 아닌 브라우저 별 빌드를 사용하는 옵션이 있습니다. 모든 옵션을 보려면 다운로드 페이지 로 이동하세요.

GitHub에 직접 연결하지 마세요. 라이브러리는 소스에서 직접 작동하지 않아야하므로 빌드가 필요합니다. 사전 패키징 된 옵션이 작동하지 않는 경우 빌드 문서 를 참조하세요.

CDN에서 호스팅하는 패키지에는 모든 언어가 포함되어 있지 않습니다. 그렇지 않으면 너무 것입니다. "공통"섹션에 필요한 언어가 표시되지 않으면 수동으로 추가 할 수 있습니다.

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

아몬드 에서 모듈 이름을 지정하려면 최적화 프로그램을 사용해야합니다. 예 :

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

특허

Highlight.js는 BSD 라이선스에 따라 출시되었습니다. 자세한 내용은 LICENSE 파일을 참조하세요.

도서관의 공식 사이트는 https://highlightjs.org/ 입니다.

API 및 기타 주제에 대한 자세한 문서는 http://highlightjs.readthedocs.io/에 있습니다.

작성자와 기여자는 AUTHORS.en.txt 파일에 나열되어 있습니다.