하이라이트.js

하이라이트.js는 JavaScript로 작성된 구문 강조 표시기입니다. 서버는 물론 브라우저에서도 작동합니다. 거의 모든 마크업과 작동하고 프레임워크에 의존하지 않으며 자동 언어 감지 기능이 있습니다.

시작하기

웹페이지에서 하이라이트.js를 사용하기 위한 최소한의 방법은 스타일 중 하나와 함께 라이브러리에 연결하고 다음을 호출하는 것입니다 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클래스를 사용하십시오.

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

사용자 정의 초기화

하이라이트.js 초기화에 대해 좀 더 제어가 필요한 경우 highlightBlock및 기능을 사용할 수 있습니다. 이를 통해 강조할 항목 과 시기를configure 제어할 수 있습니다 .

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

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

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

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

도서관 얻기

호스트 또는 사용자 정의 빌드 브라우저 스크립트 또는 서버 모듈로 하이라이트.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

특허

하이라이트.js는 BSD 라이선스로 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

연결

라이브러리의 공식 사이트는 https://highlightjs.org/ 입니다 .

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

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