[Tistory]코드블럭 사용2 : 코드 하이라이트 적용하기
기본적인 코드블럭 사용 및 플러그인 적용방법이 궁금하다면 아래링크를 참고하자
Link : https://haenny.tistory.com/38
[Tistory] 코드블럭 사용 : Syntax Highlight(코드 문법 강조) 플러그인
[Tistory] 코드블럭 사용 : Syntax Highlight(코드 문법 강조) 플러그인 소스코드를 작성할 때 티스토리 코드블럭을 사용하면 포스팅 전과 후가 달라 colorscript 혹은 번거롭게 작성해왔다면, 이 글을 보라!!! 1...
haenny.tistory.com
티스토리에서 지원하는 코드블럭에 플러그인을 적용한다 하더라도, 기본적으로 지원되는 언어도 몇 없고 라인 넘버 표시도 안된다.
우리가 코드를 적용해보자!
1. Highlight.js 다운로드
- Highlight.js에 들어가서 코드 하이라이트가 필요한 언어만 체크하여 다운로드 한다.
2. 코드 하이라이트 적용하기
- 다운받은 압축파일을 풀면 highlight.pack.js 파일과 styles 파일 폴더를 확인할 수 있을 것이다.
- 블로그 설정 → 스킨 편집 → html 편집 → 파일 업로드 에서 다운로드 받은 압축파일을 풀어 highlight.pack.js 파일과 styles 폴더 내의 원하는 style을 선택하여 업로드한다.
style 예시는 데모 사이트에서 확인하면 된다.
- 그 다음 HTML 편집에 들어가서 <head> 태그 내에 'atelier-heath-dark.css' 대신 본인이 선택한 style로 수정하여 다음 코드를 넣어주면 된다.
<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/atelier-heath-dark.css">
<script>hljs.initHighlightingOnLoad();</script>
'기타' 카테고리의 다른 글
| [광고삽입] Google AdSense '일치하는 콘텐츠' 사용 가능한지 확인하기 (0) | 2020.01.22 |
|---|---|
| [Power Point] 파워포인트 배경 어둡게 설정하기 (0) | 2020.01.09 |
| [Chrome] 크롬 메모리 부족, 전력 사용량(작업관리자) 매우높음 해결 방법! (3) | 2019.10.21 |
| [Tistory] 코드블럭 사용 : Syntax Highlight(코드 문법 강조) 플러그인 (0) | 2019.10.11 |
| [Android] Activity 와 Fragment의 차이가 도대체 뭐길래 (0) | 2019.07.18 |
댓글