ㅇㅅㅇ

티스토리 코드블럭에 하이라이트 적용해보기 본문

프로그래밍/기타

티스토리 코드블럭에 하이라이트 적용해보기

소 아 2019. 4. 15. 16:15

티스토리가 바뀌면서 코드블럭이라는 에디터 기능이 생겼습니다(오오)!

그런데 기대하며 사용해봤는데 어딘가 불편....

해서 구글검색의 힘으로 highlight.js를 적용해 사용하기로 했습니다.

(지극히 개인적인 수순으로 포스팅을 기재합니다ㅎ)

 

1. 스타일 선택

데모페이지에서 89가지의 스타일 중 원하는 스타일의 이름을 기억합니다.

저는 atom-one-dark를 선택했습니다.

 

2. 설치

여기로 접속해 직접 다운로드하거나 cdnjs, jsdelivr 라고 되어 있는 텍스트를 복사합니다.

아래와 같지만 버전이 업데이트 될 수 있으니 들어가서 확인해 보세요. 저는 cdnjs을 이용했습니다.

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

 

3. 적용

[블로그 관리]-[스킨 편집]-[html 편집]으로 들어가 

 

<link> 태그 부분은 <head></head>사이에 style.css와 font.css아래 넣습니다.

(이때, 선택한 테마명으로 css이름을 수정합니다.)

<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./images/font.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<!-- 저는 atom-one-dark사용하기로 했으니 default.min.css 를 atom-one-dark.min.css로 수정합니다. -->

 

<script> 부분은 아내로 쭉쭉 내려 </body>바로 위에 둡니다.

(꼭 이렇게 하지 않더라도 <body></body>사이에 삽입하면 됩니다.)

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>

 

4. 확인

잘 작동하는지 확인해 봤습니다.

코드를 입력 후 작성완료하고 확인합니다. (작성중에는 별 차이를 모르겠음...)

<div>
	<h1>hi</h1>
</div>

쓰고 글 발행해 확인해보면 끝~

 

* 제가 사용한 방법인 cdn을 통해 가져온 highlight.js는 기본 22개의 언어를 제공하고 다운로드 페이지에서 직접 필요한 언어를 골라 총 185개의 언어를 사용할 수 있다고 하네요. 해서 에디터의 마크다운이나 HTML 편집모드에서 클래스명만 맞춰준다면 10개 언어만 지원하는 티스토리에서 제공하지 않는 언어도 얼마든지 하이라이트할 수 있다고....

 

..이젠 정말 공부좀 해야지..

 

저작자표시

'프로그래밍 > 기타' 카테고리의 다른 글

구글 애널리틱스(gtag), 동일 사이트에 추적코드 두 개 이상 적용하기  (0) 2022.06.20
네이버, 구글 검색엔진 최적화(SEO) 가이드 사이트  (0) 2020.09.09
카페24쇼핑몰 디자인 수정 시 참고 사이트  (1) 2020.07.27
웹표준과 웹접근성  (0) 2019.11.20
'프로그래밍/기타' Related Articles more
Comments