목 차
1. 들어가며
2. 사전설명
3. 코드블럭 설정 방법
1) Syntax Highlight 사용하기
2) highlightjs 라이브러리를 티스토리에 연결
3) highlight.js 테마 직접 추가하기
4. 마치며
1. 들어가며
※ (주의) 티스토리의 HTML, CSS 등을 수정할 경우, 원본은 반드시 백업을 해두도록 하자.
티스토리는 블러그 스킨으로 Book Club형, Poster형, 반응형 등 10가지를 사용자에게 제공하고 있다.
※ 스킨 확인 경로 : 티스토리 설정 > 꾸미기 > 스킨변경
이 중 필자는 Odyssey 스킨을 사용하고 있다.
특별히 이유가 있었던 건 아니다.
이 글을 쓰는 이유는, 나중에 생각없이 스킨을 변경으로 기존 스킨을 다 날릴까봐,
기록 차원에서 글을 남긴다.
※ 한가지 의문인건, 왜 모바일에서는 적용이 안되는지 모르겠다.
문제는 pc에서 바꾼 스킨의 코드블럭이 모바일에서는
어떤 글은 코드블럭이 적용되고, 어떤 글은 적용이 안되니 답답할 따름이다.
나중에... 해결 방법을 알면 별도로 기록하도록 하자.
2. 사전 설명
사용자가 작성한 파이썬 등의 코드 문법을 강조하기 위한 구문이다.
사용자 취향에 따라 흰색의 배경 위에 검정색 글씨로 건조하게 코드를 구성할 수도 있으나,
코드의 가독성 등을 높이기 위해 코드블럭을 사용하여 코를 작성한다.
파이썬 코드 등을 작성할 때 별도로 작성해야 하는 것은 아니고, 티스토리 설정에서 한번 변경해 주면 지속적으로 적용되는 것이 특징이다.
3. 코드블럭 설정 방법
티스토리에서 제공하는 10가지 스킨 중 어떤 스킨을 사용하냐에 따라 크게 바뀌는 건 없으나,
본인이 사용하는 스킨에 따라 적용하는 것이 적용하기 더 편할 것이다.
코드블럭 적용 3가지 방법으로 설명하려고 한다. 정확히는 3가지는 아니다.
크게는 Syntax Highlight와 highlight.js 2가지이다.
highlight.js를 세분하면 알아보자면,
highlight.js의 서버에 매번 접속해서 라이브러리(cdnjs)을 가져올 것이냐, 파일로 다운받아 적용할 것이냐의 선택이다.
1) Syntax Highlight 사용하기
티스토리에서 제공하고 있는 코드블럭이다. 사용법은 의외로 간단하다.
- 경로 : 티스토리 설정 > 플러그인 > Syntax Highlight
2) highlightjs 라이브러리를 티스토리에 연결
아래의 경로에 접속하여 "링크"를 복사해와서 사용자의 티스토리에 붙여주는 방법이다.
※ 코드블럭 다운 경로 : https://highlightjs.org/
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
위 경로에 접속하면, < 그림3-1 >과 같은 화면이 나온다.
Get version 11.7.0을 클릭한다.
(업데이트로 ~~11.7.0의 제목은 바뀔 수 있다.)
< 그림3-2 >의 파란색 문구를 복사하되,
노란색 네모 안에 있는 글자 중 default (기본형)는 변경 필요하다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
< 그림3-1 >에서 노란 네모 안에 있는 "197개 언어 및 248개 스타일"을 클릭하면 < 그림3-3 >과 같은 테마이 나온다.
※ 여기서 주의할 필요가 있다.
테마이름은 대문자는 소문자로, 띄어쓰기는 마니어스(-)로 변경한다.
이유는 알 수 없지만, 티스토리 html 편집 > 파일 업로드된 후의 제목이 자동으로 소문자와 마이너스(-)로 바뀐 걸 확인할 수 있었다. 이것은 티스토리에서 소문자와 마이너스(-)로 인식한다고 볼 수 있을 것이다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
예를 들어 < 그림 3-3 > 테마 중
- Atom One Dark → atom-one-dark
- Base16 / Apathy → base16/apathy
base16은 < 그림3-3 >에서는 띄어쓰기 있어보이나, 실제 티스토리에 적용할 때는 띄어쓰기를 하지 말아야 한다.
결론은 글 상자의 빨간색 부분(default)을 파란색(atom-one-dark, base16/apathy)으로 변경하여 티스토리의 html 편집에 붙여야 한다.
- (변경 후) href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"><script
- (변경 후) href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/apathy.min.css"><script
마지막으로 티스토리에 적용하는 방법을 설명한다.
먼저 HTML을 수정한다.
만약 atom one dark 테마를 사용한다고 가정하면,
티스토리 설정 > 꾸미기 > 스킨 편집 > html 편집에서 HTML을 선택한 후
<head>와 </head> 사이에 코드블럭 코드를 넣어주고, 적용을 눌러준다.
<!---코드블럭 -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
3) highlight.js 테마 직접 추가하기
반복되는 사진은 자제하는 취지에서,
< 그림3-1 >에서 노란색 네모로 된 부분을 클릭한다.
< 그림4-1 >과 같은 화면이 나온다.
파란색 부분을 복사하여 티스토리 설정에 붙이면 된다.
글씨 색깔 등 변경이 많으니... 적용할 테마를 알아보고 본인의 취향에 맞는 테마를 알아보면 된다.
여기서 해야할 일은 파일업로드 및 head에 추가하는 2가지이다. 천천히 살펴보자.
1번의 highlightjs.min 파일과 2번 styles 폴더 안에 있는 "스타일" 1개(적용할 테마)를 티스토리에 업로드해야 한다.
필자는 atom one dark reasonable 테마를 올릴 것이다.
파일업로드를 알아보자. 다운 받은 highlightjs 파일을 압축 풀어보면, < 그림4-2 >와 같다.
티스토리 설정 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드 경로에서 위의 2개 파일을 업로드한다.
마지막으로 head에 추가할 내용이다. 티스토리 설정 > 꾸미기 > 스킨 편집 > html 편집에서 HTML을 선택한 후
<head>와 </head> 사이에 코드블럭 코드를 넣어주고, 적용을 눌러준다.
필자는 atom one dark reasonable 테마를 적용할 것이므로, 3줄(href)에서 이름을 바꾸어주었다.
<!---코드블럭 및 라인넘버 적용 -->
<link rel="stylesheet"
href="./images/atom-one-dark-reasonable.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>4. 마치며
그림이 많아지면서 글이 상당히 길어졌다. ㅠㅠ
필자는 3번(highlight.js 테마 직접 추가)을 사용하고 있다.
사실, 위의 방법 중 가장 간단한 것은,
1번 티스토리에서 제공하는 Syntax Highlight 사용하기가 가장 편하다.
다만, Syntax Highlight는 라인넘버(줄번호)를 붙일 수 없는 한계가 있어,highlightjs를 사용하는 것이다.
다음 시간에는 오디세이(Odyssey) 스킨에 라인넘버(줄번호)를 설정하는 방법을 알아보자.
'5. 개인기록용 > 5-1. 티스토리 설정' 카테고리의 다른 글
| (티스토리) 오디세이(Odyssey) 스킨 (2) 코드블럭의 코드넘버(줄번호) 및 스크롤 적용 (0) | 2023.01.18 |
|---|