본문 바로가기
프로그래밍

[티스토리] highlight.js 를 활용해서 티스토리 코드블럭 꾸미기

by kdohyeon (김대니) 2023. 2. 10.
반응형

아래를 참고하여 HTML 편집까지 접근해보자

티스토리 > 블로그 관리 >  꾸미기 탭 > 스킨 편집 > html 편집

highlight.js 에 가서 원하는 테마를 골라오자

다양한 테마가 존재

원하는 테마의 이름이 예를 들어 "Atom One Dark" 라면, "atom-one-dark" 형태로 변경한다.

  • 전체 소문자화
  • 띄어쓰기는 - 로 변경

아래 스크립트를 HTML 편집기에 추가

아래 스크립트에서 선택한 테마의 이름으로 변경해주어야 한다. (atom-one-dark 부분을 바꾸기)

<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>

아래 사진 참고

반응형

댓글