티스토리를 개발 기록 블로그로 사용하다 보니 코드블럭을 자주 보게 되는데, 기본 테마가 너무너무 보기 싫어서...
(나도 예쁜 테마 쓰고 싶어!!!!)
조금 막막해서 미루고만 있었는데 쉬는 시간에 재빨리 바꿔버렸다. 나는 참 친절한 레퍼런스를 좋아하는 편이라, 그런 글을 남겨보려 한다. 아마 이대로만 하면 쉽게 따라올 수 있을 것이다...!
1. 테마 변경 방법
우선 다른 테마를 적용하기 위해서는 티스토리에서 제공해주는 테마 플러그인을 꺼주어야 한다.
1. 설정으로 들어가서 [플러그인] 탭으로 들어가 [Syntax Highlight] 를 '해제' 해준다.
2. 아래 사이트에서 원하는 테마를 직접 골라준다.
highlight.js demo (highlightjs.org)
highlight.js demo
highlightjs.org
왼쪽 [Themes] 에서 테마명을 골라주면 된다. 테마명을 누르면 오른쪽 화면에서 언어별로 예시를 볼 수 있다.
개인적으로,
- Atom One Dark
- Github Dark
등등 Dark 화면이 예쁜 것 같다.
이제, 원하는 테마명을 기억해주자.
3. 아래의 파일을 다운로드 받는다.
4. 블로그 설정에서 [스킨 편집]을 누르고 [html 편집]을 눌러 [파일 업로드] 탭으로 들어온다.
5. 하단의 [추가] 버튼을 눌러 이전에 다운로드 받았던 'highlight' 폴더에서 'highlight' 파일과 'highlight.min' 파일을 추가시켜준다. 또, 이전에 골라두었던 테마명을 'highlight/styles' 폴더에서 찾아서 추가해준다.
예를 들어, 내가 고른 테마명이 'Atom One Dark'라면 'atom-one-dark.min' 파일을 추가해준다.
6. [HTML] 탭으로 돌아와서 4번째줄부터 시작되는 <head> 태그와 </head> 태그 사이에 다음 코드를 추가해준다. <head></head> 태그 사이에 있다면 위치는 상관없다.
<!-- 코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet"> <!-- 이 부분의 'atom-one-dark.min.css' 부분을 원하는 테마명으로 바꿔주면 된다. -->
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 highlight 추가 End-->만약, 내가 Github Dark 테마를 골랐다면 'atom-one-dark.min.css' 대신에 'github-dark.min.css' 라고 적어주면 된다.
7. [적용]을 눌러주면 테마 변경이 끝났다. 왼쪽 화면에서 [글] 카테고리에서 [새로고침] 버튼을 누르면 확인해볼 수 있다.
2. 폰트 변경 방법
테마 변경 시에 사용했던 [html 편집] 탭에서 시작한다.
1. 아래 사이트에서 원하는 폰트를 직접 골라준다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 원하는 굵기를 선택해 [Select this style]을 누르고 오른쪽 하단의 링크를 복사해줄 수 있도록 한다.
<출처> - [사과 개발자의 일상] [티스토리] 코드블록 스타일 / 폰트 변경하기 (tistory.com)
3. [html 편집] 탭에서 이전에 테마 변경 코드를 작성한 곳 바로 밑에 해당 코드를 넣어준다. 마찬가지로, <head> 태그와 </head> 태그 사이에 넣어주는 것이다. 앞서 2번에서 복사한 코드를 아래 코드 대신 넣어주면 된다.
<!--티스토리 코드블럭 폰트 설정-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
4. [CSS] 탭에서 Ctrl+F 를 누르고 code를 검색해서 60번째 줄로 이동해준다.
5. 두 줄 밑에 samp {} 안의 코드를 바꿔주면 된다.
font-family의 'Roboto Mono'에는 내가 원하는 폰트명을 넣어준다.
line-height는 줄간격을 의미한다.
font-size는 폰트 크기를 의미한다.
왼쪽 화면을 [새로고침] 하며 값을 원하는대로 수정해주면 된다.
6. [적용]을 눌러주면 폰트 변경이 끝났다.
버튼 몇 개만 누르면 될 줄 알았는데, 생각보다 그리 간단하지는 않았다. 코딩초보자라면 어려울 수도 있겠다는 생각이 들어서 글을 작성하게 되었다.
누군가에게 도움이 되었으면 좋겠다 :)
공감도 생기면 좋겠다 ㅎㅎ..
'일상 기록장' 카테고리의 다른 글
| [한 주 목표] 슬슬 잡아가는 나 자신 루틴 관리하기 (0) | 2023.06.20 |
|---|---|
| [일상 기록장] 지난 3개월 회고 (0) | 2023.06.13 |
| [일상 기록장] 대학교 4학년 취준생이 코딩테스트 언어를 바꾼다면? (0) | 2023.03.28 |
| [일상 기록장] 티스토리 글 목록 삐져나오는 제목 자르기 (CSS 줄바꿈 속성) (0) | 2023.03.15 |