Highlight.사용법

highlight.js는 HTML에 소스 코드를 표시할 때 키워드 등을 강조하는 JavaScript 라이브러리입니다.피쳐이긴 한데.

에 대응하는 언어가 많다(이 라이브러리 중 가장 많은 것은

풍부한 트레이

간단한 설치

네.
참조: 코드 하이라이트 디스플레이용 JS 라이브러리 3가지
highlight.사이트 축소판 그림

설정

(1) 인터넷에 연결할 수 있는 경우

인터넷에 연결할 수 있는 경우 다음과 같은 방법을 사용할 수 있습니다.js를 다운로드하여 웹 서버에 설치하는 번거로움을 줄일 수 있다.이 글을 쓸 때의 URL 버전은 8.6이지만 하이라이트입니다.js 버전이기 때문에 필요에 따라 변경합니다.2019/10에서 가장 최근에 나온 것은 9.15.10이다.
팔레트 default.min.css는 소박하기 때문에 vs.min.css를 사용하면 예뻐요.팔레트에 어떤 모양새가 있는지 하이라이트입니다.js 사이트에서 볼 수 있습니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/vs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

(2) 내부 네트워크 등의 경우(인터넷에 접속할 수 없는 경우)

다음 코드는 네트워크 서버의 가상 폴더/js/high light입니다.js가 설정되었습니다.

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

강조 표시된 원본 코드는 아래 예시와 같이 <pre><code> ... </code></pre>로 묶는다.

<pre>
 <code>
  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1)
        return process(block, true, 0x0F) + 
           ' class=""';
    } catch (e) {
    /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined)
        return /\d+[\s/]/g;
    }
  }
 </code>
</pre>

이 디스플레이 결과는 다음과 같습니다.(색상은 팔레트의 지정에 따라 변경됩니다.)

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

팔레트 변경 내용

팔레트에서 링크 탭의 href 속성을 변경합니다.다음 예는default입니다.css를 변경합니다.

<link rel="stylesheet" href="/js/highlight/styles/default.css">

버전 8.6이면 팔레트는 63종이에요.아래에 몇 가지 예를 열거한다.이 CSS의 링크 태그에 대한 href 속성의 default입니다.css로 바꾸면 팔레트를 변경할 수 있습니다.
CDN을 사용하는 경우 *min.css가 필요합니다.예를 들어, default입니다.min.css처럼.
atelier-cave.light.css

atelier-sulphurpool.dark.css

color-brewer.css

magula.css

mono-blue.css

paraiso.light.css

solarized_dark.css

solarized_light.css

tomorrow.css

vs.css

xcode.css

언어 설정

언어 설정은 자동입니다.원하는 강조 표시를 표시할 수 없으면 코드 탭의class 속성을 사용하여 언어를 지정할 수 있습니다:.

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

끝맺다