오늘은 티스토리 블로그 코드블록에 문법강조하는 법 그리고 폰트를 바꾸는 방법에 대해 알아보겠습니다.
1. 코드블록 하이라이트하는 법
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 38 commonly used languages is hosted by following CDNs: jsdelivr You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlight.js styles
highlightjs.org
1) 위 링크에 들어가서 원하는 스타일을 선택합니다. - 저는 atelier-lakeside-dark.css 를 선택했습니다.
2) 아래 파일을 다운로드 받아주세요!
3) 압축을 풀어주시면 styles와 highlight.pack.js파일이 나옵니다. styles에서 원하시는 style을 찾고 준비해주세요!
4) 이제 "티스토리 블로그 관리 > 꾸미기 > 스킨편집 > html 편집" 에 들어가주세요!
5) 아래 그림 중 "파일 업로드"에 들어가서 원하시는 style 파일(atelier-lakeside-dark.css) 과 highlight.pack.js를 업로드 해주시면 됩니다.
6) 이제 HTML 로 들어가셔서 <head> 와 </head> 사이에 다음과 같이 코드를 넣어주시면 됩니다.
<!== 코드 하이라이트-->
<script src="./images/highlight.pack.js"></script>
<link rel = 'stylesheet' href ="./images/atelier-lakeside-dark.css">
<script>hljs.initHighlightingOnLoad();</script>7) 이제 CSS 로 들어가서 아래와 같이 스타일을 수정하실 수 있습니다.
.article-view pre {
padding ; 5px //패딩
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre; // 가로 스크롤
max-height: 520px; // 세로 최대 높이 설정 (세로 스크롤)
}2. 폰트 변경하는 법
CSS 에 들어가서 아래 코드를 넣어주시면 됩니다.
(단, 이미 컴퓨터에 있는 폰트여야 가능합니다!)
/*font*/
.hljs{
font-family : 'Consolas', "Nanum Gothic"
}
'etc > TISTORY' 카테고리의 다른 글
| 티스토리 코드블록에 R 언어 적용 (1) | 2020.12.02 |
|---|