[Tistory] 윈도우 스타일 코드 블럭 테마 적용

안자매 2022. 3. 17.

제가 너무 하고싶었던 스타일의 코드블럭 테마인데,
정보가 많이 없어서 찾는데만 정말 몇 일이 걸렸어요.
잘 정리해서 올려주신 분이 계셔서 정보 공유 드려요 !

스타일 적용 후 코드블럭 테마 미리보기

<!--

스타일 적용 후 완성된 코드블럭 테마 미리보기
- 사용 테마 : atom-one-light
- 글씨체 : D2Coding

-->

플러그인 설정하기

• 설정의 플러그인 탭 ([티스토리도메인]/manage/plugins) 의 코드 문법 강조를 활성화해주세요.
→ highlight에서 직접 받아오는 경우에는 충돌나서 적용이 안될 수 있으니 해당 기능을 해제해주세요.
※ 라이트모드로 설정하실 분은 라이트모드 테마, 다크모드로 설정하실 분은 다크모드 테마로 선택해주세요.

CSS 편집하기

css 편집은
• 설정 > 스킨편집 > html 편집 경로
• [티스토리도메인]/manage/design/skin/edit
를 통해 접근할 수 있습니다.

▼ 추가할 css 코드 (적용 위치는 상관 없으나, 저는 추후 유지보수 시 편리함을 위해 마지막줄에 추가 했습니다.)

/* 라이트모드 */
.hljs {
    margin: 10px 0;
    font-size: .9em;
    border: 1px solid #e9e9e9;
    border-top: 26px solid #e9e9e9;
    border-radius: 5px 5px 0 0 !important;
    padding: 10px 10px 13px !important;
}

/* 다크모드 */
.hljs {
    margin: 10px 0;
    font-size: .9em;
    border-top: 26px solid #3d454e;
    border-radius: 5px 5px 0 0 !important;
    padding: 10px 10px 13px !important;
}

/* 공통 */
code:before {
    content: url(images/logo_code.png); 
    margin-top: -30px;
    position: absolute;	
}

code:after {
    color: #5b6373;
    font-size: .95em;
    float: right;
}

위에서 사용한 images/logo_code.png 파일은 CSS탭 오른쪽 파일업로드 탭으로 이동하여 아래 "+추가" 를 통해 추가한 후 적용해주세요.