[코드 블럭] 티스토리 코드 블록 하이라이트 적용

안녕하세요 김작심입니다~!

 

오늘은 티스토리의 밋밋한 코드 블럭에 하이라이트 테마를 

 

넣어 줌으로써 가독성을 높여 보도록 하겠습니다~!

 

---

우선 코드 블럭에 하이라이트를 넣어주는 방법은 두 가지가 있는데요. 

 

첫 번째로 티스토리에서 플러그인으로 제공하는 Syntax Highlight를 이용하는 방법

 

두 번째로 highlight.js를 사용하는 방법입니다.

 

---

우선 플러그인으로 제공하는 Syntax Highlight를 적용하는 방법은 매우 간단한데요

 

티스토리 관리 -> 플러그인으로 들어가면 아래 사진과 같이 Syntax Highlight이 보입니다.

 

해당 플러그인을 설정해주면 됩니다.

 

 

클릭해보면 여러 가지 테마를 제공하고 있는데, 설정해보고 본인 입맛에 맞는 것으로 설정해주면 됩니다.

 

 

Syntax Highlight 적용 전 JAVA 코드

 

Syntax Highlight 적용 후 JAVA 코드

해당 플러그인만 적용해줘도 코드 블럭이 아주 이뻐진다!!

 

---

두 번째로 highlight.js 사용하는 방법

 

이 방법은 플러그인을 이용하는 방법보다는 살짝 어려울 수도 있습니다.

 

https://highlightjs.org/

highlight.js

 

우선 위 사이트로 들어가면 get version이 보이실 겁니다. 

 

이 포스팅을 쓰는 기준으로 11.2.0 이네요.

 

해당 버튼을 누르면 아래와 같은 항목들이 보입니다.

 

 

그중에서 cdnjs라고 적혀있는 곳 밑에 있는 소스를 복사해줍니다.

 

티스토리 관리 -> 꾸미기 -> 스킨 편집으로 들어가 오른쪽 상단에 html 편집을 눌러줍니다.

 

그러면 HTML 코드들이 보일 텐데 상단에 보시면 </head>라고 적혀있는 부분이 보일 텐데요.

 

그 바로 위에 해당 코드를 붙여 넣어 줍니다.

 

그리고 붙여넣기한 코드 바로 밑에 추가로 <script>hljs.initHighlightingOnLoad();</script>도 넣어주셔야 합니다.

 

<!-- 코드 하이라이트 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

 

이렇게 하면 코드 하이라이트는 적용되었습니다. 

 

아마 여러분들이 위 사이트에서 복사한 코드를 보시면

<link 라고 되어있는 부분을 쭉 따라 읽다 보면 default.min.css라고 되어 있을 텐데요.

 

저것은 코드 하이라이트의 테마가 style이 default라는 의미입니다.

 

만약 다른 테마로 변경하고 싶다면 https://highlightjs.org/static/demo/ 로 들어가

왼쪽에 있는 Themes 아래 테마들 중에 마음에 드는 테마를 골라 변경해주면 됩니다.

 

highlight.js demo

 

예를 들어 변경하고 싶은 테마의 이름이 Atom One Dark 라면 공백 대신 - 을 적용하고 대문자는 모두 소문자로

입력한 뒤에 입력해주시면 됩니다.

 

ex) atom-one-dark.min.css

 

	<!-- 코드 하이라이트 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-dark.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

html 편집기의 모습

그럼 아래와 같이 이쁜 테마가 적용되어 있는 모습을 볼 수 있습니다.

 

 

이상으로 밋밋한 코드 블록에 하이라이트를 적용해 보았습니다~!

 

다음에는 코드 블록에 라인 넘버를 적용하는 방법을 포스팅하도록 하겠습니다~!