etc/TISTORY

티스토리 코드블록 하이라이트(문법강조), 폰트바꾸기

코딩무민 2020. 10. 16. 14:01
반응형

오늘은 티스토리 블로그 코드블록에 문법강조하는 법 그리고 폰트를 바꾸는 방법에 대해 알아보겠습니다.

 

 

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) 아래 파일을 다운로드 받아주세요!

highlight.zip
0.25MB

 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