tistory 편집 꿀팁

[tistory] 코드블럭 테마 변경하기

생각없이 해도 생각보다 좋다. 2022. 9. 2. 14:20

티스토리 플러그인 이용하기

1. 블로그 관리 - 플러그인

2. '코드 문법 강조' 플러그인 선택

3. 테마 설정 후 적용하기

: 기본적인 테마는 쉽게 적용 가능

: 미리보기 기능이 없어 일일이 적용해본 후 확인할 수 있음.

(주의: 아래에서 설명할 HTML로 적용하는 방법을 위해서는 해당 플러그인을 해제해야함.)

 

스킨 편집(HTML)을 이용해서 테마 바꾸기

(주의: 플러그인 방법을 적용이 아닌, 해제해야 가능한 방법)

1. 아래 링크에서 원하는 코드 테마를 찾는다

https://highlightjs.org/static/demo/

: 아래 스크린샷처럼 'Themes' 카테고리에서 원하는 테마를 클릭하면, 우측 내용에서 원하는 언어에 적용된 모습을 확인할 수 있다.

2. HTML에 적용하기

: 블로그 관리 - 스킨편집 - HTML

: <Head> </Head> 태그 안에 아래 코드 넣기

: Head 태그 내에만 있으면 되지만, 보기 좋게 넣는 것을 권장

  <!--코드블럭 라이브러리 추가-->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/tomorrow-night-bright.min.css"> 
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> 
  <script>hljs.initHighlightingOnLoad();</script>

3. 코드 테마 변경 적용하기

: 표시한 부분을 정해둔 코드 테마 이름으로 수정할 것.

: 예시. Tomorrow Night Bright

: 테마명은 모두 소문자로 작성

: 테마명의 공백은 모두 '-'로 표현

 

4. 결과

 

참고 링크 : https://dailylifeofdeveloper.tistory.com/361