티스토리의 최근(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
'일반' 카테고리의 다른 글
| Berkeley Socket (0) | 2019.05.12 |
|---|---|
| Visual Studio Code. 테마 변경 방법 (0) | 2019.04.30 |
| ANACONDA. 아나콘다. 설치 (0) | 2019.04.08 |
| DISCORD. 디스코드. 설치 (0) | 2019.04.08 |
| 라즈베리파이 컴퓨터 모듈 3 (CM3) (0) | 2019.02.12 |
댓글