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

highlight.js를 직접 설치해보자.

이전 블로그글 [Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)에서

티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법에 대해 알아보았다.

다시 한번 직접설치와 비교하여 장단점을 알아보자면

티스토리 Syntax Highlight 플러그인 장단점

장점

1. 일단 설치가 너무 간단하다.

2. 사용방법이 편함

3. 티스토리에서 지원해주는 만큼 소스충돌 걱정 없이 사용가능

단점

1. 테마가 7개밖에 없다. (직접설치는 498개)

2. 지원해주는 언어가 20개 밖에 없다 (직접설치는 192개)

3. 추가기능을 HTML로 사용할수 있는데 이왕 할꺼면 직접설치를 하는게 더 좋다.

필자는 블로그글을 적을때 HTML을 원래 편집하고 있기때문에 직접설치를 하기로 결정했다.

(설치전 티스토리 플러그인을 설정했었다면 충돌위험때문에 꼭 플러그인 사용 해제를 해줘야 한다.)

highlight.js 설치

1. 사이트 접속 (우측 상단 Download 메뉴 클릭)

https://highlightjs.org/

2. 다운로드 메뉴에서 원하는 언어 선택

언어 선택후 다운로드 클릭

3. 우측상단 Demo메뉴 선택

자주쓰는 소스코드 입력후 원하는 테마 찾기

4. 다운받은 파일 압축풀기

압축 풀고 난뒤 highlight.min.js파일과 styles폴더에서 원하는 테마 파일 찾기

5. 티스토리에 파일 업로드 하기

관리자 페이지 -> 스킨 편집 -> 우측에 HTML편집 -> 상단 파일업로드 메뉴 클릭 -> 4에서 찾은 파일 두개 업로드 하기

6. HTML 헤더 사이에 아래 구문 추가

첫번째줄은 자신이 올린 테마파일 이름을 적어야한다.

     <!-- highlight.js -->
    <link rel="stylesheet" href="./images/gml.css">
    <script src="./images/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <!-- end higlight.js -->    

7. 적용버튼 클릭

이렇게 highlight.js설치가 완료되었다. 플러그인 활성화만 하면 되는거에 비해 조금은 복잡하다.

(하지만 이전 Syntax Highlight는 훨씬더 복잡했던걸로 기억한다.)

그럼 사용법을 알아보도록 하자.

highlight.js 사용 방법

점점 글이 복잡해져서 다음 포스팅으로 새롭게 만들었다.

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

관련글

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

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

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

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

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

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome