티스토리 블로그 코드 스타일 적용하기(코드 문법 강조 플러그인, highlightjs)

본 포스팅은 아래 블로그를 참고하여 작성하였습니다. 

https://bumcrush.tistory.com/182 

 

티스토리 블로그는 기본적인 코드블럭 기능을 제공합니다.

 

 

하지만, 별도의 highlight를 적용하지 않으면 코드블럭이 아래와 같이 가독성이 떨어지는 모습으로 나타나게 됩니다.

 

 

코드블럭에 highlight를 적용하는 방법은 두가지가 있습니다. 

 

방법1: 코드 문법 강조 플러그인 사용

첫번째는 티스토리에서 공식적으로 제공하는 플러그인을 활성화 하는 방법입니다. 

블로그 관리 > 플러그인 > 코드 문법 강조 플러그인을 클릭합니다.

 

이 때, 바로 [적용]하지 마시고, 원하는 테마를 꼭 지정하세요. 

전 테마가 있는 줄 모르고 플러그인만 활성화했다가 1년 넘게 기본 Light테마를 썼었습니다 ^^;

 

여기까지 진행했을 때, 코드는 아래처럼 플러그인의 테마를 반영하게 됩니다. 

방법2: highlightjs 코드 삽입

2-1. highlightjs파일 다운로드

티스토리 블로그에서도 소개하는 코드 하이라이트용 highlightjs 자바스크립트 홈페이지로 이동합니다.

https://highlightjs.org/ 

 

 

원하는 언어를 다중 선택 후 [Download]를 클릭하여 다운 받습니다.

(저는 python, yaml, shell, bash, sql 를 선택했습니다.

https://highlightjs.org/download 

압축을 해제합니다.

2-2. 줄번호 다운로드

코드블럭에 줄번호도 출력되길 원한다면 추가로 highlightjs-line-numbers.js 파일을 다운받습니다.

출처: https://bumcrush.tistory.com/182   

 

 

 

2-3 파일 업로드

블로그 관리 > 스킨 편집 메뉴로 이동합니다.

[HTML 편집] 버튼을 클릭합니다.

2-4. highlight.js 파일 업로드

파일업로드 탭에서 2-1에서 다운 받은 파일들을 모두 업로드 합니다.(style 폴더 제외)

2-2에서 다운받은 highlightjs-line-numbers.js 파일도 업로드합니다.

 

 

 

2-5. css파일 업로드

style 폴더에서 원하는 스타일의 특정 css 파일을 업로드합니다.

스타일은 여기에서 골라보세요.

https://highlightjs.org/demo 

 

저는 stackoverflow-dark.min.css 를 골랐습니다.

 

2-6. HTML 편집

HTML탭에서 </head>태그 안쪽에 highlightjs 스크립와 코드블럭 줄번호 스크립트를 입력합니다. 

<!-- 코드블럭 하이라이트 -->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/stackoverflow-dark.min.css">
<script>hljs.initHighlightingOnLoad();</script>
  
<!-- 코드블럭 줄번호 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
  hljs.lineNumbersBlock(block);
  });
  });
</script>

 

 

입력 전

입력 후

2-7. CSS 편집

(선택사항) CSS 편집기 최하단에서 코드를 수정하여 원하는 스타일을 덮어쓰기 할 수 있습니다.(overriding)

예를 들어, 저는 코드 폰트를 Menlo로 바꾸고, 폰트 사이즈를 0.8em으로 더 줄여보았습니다.

code {
  font-family: Menlo;
  font-size: 0.9em;
  white-space: pre;
  line-height: 0.4em;
  overflow-x: auto;
}

 

 

 

2-8. 코드 문법 강조 플러그인 비활성화하기

여기까지 진행하면 코드가 아래와 같이 보입니다.

이는 방법1의 코드 문법 강조 플러그인이 활성화되어있기 때문입니다.

블로그 관리 > 플러그인 > 코드 문법 강조 플러그인을 비활성화합니다.

플러그인을 비활성화하고 highlightjs 코드만 남으면 다음과 원하는 스타일의 테마가 적용된 것을 확인할 수 있습니다.

플러그인 활성화여부에 따라 어떻게 달라지는지 비교해보세요.