[HTML] Tistory 글쓰기 화면 Code Highlight 적용

글쓰기를 하다보면 적용되어 있는 스킨 (플러그인) 과 글쓰기 화면 상에서의 Code Highlight가 달라 불편할 때가 있다.

아래 내용은 글쓰기 화면과 일반 글 조회 화면에서 최대한 동일하게 세팅하도록 하는 작업이다.

Code Highlight Plugin 기본 설정

블로그 관리 > 플러그인 카테고리를 들어가보면 해당 플러그인을 볼 수 있다.

해당 플러그인에서 [기본] 을 선택하고 적용을 하면 조금 부족한 디자인이 적용된 것을 볼 수 있다.

CSS 추가

블로그 관리 > 스킨 편집 으로 들어가 HTML 편집을 선택한 후, header 밑에 아래의 소스를 붙여넣는다.

<link rel="stylesheet" 
 data-mce-href="https://t1.daumcdn.net/tistory_admin/lib/highlight.js/styles/atom-one-light.min.css" 
 href="https://t1.daumcdn.net/tistory_admin/lib/highlight.js/styles/atom-one-light.min.css">

적용 후 확인하면 비슷한 디자인으로 출력된 것을 확인할 수 있다.