티스토리 코드 블록 테마가 너무 안 예뻐서 변경해봤다.
난 무조건 예쁘고 깔끔한 게 좋기 때문에,,,🌼
✅ 원하는 테마 고르기
https://highlightjs.org/static/demo/
이 링크에서 원하는 테마를 고르면 된다!
주의할 점은 대문자는 소문자로 바꿔야 하고, 공백은 - 로 바꿔야 한다.
✅ 티스토리 html 편집기 들어가기
관리 👉 스킨 편집 👉 html 편집 순으로 들어가서
<head> 태그 안에
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/rainbow.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>해당 코드는 넣어주면 된다. 나는 rainbow 테마를 사용했다!
✅ CSS 변경해주기
/* Code block style */
code {
padding: 10px;
background-color: #F1F1F1;
border-radius: 8px;
font-family: "monospace", "Consolas", "Sans Mono", "Courier";
font-size: 0.8rem;
margin: 0.5rem auto;
line-height: 130%;
}
pre > code {
margin: 1rem auto;
}폰트랑 이것저것 변경해주기 위해서 해당 코드를 CSS에 넣어준다.
마음에 들게 조금씩 조절해가면 된다.