티스토리 작성 글 내, 코드 블럭 스타일을 변경하려고 한다.
<기본 스타일>
<바뀐 스타일>
- 코드 하이라이팅 컬러 변경
- 왼쪽에 코드 넘버 추가
- 코드블럭 radius
*****
'코드 넘버 추가' 가 필요 없다면
블로그 관리 > 플러그인 > 코드 문법 강조 에서 원하는 테마를 선택하는 것도 좋다.
스킨 적용하기
1. highlight.js 를 다운받고, 압축을 해제한다.
2. styles 폴더에서 원하는 css 파일을 고른다.
- 테마 미리보기: https://highlightjs.org/demo
3. highlight.min.js 파일과 css 파일을 업로드 한다
- 블로그 관리 > 스킨편집 > html 편집 > 파일 업로드
3. html 파일 편집
- HTML 탭에서 <head></head> 사이에 코드를 추가한다.
- <link href="./images/atom-one-dark.css" rel="stylesheet"> 본인이 선택한 css 파일 선택 !
- 우측 상단 적용버튼을 꼭 누른다.
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.highlightAll();</script>
<script>hljs.initLineNumbersOnLoad();</script>
여기 까지 적용했다면, 테마가 적용된 것을 확인할 수 있다. (새 창을 열어 확인하는 것을 추천)
혹시 적용되지 않았다면, 4번으로 ...
3. CSS 파일 편집 (선택)
- 원하는 스타일 적용
.hljs {
border-radius: 12px;
padding: 0;
}
.hljs tr {
padding: 0px !important;
background-color: inherit !important;
}
.hljs td {
padding: 0px !important;
background-color: inherit !important;
}
.hljs table .hljs-ln-code {
padding-left: 12px;
}
.hljs table .hljs-ln-n {
min-width: max-content;
padding-right: 12px;
opacity: 0.5;
}
4. 테마 적용이 안됐다면
4-1. 블로그 관리 > 플러그인 > 코드 문법 강조 - 해제
4-2. CSS 파일 편집
- article-view table 을
- article-view > table 로 변경해본다.
'티스토리 스킨 만들기' 카테고리의 다른 글
| 1. 기본 스킨 변경해보기 (0) | 2025.03.18 |
|---|---|
| 스킨 정보 파일 (index.xml) (0) | 2025.03.18 |
| 파일 구조 (0) | 2025.03.18 |