728x90
기존의 코드 블록이 마음에 들지 않았던 나..
못생긴 건 참을 수 없어서 맥(mac) 스타일로 바꾸기로 결심하다.
꾸미기 > 스킨 편집
html 편집 버튼
여기서 핵심은 CSS → 파일 업로드 → HTML 메뉴 순서로 편집하는 것이다.
ctrl + f 단축키를 눌러서 .hljs 텍스트를 찾는다.
기존 스타일을 지우고 아래 CSS 코드를 삽입한다.
파일 업로드 탭에서 .js 파일을 업로드 한다.
HTML 탭 <body> 태그 최하단에 다음 코드를 추가한다.
<script defer src="./images/codeblock.js"></script>
트러블슈팅
적용하고 보니 스타일이 아래와 같이 깨져서 적용됐다.
f12를 눌러 개발자도구로 확인해보니 스타일 충돌이 났다.
스타일 충돌이 일어나는데 저 atom-one 뭐시기 파일이 어디있는지 헤매다가..
플러그인 > 코드 문법 강조
해당 플러그인의 스타일이 Atom One Light로 적용되어 있는 걸
Atom One Dark로 바꾸니 코드블록 스타일이 잘 적용되는 것을 확인할 수 있다.
짠!!
참고
[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기
글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단여느 날과 다름없이
guiyomi.tistory.com
728x90
'Etc' 카테고리의 다른 글
| [GitHub] Organizations 팀 프로젝트를 내 Repositories로 가져오기 (0) | 2024.11.16 |
|---|---|
| 깃허브(gitHub) 백준, 프로그래머스 연동하기 (자동 커밋) (0) | 2024.10.16 |
| [IntelliJ] Typo: in word ' ' 밑줄 제거 (0) | 2023.11.20 |