highlight.js
Usage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module Highlight.js can be used with Node on the
highlightjs.org
■ highlightjs.js 사이트에서 코드블럭 테마를 다운받기
압축 해제
원하는 형식을 선택하여 적용된 모습을 확인 할 수 있다.
■ 티스토리에서 코드 문법 강조 해제
■ 스킨 편집
■ HTML 수정
</head> 윗 줄에 아래의 HTML에서 '테마네임.css'을 원하는 스타일의 파일명으로 변경 후 추가 및 적용
|
1
2
3
4
5
|
<!--코드블럭 monokai-sublime 시작-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/테마네임.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--코드블럭 monokai-sublime 끝-->
|
cs |
■ 폰트 및 폰트사이즈 변경
CSS에서 아래의 CSS 코드를 제일 아래에 추가
pre code {
font-family: "consolas", monospace;
line-height: 1.3;
}
pre code.hljs {
padding: 10px; margin: 15px 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}
.hljs {
white-space: pre;
overflow-x: auto;
}
