본문 바로가기
일반

티스토리의 코드 하이라이트 웹에서 보이기 위한 설정

by 리치굿맨 2019. 4. 23.

티스토리의 최근(2019년 4월 ) 업데이트 된 기능중에 코드 하이라이트 기능이 단연 돋보인다. (아래 그림)

 

 

티스토리 신규 편집기에서는 코드 블럭 선택하면 편집모드에서는 정상적으로코드 문법 하이라이트 되어 표현되나, 이를 웹에서도 보이게 하려면 본인 티스토리 관리자 화면의 html 편집모드에서 아래 구문을 <Head> </Head> 내부에 추가한다. 

 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

스타일 변경하려면 

https://highlightjs.org/static/demo/  에서 보이는 Styles 선택하여 마음에 드는 스타일 이름이 VS 2015 라면 상기 코드의 첫번째 줄을 아래처럼 기록하면된다. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css">

모양새가 데모 페이지 것과 다르게 보이면 아래처럼 <style> 태그 추가한다. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<style>
  pre { padding: 0px; }
</style>

 

 


첫등록 : 2019년 4월 23일 

최종수정 : 

 

본 글 단축주소 : https://igotit.tistory.com/2134

 


 

댓글0


.    
현물 |선물 인버스 |선물 USDT     현물 | 선물 USDT |봇제작툴/카피트레이딩     현물 |선물 인버스 |선물 USDT     .