[티스토리] 코드블럭(Codeblock) 테마 커스터마이징

 

기본 제공 테마 (플러그인) 사용

1.  블로그 관리 (설정) 의 왼쪽 탭의 플러그인에 들어가기

2.  코드 문법 강조 항목 (Syntax Highlight) 에서 원하는 테마 설정

외부 테마 (highlight.js) 사용하기

1. 코드 문법 강조 항목을 '사용중' 해제하기
2. 링크된 사이트의 좌측 탭 Themes 항목에서 원하는 테마를 고르기
3. 고른 테마 이름을 아래 코드의 <테마이름>부분에 넣기 
   • 테마 이름 규칙
     • 대문자 ▶ 소문자 변경
     • 띄어쓰기 ▶ '-' (하이픈)
     • ex) Atom One Dark ▶ atom-one-dark
4. '관리 ▶ 꾸미기 ▶ 스킨편집 ▶ html 편집 ▶ HTML' 의 </head> 태그 바로 위에 아래 코드를 붙여넣어준다.
5. '적용'을 눌러주면 새로운 스킨이 적용 완료된다.

  

    
    
    
    
  
<!-- 테마 변경 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/<테마이름>.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<!-- load() -->
<script>hljs.initHighlightingOnLoad();</script>

 

기본 제공 테마 기반 커스터마이징 소스 공유

* 참조한 사이트에서 가져온 코드파일은 파싱된 코드의 인덴트(indent)가 일정하지 않은 문제 등이 발생하였다. 이를 해결하기 위해 파일을 일부 업데이트 했다.

1. '관리 ▶ 꾸미기 ▶ 스킨편집 ▶ html 편집 ▶ CSS' 에서 기존에 작성된 .hljs 코드를 지우기
2. .hljs 코드를 지운 위치에 아래의 .css 파일의 코드를 붙여넣기 
3. '관리 ▶ 꾸미기 ▶ 스킨편집 ▶ html 편집 ▶ 파일업로드' 에 아래 업로드되어있는 .js 파일을 올리기
4. 적용 버튼 누르기

.hljs 지우고 갱신하기

codeblock.js 파일 올리기

 

codeblock.js

0.00MB

codeblock.css

0.00MB

 

참조:

• https://habitus92.tistory.com/9
• https://guiyomi.tistory.com/132

[티스토리]코드블럭 테마 및 폰트변경 완벽가이드

[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기