[Tistory] Code block 테마 변경 - 심화편 (Highlight.js 활용)

[Highlight.js]

 

    아무래도 기본 테마는 부족한 점들이 많다.

    그래서 우리는 또 다른 여러 가지 테마를 직접 가져와 적용해볼 것이다.

 

◈ Highlight.js ◈

highlight.js

 

    이렇게 테마를 직접 받아서 적용하는 방법은 총 2가지가 있다.

    하지만 그 전에, 

    먼저 플러그인 'Syntax Highlight - 코드 문법 강조' 적용을 해제해야 정상적으로 적용된다.

    해제 안 하면 충돌 문제가 발생하는 듯?

 

---

 

HTML 적용

 

1. Demo 탭에 들어가서 원하는 테마 고르기

 

예시 코드 작성해주고 원하는 테마를 고른 뒤 기록해둔다.

 

이때, 테마 이름을 HTML에 실제로 입력할 때는

대문자를 소문자로 입력해야하고 띄어쓰기를 하이픈(-)으로 입력해줘야 한다.

하지만 최신버전에는 그럴 필요없이 애초에 소문자와 하이픈(-)으로 지어져 있다.

 

 

2. cdnjs HTML Tag 복사

 

Usage 클릭

스크롤바 쭉 내리다보면 cdnjs 태그를 볼 수 있다. 복사

 

3. HTML에 적용

 

관리 페이지 우측 하단의 '스킨 편집' 클릭

 

스킨 편집창 우측 상단의 'html 편집' 클릭

 

</head>
<!-- Highlight.js 적용 시작 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/테마이름.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- Highlight.js 적용 끝 -->
</head>

</head> 사이에 위에서 복사한 코드를 붙여넣는다.

여기서 마지막 줄의 <script>hljs.highlightAll();</script> 는 위 코드들을 정상 작동 시키는 코드이므로 꼭 넣어줘야 한다.

 

※ 적용 완료

 

---

 

HTML + 파일 업로드 

 

    해당 방법 사용하기 전에,

    위에서 설명한 DEMO 메뉴에서 마음에 드는 테마 골라놓고 시작

 

1. Highlight.js 사이트로 들어가서 파일 다운로드

 

download 클릭

 

common 항목들 선택하고, 다운로드 클릭

highlight.zip

0.93MB

위와 같은 파일이 다운로드된다.

 

2. 파일 업로드

 

스킨 편집 페이지 우측 상단의 '파일 업로드', '+추가' 클릭

 

highlight.min 파일 업로드

원하는 테마 파일 업로드

업로드 완료

3. HTML에 적용

 

</head>
<!-- Highlight.js 적용 시작 -->
<link rel="stylesheet" href="./images/테마이름.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- Highlight.js 적용 끝 -->
</head>

코드 적용 완료

 

※ 적용 완료