[티스토리 스킨] 코드블록 스타일을 맥(mac)으로 바꾸기

2025. 1. 8. 10:31·Etc
728x90

기존의 코드 블록이 마음에 들지 않았던 나..

 

못생긴 건 참을 수 없어서 맥(mac) 스타일로 바꾸기로 결심하다.

 


 

꾸미기 > 스킨 편집

 

 

 

html 편집 버튼

 

여기서 핵심은  CSS → 파일 업로드 → HTML 메뉴 순서로 편집하는 것이다.

 


 

ctrl + f 단축키를 눌러서 .hljs 텍스트를 찾는다.

 

 

 

기존 스타일을 지우고 아래 CSS 코드를 삽입한다.

codeblock.css
0.00MB

 

 

 

파일 업로드 탭에서 .js 파일을 업로드 한다.

codeblock.js
0.00MB

 

 

 

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
'Etc' 카테고리의 다른 글
  • [GitHub] Organizations 팀 프로젝트를 내 Repositories로 가져오기
  • 깃허브(gitHub) 백준, 프로그래머스 연동하기 (자동 커밋)
  • [IntelliJ] Typo: in word ' ' 밑줄 제거
gxxg
gxxg
함께 일하고 싶은 개발자를 꿈꾸는 예비개발자의 공부 기록
  • gxxg
    공공
    gxxg
  • 전체
    오늘
    어제
    • 분류 전체보기 (138)
      • ☁️ 구름 x 카카오 Deep Dive 풀스택 (7)
        • html, css (1)
        • Java (3)
        • 스프링 MVC (0)
      • 💻 코딩테스트 (89)
        • 백준 (2)
        • programmers (87)
      • SQLD (1)
      • Language (3)
        • Java (2)
        • JavaScript (1)
      • Style Sheet (0)
        • CSS (0)
        • SCSS & SASS (0)
      • DBMS (2)
        • Oracle (2)
        • MySQL (0)
        • postgresql (0)
        • 데이터베이스 기초 이론 (0)
      • React (0)
      • SpringBoot (0)
      • JSP (2)
      • 알고리즘 (0)
      • 2023-02 몰입형 SW 정규 교육 (24)
        • 9월 프로젝트 (8)
      • 벽돌깨기 (4)
      • Etc (4)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    spring
    junit 테스트
    코딩테스트
    오블완
    구현체
    Lv2
    이클립스
    프로그래머스
    eclipse
    자바
    자바스크립트
    2단계
    3단계
    LV3
    springboot
    javascript
    DFS
    프로젝트 구조
    0단계
    programmers
    톰캣
    POST
    CSS
    HTML
    회원 관리 시스템
    java
    JSP
    Lv0
    코테
    티스토리챌린지
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
gxxg
[티스토리 스킨] 코드블록 스타일을 맥(mac)으로 바꾸기
상단으로

티스토리툴바