| #관련 글 |
| [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 |
| [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 |
| [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 |
# 코드 블럭 하이라이트 적용
블로그에서 글을 쓸 때 코드를 작성하는 경우가 있습니다.
티스토리에서 기본적으로 제공해주는 코드 블럭이 있지만 에디터에서만 하이라이트가 적용되고,
작성 후 실제 블로그에서 보면 하이라이트가 되지 않기 때문에 별로도 구현해야 합니다.
코드블럭을 설정하는 3가지 방법을 소개하겠습니다.
# highlight.js 적용 방법 1 - 블로그 관리 페이지에서 적용
블로그 관리 페이지 메뉴에서 [플러그인] → [Syntax Highlight] 를 클릭합니다.
원하는 테마를 선택하고 [적용]을 클릭하면 적용된 모습을 확인할 수 있습니다.
# highlight.js 적용 방법 2 - 사이트에서 코드 적용
highlight.js
Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.
highlightjs.org
highlightjs 사이트에 접속해서 플러그인을 다운로드합니다.
사이트 메인에서 프로그래밍 language와 style을 클릭하면 미리 적용된 모습을 확인할 수 있습니다.
1. highlight.js 사이트에서 Get version을 클릭합니다.
2. cdnjs 코드를 복사합니다.
3. 블로그 관리 페이지 → [스킨 편집] → [html 편집] 으로 이동합니다.
4. <head></head> 태그 안에 복사한 코드와 삽입합니다.
cdnjs 코드와 코드가 실행될 수 있도록 OnLoad() 코드도 삽입합니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<!-- load() -->
<script>hljs.initHighlightingOnLoad();</script>
여기까지 하면 코드 블럭 기본 테마가 적용된 모습을 확인할 수 있습니다.
만약 원하는 테마를 적용하고 싶으면 아래와 같이 하면 됩니다.
5. stylesheet 경로를 변경합니다.
highlight.js demo
highlightjs.org
하이라이트 데모 페이지에서 원하는 테마를 고릅니다.
사진처럼 테마가 적용된 모습을 미리 확인할 수 있습니다.
[html 편집] 으로 돌아가서 css경로를 변경하면 되는데 주의할 점이 있습니다.
- 모든 글자는 소문자로 변경
- 띄어쓰기는 하이픈(-) 으로 변경
예를 들어, 변경하고 싶은 테마가 Tomorrow Night Eighties 라면 아래 코드처럼 변경하면 됩니다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/tomorrow-night-eighties.min.css">
# highlight.js 적용 방법 3 - 파일 다운로드
1. highlight.js 다운로드
Get version 버튼을 클릭하면 다운로드 페이지로 이동합니다.
필요한 언어를 선택해서 Custom package를 만들 수 있습니다.
아래와 같이 [Common] 탭에 있는 언어들은 기본값으로 선택되어 있습니다.
원하는 언어만 선택해서 다운받아도 좋지만, 설정되어있는 그대로 다운로드하겠습니다.
2. 파일 업로드
다운로드된 압축파일을 해제한 후 highlight.pack 파일과
[style] 폴더 안에 있는 원하는 테마의 css파일을 자신의 티스토리 블로그에 업로드합니다.
블로그 관리 페이지 → [스킨 편집] → [파일 업로드] 탭으로 이동합니다.
highlight.pack.js 파일과 css파일을 추가합니다.
[HTML] 탭으로 이동해서 <head></head> 태그 안에 아래와 같은 코드를 추가합니다.
<link rel="stylesheet" href="./images/원하는 테마 이름.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
# 적용 완료
'일상 > 블로그' 카테고리의 다른 글
| [TISTORY] 티스토리 글꼴(폰트/Font) 변경 (1) | 2021.01.30 |
|---|---|
| [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 (0) | 2021.01.27 |
| [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 (0) | 2021.01.24 |
| [TISTORY] 티스토리 글 URL 설정 (0) | 2021.01.22 |
