아무래도 블로그에 코드를 넣는 글이 많다보니, 예쁜 syntax highligthing 테마를 적용하고 싶어졌다. 그 과정을 쉽고 간단하게 남겨본다.
1. 티스토리 기본 플러그인
사실 티스토리에서 제공하는 기본 포맷도 썩 나쁘지는 않다고 생각하므로 그 방법을 먼저 남긴다.
티스토리 블로그 관리 -> 플러그인 에서 선택할 수 있는 "코드 문법 강조" 플러그인이다. 이후 게시글을 작성할 때, 코드블럭을 선택하여 넣으면 원하는 테마를 적용할 수 있다. 내가 사용하던 테마는 Atom One Dark. 딱히 호불호 없을 무난무난한 다크 테마라고 생각된다.
2. highlight.js 에서 테마 가져와서 사용하기
기본적으로 제공하는 테마가 심심하고 나만의 개성을 찾고 싶어 새로운 방법을 탐색하기 시작. 우선 이 방법을 사용하려면 위의 티스토리 기본 "코드 문법 강조" 플러그인을 해제해야 된다. highlight.js 홈페이지에서 아래로 쭉 내려오면 HTML 태그를 이용해서 스타일을 적용할 수 있게 제공하고 있다. 사용하고 싶은 테마의 종류는 Demo 메뉴에서 미리 확인해 볼 수도 있다. 내가 고른 테마는 어두운 배경에 분필 색감이 인상적인 "base16-chalk"를 골랐다.
원하는 테마를 골랐으면 이름을 잘 기억하고 cdnjs 코드를 티스토리 블로그에 복붙하러 간다. 자, 이제 티스토리 블로그에 적용해 보자. 블로그 관리 -> 꾸미기 -> 스킨 편집 -> html 편집으로 들어간다. 그리고 highlight.js 홈페이지 아래로 쭉 내려가면 복붙할 수 있는 cdnjs 코드를 긁어와 <head></head> 태그 사이에 복붙한다. 물론 본인이 원하는 테마를 적용하기 위해서는 일부 수정이 필요하다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/base16/chalk.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/*.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js" integrity="sha512-axd5V66bnXpNVQzm1c7u1M614TVRXXtouyWCE+eMYl8ALK8ePJEs96Xtx7VVrPBc0UraCn63U1+ARFI3ofW+aA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>hljs.initLineNumbersOnLoad();</script>
내가 고른 테마인 base16-chalk를 적용하기 위해 styles/base16/chalk.min.css 파일을 선택, 라인 넘버까지 포함하기 위해 highlightjs-line-number.js 까지 추가해주었다. 기존 블로그 게시글이 잘 변경된 것을 확인하였다. 그런데 줄바꿈 너비가 좀 맘에 안들긴 한다...
3. CSS 수정으로 줄바꿈, 둥근 모서리 적용하기
폰트 사이즈, 줄간격, 둥근 모서리 등의 자잘한 옵션들을 바꿔주기 위해 CSS에서 code를 검색한다. 코드 블럭에 적용되는 #article-view pre code.hljs 내부의 css 코드를 입맛에 맞게 고쳐주니 잘 변경된다. 입맛에 맞게 border-radius를 추가하고, font-size는 줄이고, line-height도 줄였다. 값들은 조금씩 조정해가며 새로고침 하면서 예쁜지 안예쁜지 확인한다.
당분간 이 설정으로 글 많이 써야겠다.
추가) 모바일에서 보면 제대로 설정이 안나온다... 해결방법 고민해보기
'😃 신변잡기 > 👨💻 블로그' 카테고리의 다른 글
| 카카오 Adfit 수익 현황 (4) | 2024.10.13 |
|---|---|
| 블로그 오픈~ (0) | 2024.08.03 |