Blog

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

Fly_Mir 2025. 1. 9. 01:16

highlight.js의 사용방법을 알아보자.

아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.

 

[Blog] highlight.js 설치하기(티스토리에 설치하기)

highlight.js를 직접 설치해보자.이전 블로그글 [Blog] 소스 코드 하이라이트 기능 사용하기 (Syntax Highlight 티스토리 버전)에서 티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법

mirwebma.tistory.com

티스토리 플러그인 사용방법과 동일하게 사용하기

티스토리 플러그인 사용방법과 동일하게 글쓰기에서 더보기 -> 코드블럭 클릭후 코드를 입력하면 된다.

자세한 방법은 [Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기) 에서 확인할수 있다.


문제점이 있다. 원래 티스토리에 설정되어 있는 언어리스트만 표시하기 때문에 새롭게 추가한 언어는 결국 HTML에서 수정해줘야 한다.


※ 코드블럭을 넣고난뒤 HTML에 들어가면 <pre>에 data-ke-language와 data-ke-type 속성이 있다.

둘다 공식홈페이지에서 지원하는 속성이 아니고 티스토리에서 지원하는 속성인데 정확히 어떤 작용을 하는지는 확인할수가 없다.


※ 리스트에 없는 언어를 설정하고 싶으면 class속성을 바꿔줘야 한다. (data-ke-language속성은 공식 홈페이지 지원 속성이 아니다.)

HTML 구문에 직접 추가해서 사용하기

<pre><code> 코드작성 </code></pre>

기본적으로 <pre><code>와 </code></pre> 사이에 코드를 넣으면 언어를 자동으로 감지한다.

하지만 언제나 예외가 있으니 감지를 못할경우를 위해 기본적으로 class라는 속성을 추가해준다.

(위 예제는 class 속성을 넣지 않았는데 HTML을 자동감지해서 class에 HTML이 들어가있는 상태이다.)

<pre class="지원언어 코드"><code> 코드작성 </code></pre> 

만약 C# 코드를 작성했다면 <pre class="csharp"><code> C# 코드 </code></pre>처럼 넣으면 된다.

지원언어 코드는 https://highlightjs.readthedocs.io/en/latest/supported-languages.html에서 확인 가능하다.

plaintext

<pre class="plaintext"><code> 코드작성 </code></pre> 

class에 plaintext를 넣으면 일반 텍스트로 처리된다. highlight.js의 배경만 가지고 오고 싶을때 사용할수 있다.

(라고 홈페이지에 써져있는데... 지금 plaintext라는 부분에 노란색이 있으면 안되는데... 왜 있지?)

(이 기능은 좀더 알아보고 다시 수정하도록 하겠습니다...)

일단 HTML을 자동감지하지는 않습니다. 일반 텍스트에도 ""안에 있는것은 강조 표시 하는걸로 보입니다.

→ 현제 plaintext를 넣어도 소스 자동감지는 계속 돌아가고 있습니다.

원래 소스 감지후 해당 소스의 언어를 class에 자동으로 넣어주는데 그건 작동안하고 있습니다.

티스토리만 이런건지 정확히는 모르겠습니다. (티스토리 플러그인과 충돌일 가능성도 있습니다.)

아무튼 보통 텍스트만 올리면 HTML로 인식해서 ""안에 있는 글은 강조표시 됩니다.

(특정소스 코드를 올리면 해당 코드로 인식해서 숫자도 강조표시 될수 있습니다.)

nohighlight


<pre class="nohighlight"><code> 코드작성 </code></pre> 

class에 nohighlight를 넣으면 모든 스타일과 기능이 사라진다.

일반 pre를 사용해야될 일이 있을때 사용하면 된다.


나도 처음에 믿지 못했지만 여기까지가 기능의 전부이다.

예전에 사용되던 Syntax Highlight에서는 줄번호 매기기, 몇번째줄 하이라이트 표시하기 등등 많은 기능이 있었지만

highlight.js는 최대한 가볍게 기타 기능없이 오로지 코드 하이라이트에만 충실하게 구현되어있다.

끝으로..

따로 추가기능이 없어서 조금 실망하기도 했지만 생각해보니 다른기능을 잘 쓰지도 않았던거 같다.

하지만 몇몇 기능들은 추가했으면 좋겠다는 마음이 있는데 필자도 조금 수정해보도록 하겠다.


※ 필자는 코드 줄맞추기를 좋아하는 편인데 이게 <code>뒤에 엔터값을 넣으면 표현되는 부분에서 한줄이 바로 추가되기때문에 <code>와 같은줄에 코드 첫줄을 넣어야 하는데... 줄이 삐뚤어지는게 보기 싫어서 고치고 싶다.. ㅠㅠ


※ 줄 맞추는거 고치는건 포기했고 사용언어를 제목라벨에 넣는기능과 복사기능을 추가하고 폰트변경까지 하였다.

highlight.js 사용언어 제목라벨에 자동표시하기

 

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자. 현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에

mirwebma.tistory.com

highlight.js 내부 소스 버튼클릭으로 복사하기

 

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.필자가 올린 소스를 다시 사용하는데 복사 붙혀넣

mirwebma.tistory.com

highlight.js D2 Coding 글꼴로 변경하기

 

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

highlight.js에 쓰이는 폰트를 변경해보자.제목 라벨과 Copy버튼을 넣고 가만히 보고 있었는데 뭔가 자꾸 어색한 느낌이 들어서 뭐 때문인지 몰랐다가 Visual Studio를 켜고난뒤에 알았다. 폰트가 코딩

mirwebma.tistory.com


날다의 운영환경
본체DeskTop
O SWindows11 Pro
BrowserGoogle Chrome