티스토리를 운영하고 있는 개발자라면??
코드를 많이 사용하게 된다.
하지만 현재 티스토리에는 코드를 깔끔하게 보여주긴 힘들다.
그래서 열심히 구글링한 끝에 하이라이트라는 것을 찾았다.
이번엔 하이라이트 highlightjs.js 를 티스토리에 적용해보기로 했다.
예시)
<!-- 테스트 -->
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
와우.. 여기까지 하는 굉장히 시간이 30분이나 걸렸다.
별것도 아닌데.. 요게... 약간 문제가 있는것 같다.
지금 이것을 보고 있는 분들은 나만 잘 따라하면 5분만에 작업은 완성된다.
별것도 아닌데.. 왜 30분이 걸렷냐하면... 참.. 어이가 없다..ㅋㅋ;;
자 그럼 티스토리에 highlightjs.js을 적용해보도록 하겠다.
step.1) https://highlightjs.org/
설치방법은 아주 간단하다!
step.1에 있는 곳을 한번 클릭해봐도 좋다..
궁금한 사람들만...ㅎㅎ
굳이 들어가지 않아도 이 글만 보면 쉽게 highlightjs.js을 적용할수있을것이다.
step 1은 단지 highlightjs.js를 소개하는 부분이다.
그런데.. 딱 이 소스만 복사해서 메모장에 옮겨두어라
<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>step.2) 이제 간단하게 티스토리에 적용하자
일단 티스토리 관리에 들어가서
요 부분을 클릭해서
<head> 와 </head> 사이에 복사했던 태그를
넣어준다.
그러면 끝이다..
step.3) 사용방법은..
티스토리 글쓰기 클릭한다음 html로 클릭해서
<pre><code>요 사이에 넣어주어야한다.</code></pre>
굉장히 번거롭다..
그래서 열심히 구글링을 했다..
더 편한 방법이 없을까..
간단하게 기존에 있는 코드를 복사해서
html클릭 안한 상태에서
붙여넣기 해준다..
아마 붙여넣기해준다음 pre 랑 code를 작성해주는데..
이 역시도 번거롭고..
간단한 방법은 기존에 html 체크 이전에
코드를 일단 작성한다
그 다음 html 체크하고
pre 랑 code를 입력해준다.
간단한 방법이지만 굉장히 번거롭다..
옆에 줄도 안나오고... 힝...
필자는 조만간 이거 말고 다른걸로 적용해야겟다..
너무 번거롭다..;;
사진은 생략한다..
(이것때문에 왜 안되.. 이러고 있었다..)
아마 <p>태그를 인식해서 그런것같다..
만약 아래와 같은 현상이 발생하면.. step3 를 읽고 차근차근 다시 생각하면서 작업하길 바란다.
작업 완료시▼
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>아래와 같은 요런문제 발생시 STEP.3 를
다시 한번 천천히 읽어봐라 필자도.. 이것때문에 30분 걸렸다.
'공부한 내용 > 이것저것' 카테고리의 다른 글
| [10월 이벤트] 티스토리블로그 초대장이벤트! (15) | 2017.10.28 |
|---|---|
| 우분투 리눅스용 그림판 kolourpaint 설치방법 (0) | 2017.09.29 |
