오랜만에 블로그를 작성하려고 하니 마음에 들지 않는 테마들 때문에 글쓰고 싶은 마음도 사라지는...

직접 블로그 사이트를 만들기 전에 기존 티스토리 테마를 조금씩 바꿔보려고 합니다.

가장 먼저 해본 것은 코드 블럭!

기존 코드 블럭에 대해서 syntax highlight 테마중 default로 사용하고 있어서 굉장히 마음에 안들었어요..

저는 파스텔톤이나 무채색을 좋아하거든요ㅎㅎ..

제가 하고 싶었던 것 다음과 같아요

 

1. 코드 블럭 색상 테마 변경하기
2. 라인 번호 추가
3. 코드 블럭 접기
4. 줄바꿈에 대한 제어
5. 코드 복사 버튼

 

 

마침 관련해서 구글링해보았는데, 아래의 분께서 정리를 잘해주셨더라고요! 저도 따라하면서 조금 더 커스터마이징 해보았습니다.

https://jinyh.tistory.com/10

조금 더 해보고 싶은 것이 있다면 code 실행에 대한 result 보이게 하는 것이에요.

codepen에서는 embed 링크로 제공하고 있지만, mdn docs에서 보이는 것처럼 직접 만들어보고 싶다는 생각이 들었습니다!

그리고 요즘 옵시디언으로 문서들을 정리하다보니 마크다운에 html 요소들을 나름 많이 넣을 수 있어서 기본 문법 외에도 많은 것들을 활용할 수 있더라고요. 그런 것들을 버튼으로 조금더 스타일링할 수 있는 마크다운 에디터+프리뷰어를 제작하고 싶다는 생각을 하고 있습니다.

아직은 실력이 부족해서 어렵겠지만 조만간 꼭 도전할 예정입니다!

 

어쨌든 저도 성공했으니까 차근히 따라오시면 쉽게 넣으실 수 있을거에요 :)

티스토리 내 테마 사용하기

우선 티스토리에서는 8가지의 코드 블럭 테마를 제공하고 있습니다.

https://[내 블로그 이름].tistory.com/manage/plugins

본인 블로그 주소에 맞게 이동해볼까요? 클릭을 통해 이동하고 싶다면,

[톱니바퀴 모양 (블로그 관리 홈으로 이동해요)] - [왼쪽 사이드 바의 플러그인 클릭]으로 이동할 수 있어요!

 

아래로 조금 내려보면 코드 문법 강조라는 플러그인이 있는데요.

 

여기서 테마를 선택할 수 있어요. 하지만 미리보기 기능이 없어서 하나씩 적용해봐야 하는 ..

 

제가 한번 정리를 해봤는데요. 저는 사실 이중에서 마음에 드는게 없었어요.

왜냐하면 저는 우선 블로그 전체가 흰 배경인데 코드 블럭까지 흰바탕이면 구분이 잘가지 않고 눈이 아파서 다크모드였으면 좋겠고 너무 쨍한 색은 싫었거든요!

highlight.js를 이용한 테마 변경

highlight.js 에서는 굉장히 다양한 테마를 제공하고 있는데요.

링크의 데모 페이지에서 언어와 테마를 선택하여 프리뷰를 확인해볼 수 있습니다.

여기서 마음에 드는 테마를 고르면 될 것 같아요.

 

그런데 유의할 점은 highlight.js를 사용하기 위해서는 티스토리에서 제공하고 있는 코드 문법 강조 플러그인은 해제해주셔야 합니다.

 

https://highlightjs.org/demo

 

Demo - highlight.js

...

highlightjs.org

 

저는 마음에 드는게 꽤나 있어서 뭘 골라야 하나 고민이 됐네요.

저는 여러 언어에 대해서 테스트 해보고 고르게 되었는데,

python, css, javascript, markdown, c, json 정도 확인해보고 골랐어요.

(보다보니 전부다 봐버린..)

제가 고른건 접은 글 안에 있어요!

 

더보기
  • base16-ashes
  • base16-circus
  • base16-framer
  • base16-material-darker
  • base16-pop
  • base16-porple
  • base16-qualia
  • base16-seti-ui
  • base16-snazzy
  • base16-summerfruit-dark
  • base16-windows-10
  • base16-windows-high-contrast
  • base16-zenburn
  • felipec
  • hybrid
  • ir-black
  • lioshi
  • nord
  • stackoverflow-dark
  • tokyonight
  • rainbow

 

저는 이중에서 nord를 선택하였습니다.

고르셨다면 아래의 링크에서 cdnjs를 복사해주세요!

(하이라이트 링크를 복사했더니 링크 보양이 이상하게 보이는데 정상 링크입니다.)

https://highlightjs.org/#usage:~:text=our%20README.-,As%20HTML%20Tags,-cdnjs

 

highlight.js

Usage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module Highlight.js can be used with Node on the

highlightjs.org

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.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.9.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>

이걸 가져오시면 되는데요! 

제가 넣어보니 가장 마지막 script 태그가 안먹는건지 테마가 안씌워지더라고요.

 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.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.9.0/languages/go.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

그래서 저는 이렇게 넣어줬습니다.

 

넣는 방법 알려드릴게요.

티스토리 스킨 편집으로 직접 적용해보기

블로그 관리 홈에서 스킨 편집 탭을 클릭해주세요

 

오른쪽 화면에서 html 편집이라는 버튼을 찾을 수 있습니다. 클릭해주세요

 

이런식으로 HTML 파일이 보이실텐데요.

가장 상위의 <html> 태그 아래에 <head> 태그가 있습니다.

<head> ~~~ 다른 태그들 </head> 형태로 구성이 될텐데, head 태그 안에

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.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.9.0/languages/go.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

아까 복사하였던 cdnjs를 넣어주세요!

 

참고로 첫 줄의 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> 
이 부분의 default 자리에 마음에 드는 테마의 이름을 넣어주시면 됩니다. 
테마에 - 로 단어가 연결되어 있다면 그대로 stackoverflow-dark.min.css 이런식으로 넣어주시면 돼요.
저는 nord 테마를 선택했기 때문에 nord라고 작성하였습니다.

 

그런데 한가지 이슈가 있었어요. 다른 테마들은 잘 적용되었는데 base16-[이름] 형태인 테마는 적용이 안되더라고요.. 이유는 아직 못찾았습니다. 아시는 분 계시면 답글 남겨주세요!

 

어쨌든 이렇게 코드 넣어주시고 적용을 누르시면 됩니다.

 

이렇게 원하는 테마를 적용할 수 있습니다 :)

저작자표시 비영리 변경금지

'Tistory' 카테고리의 다른 글

[Tistory] 폰트 변경하기  (1) 2024.01.07

+ Recent posts

티스토리툴바