highlight.js의 사용방법을 알아보자.
아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.
티스토리 플러그인 사용방법과 동일하게 사용하기
티스토리 플러그인 사용방법과 동일하게 글쓰기에서 더보기 -> 코드블럭 클릭후 코드를 입력하면 된다.
자세한 방법은 [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 사용언어 제목라벨에 자동표시하기
highlight.js 내부 소스 버튼클릭으로 복사하기
highlight.js D2 Coding 글꼴로 변경하기
관련글
날다의 운영환경 | |
---|---|
본체 | DeskTop |
O S | Windows11 Pro |
Browser | Google Chrome |
'Blog' 카테고리의 다른 글
[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가) (0) | 2025.01.10 |
---|---|
[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시) (0) | 2025.01.09 |
[Blog] highlight.js 설치하기(티스토리에 설치하기) (0) | 2025.01.08 |
[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기) (0) | 2025.01.08 |
[Blog] Code Pen (코드펜) 티스토리에 적용시켜보기 (0) | 2025.01.06 |