728x90
반응형
■ 티스토리 코드블럭(Code Block) 테마 변경 highlight.js
■ 코드블럭(Code Block)
코딩 관련 자료 업로드 시 코드블럭을 사용하면 하이라이트 기능이 적용되어 코드를 보기 쉽게 구현할 수 있음
■ 코드블럭(Code Block) 테마
highlight.js
Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.
highlightjs.org
- 라이브러리 추가
티스토리 설정 > 꾸미기 > 스킨 편집 > html 편집 > <head></head>영역에 삽입
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
- 원하는 테마 선택
코드블럭 테마 확인하기 < 클릭하면 코드블럭 테마를 상세하게 확인할 수 있음
default.min.css 가 아닌 원하는 테마의 css파일명으로 수정
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
- 하이라이트 js 호출
아래 코드를 추가하여 하이라이트 js 파일 호출
<script>hljs.initHighlightingOnLoad();</script>
- 폰트/블럭 관련 CSS 수정
/* Code block style */
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.75rem;
}
pre > code {
margin: 1rem auto;
}728x90
반응형
'Tips' 카테고리의 다른 글
| [Tips] 쿠키(COOKIE)와 세션(SESSION)의 차이 (0) | 2021.05.24 |
|---|---|
| [카카오톡] 카카오톡 오픈그래프 캐시 삭제 방법 (0) | 2021.03.31 |
| 퍼센트 (%) 계산법 / 퍼센트 계산법 공식 / 비율 계산법 (0) | 2021.03.10 |
| [Editor Tip] 티스토리 구글 검색 등록 (0) | 2020.06.04 |
| [Editor Tip] 에디트플러스(Editplus) 단축키 모음 (0) | 2020.05.13 |