티스토리 소스코드 올리기 (Highlight.js)

티스토리 뷰

블로그관리

티스토리 소스코드 올리기 (Highlight.js)

GodJaejun 2019. 3. 12. 20:55

※티스토리 소스코드 올리기 (Highlight.js)

안녕하세요. 초보개발자 갓준입니다. 오늘은 티스토리에 소스코드를 예쁘게 올리는 방법 중 하나인 Highlight.js를 알려드리고자 합니다.

○ Highlight.js 란

Highlight.js란 자바스크립트로 개발한 코드 구문 강조를 위한 라이브러리입니다. 현재 185개의 언어와 89개의 스타일을 지원하고 있는 유용한 라이브러리입니다.

1. Highlight.js 공식 홈페이지에 접속하기( https://highlightjs.org/ )

접속을 한 후 다른 것 보다 Get version 9.15.6 을 클릭해줍니다.

그럼 이렇게 뜰 것인데요. 여기서 cdnjs 또는 jsdelivr 중 아무거나 안에 있는 코드를 모두 복사해 줍니다.

편의성을 위해 여기서 적어주겠습니다.

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/styles/vs2015.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/highlight.min.js"></script>

2. 티스토리 스킨 편집창에 들어가기

티스토리 관리창에와서 스킨 편집을 클릭해줍니다.

스킨 편집에 들어가면 이렇게 뜹니다.

여기서 html 편집을 선택해줍니다. 그러면 html 코드들이 나오게 되는데 여기서 중요한것!

※ <head></head> 안에 복사한 내용을 붙여넣기 합니다.

복사한 script와 더불어 밑에 코드도 추가해줍시다.

<script>hljs.initHighlightingOnLoad();</script>

자 이렇게 하면 80%정도는 된것입니다. 붙여넣기를 하셨으면 적용클릭후 나와줍니다.

3. 코드올리기 및 스타일 변경

먼저 글 작성 또는 글 수정을 누르고

여기 동그라미 친 부분의 html을 체크해줍니다. 그렇게 하고 나서

<pre><code class="Java">...</code></pre>

이 코드를 붙여넣어줍니다. 여기서 중요한 것은 code class ='Java'로 되어있는 것을 다른 언어로 변경하면 변경됩니다.

예) Java => C 로 바꿔줍니다.

그리고 자신이 붙여넣을 코드를 ... 사이에 붙여넣기 해줍니다.

스타일 변경은 어렵지 않습니다. 먼저 아까처럼 스킨 편집에 들어가신 후

아까 highlight.js 공식 홈페이지에 들어간 후 스크립트를 복사하신 분들은 이렇게 되어있을 것입니다.

여기서 맨뒤에 default.min.css라고 되어있죠?

이 default를 자신이 원하는 스타일의 css로 변경해주면됩니다. 스킨편집의 html에서 바꿔주셔야 합니다.

저같은 경우는 vscode를 좋아해서 vs2015.min.css로 변경해주었습니다.

스타일은 여기들어가셔서 참고하시면 됩니다. https://highlightjs.org/static/demo/

이상으로 Highlight.js 사용법 포스팅을 마치겠습니다. 이상 초보개발자 갓준이었습니다. 감사합니다.

'블로그관리' 카테고리의 다른 글

구글 서치콘솔 색인이 생성되었으나 robots.txt에 의해 차단됨 해결방법 (0)	2019.03.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

티스토리 뷰

티스토리 소스코드 올리기 (Highlight.js)

'블로그관리' 카테고리의 다른 글

티스토리툴바