본문 바로가기

비개발관련

티스토리 코드블럭 검은배경/ highlight / 글쓰기 하이라이트

728x90

https://kutar37.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%83%88-%EC%97%90%EB%94%94%ED%84%B0-%EC%BD%94%EB%93%9C%EB%B8%94%EB%9F%AD%EC%97%90-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

 

티스토리 새 에디터 코드블럭에 하이라이트 적용하기

티스토리가 업데이트되면서 코드블럭 기능이 생겼습니다. 하지만 기대를 안고 코드블럭으로 글을 발행해보면 정말 블럭만 등장합니다. 에디터에서는 하이라이트가 되는데, 막상 미리보기/발행

kutar37.tistory.com

 

 

 

//코드 블럭에 스타일을 추가합니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

 

 

티스토리 관리자페이지에서 좌측 메뉴 > 꾸미기 > 스킨편집

 

 

 

 

 우측 상단 스킨편집 아래 html편집 버튼 클릭

 

 

 

 

 

상단에 복사한 코드 추가

(default.min.css -> an-old-hope.min.css 로 선택한 스타일 변경) 

줄 간격이 넓을 경우 기본(nomal)로 적용

//하이라이트 줄간격을 보통으로 설정합니다.
<style type="text/css">
.hljs {
    line-height: normal;
}
</style>

 

 

 

 

하단에 highlight.min.js 스크립트 추가

 

 

 

 

 

적용을 누르고 새로고침을 해서 발행된 글( 작성된 글) 의 코드블럭의 스타일이 변경되었는지 확인한다.