본문 바로가기

카테고리 없음

티스토리 코드 예쁘게(highlight.js)

티스토리 블로그 생성

개발자라 코드 올릴 거임

 

밋밋한 초기 화면

화이트가 깔끔하긴 한데 많이 밋밋하다.

근데 기본 제공되는 템플릿이 내가 화면짜는 것보다 더 잘 빠졌다. 짜증 ...

 

 

역시 밋밋한 코드

테스트용 포스트 하나를 작성해봤다.

코드는 코드블록을 사용해서 작성해야 함.

코드블록이 이클립스 초기 화면 보는 것 같아서 기겁함.

하지만 더 중요한 건 코드를 잘 짜는건데 ;; 절레절레

 

 

 

주의 백만개

플러그인 검색중

내가 처음 본 몇 개의 블로그에는 이걸 사용중으로 설정해줘야 한다는데, 내 경우에는 플러그인에 기본으로 코드문법강조가 설정되어 있었음.

해제되어 있어야 함. 흐즈드으 으쓰으 흠...!

 


 

highlightjs.org. 클릭하면 연결됨

 

우상단에 보면 저런게 있는데, 밑줄 그어진거 클릭해보면 데모사이트로 연결됨

 

 

인텔리제이에 셋팅한 것과 같은 마음이 편안해지는 Atom One Dark

본인이 원하는 테마를 기억해두자. 나는 Atom One Dark

 

 

Get version 버튼 클릭

 

 

CDN 으로 땡겨쓰면 된다.

이제 가서 써보자

 

블로그 설정 홈

왼쪽 메뉴바에서 스킨 편집 클릭

 

 

스킨편집 메인

우상단에 HTML 편집 클릭

 

 

복붙할 거

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

 

 

html 소스

HTML 소스에 갖다 붙일건데,

<head> 태그 안에 넣어야 함

 

 

highligh.js demo

 

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

아까 봐둔 Atom One Dark 를, atom-one-dark 로 바꿔서 default 부분에 바꿔줌.

아, <script>hljs.initHighlightingOnLoad();</script> 이 부분은 다음 포스팅에서 다룰 예정

 

 

무튼 그러면,

적용된 모습

이렇게 코드가 적용된 것을 확인할 수 있음.

혹시, 글을 어떻게 확인하는지 모르겠다면

 

 

좌상단에 드랍박스로 확인 가능

이렇게 하면 끝임.

 

플러그인 끄세요 꼭 ... 이거 몰라서 몇 시간 헤맸습니다. 궁서체입니다.

 

 


아래는 삽질이니 안 보셔도 됩니다.

CDN 이 안 되어서 css 랑 js 파일을 업로드해서 설정한건데, 물론 저것도 됩니다만,

플러그인을 사용해제 하셔야 합니다.

더보기

근데 안 됨 ㅋ

 

 

highlighjs 다운로드 페이지

다운로드 페이지에서, 아래쪽의 Download 버튼 클릭

 

 

다운로드 받은 highligh.zip 파일

압축 파일 내에 highligh.js 파일이 있음

압축 풀고, 저걸 업로드 해줄거임

 

 

 

 

 

업로드 된 상태

'+ 추가' 버튼 클릭하고 파일 선택해서 확인 클릭하면 저렇게 올라감