728x90
티스토리에 '코드 블럭' 이라는 기능이 참 좋다고 생각하는데,
기본 테마는 가독성이 떨어진다는 단점이 있다.
그래서 찾아본 방법!
1. 간단하게 바꾸고 싶다 - 플러그인 적용
티스토리 관리자 > 플러그인 > 코드 문법 강조
테마 선택 후 '적용' 클릭
2. 그래도 마음에 안 든다 - 스킨 편집
1) 티스토리 관리자 > 스킨 편집 > HTML 편집 > 코드 삽입
2) 하이라이트 사이트에서 원하는 테마 선택 highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
'테마이름' 부분에다가 원하는 테마를 넣는다. 대문자=>소문자로, 띄어쓰기는 '-'로 대체한다.
ex) Atom One Dark → atom-one-dark
<head> </head> 태그 사이에
<!--코드블럭-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
<!-- 코드블럭 글씨 크기 -->
<style>
pre > code {font-size: 13.5px;}
</style>
나는 atom-one-dark 를 선택 !
3. 폰트 변경, 폰트 크기 변경
블로그 관리 > 스킨 편집 > html 편집 > CSS > . code 검색(ctrl F)
font-family: monospace 자리에 원하는 폰트를 넣는다.
font-size는 사이즈 변경
폰트까지 바꾸니까 훨씬 봐줄만하다.
생각보다 간단한 코드블럭 꾸미기 끝
+) 회색 배경 지우기
블로그 관리 > 스킨 편집 > html 편집 > CSS > article-view pre 검색(ctrl F)
다음과 같이 바꿔주기!
.article-view pre {
padding: 10px;
background: rgba(0, 0, 0, 0);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}728x90
'ETC > 티스토리' 카테고리의 다른 글
| [티스토리 광고 수익] 애드핏 연동, 수익 발생, 블로그 광고 설정 방법 (0) | 2021.07.06 |
|---|