반응형
티스토리에 소스코드를 추가하면 가독성이 떨어지게 보인다
가독성을 높이는 방법을 정리해보자
첫번째. gist 추가하기
티스토리 에디터의 코드블럭 대신에 깃허브의 gist 서비스를 사용합니다
단점 : 일일이 gist 를 만들고 html 모드로 추가해야 해서 번거롭다
장점 : gist 로 만들어 놓으면 여러 곳에 재사용이 가능하다
작성한 gist 는 embed 로 복사해서 티스토리 에디터의 HTML 모드에 소스를 넣습니다
두번째. 코드블럭 테마 적용하기
highlight.js 테마를 적용합니다.
티스토리 관리 > 꾸미기 > 스킨편집 > html 편집 메뉴에서
head 태그 사이에 css 와 js , 그리고 실행 메소드를 넣습니다
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
테마를 변경하고 싶으면 https://highlightjs.org/static/demo/ 에서 적용하고 싶은 테마를 찾고
CSS 명칭을 테마명에 맞게 변경합니다.
default => solarized-dark 로 변경하면 solarized dark 테마로 적용됩니다
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/solarized-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
반응형
'IT > Internet' 카테고리의 다른 글
PC Windows OS 버전별 사용현황 (0) | 2019.10.29 |
---|---|
JAM Stack (0) | 2019.10.02 |
무료 HTML5 Video Players (0) | 2019.09.19 |
CIDR IPv4 변환 (0) | 2019.08.19 |
넷플릭스 시청중인 콘텐츠 삭제 방법 (0) | 2019.08.11 |
블로그 검색 확인하기 (0) | 2019.08.04 |
티스토리 사이트맵 만들기 (0) | 2019.08.02 |
티스토리 RSS 네이버 웹마스터도구에 등록하기 (0) | 2019.08.02 |