-
소스 하이라이터 (syntaxhighlighter, highlight.js)컴퓨터/HTML & JS & TS 2018. 2. 19. 02:14728x90반응형
syntaxhighlighter를 사용해 왔지만 스킨을 바꾸면서 더 괜찮아 보이는 라이브러리를 찾았다.
prism.js도 괜찮아 보인다.highlight.js 사이트
└syntaxhighlighter, primsjs 와 같이 컴퓨터 언어 하이라이터
└제작자: isagalaev
└효과 체험 하기: https://michalsnik.github.io/aos/
└176개의 언어 지원과 79가지의 스타일 + 자동 언어 탐지
└기본 작동: <pre>와 <code>안 프로그래밍 언어를 하이라이팅
사이트에 들어가 일단 체험하세요.
▷ 설치 방법
1. 간단히 <head> 와 </head> 사이에 아래를 추가하면 끝이다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>▷ 사용법
syntaxhighlighter 과 비슷하다.
<pre><code class="c"> // C Coded </code></pre>예제)
public static void main(String[] args) { TISTORY ty = new TS(); ty.run(); }클래스 이름은 다음 사이트를 참고한다.
(Language names and aliases에서 우측에 있는 것)
http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
스타일은 데모 사이트에서 참고하고 이름은 아래 사이트를 참고
(ex: brown-paper.min.css)
https://github.com/isagalaev/highlight.js/tree/master/src/styles
※ 참고
코드 안에 '<' 나 '>' (bracket) 가 들어가면
<은 < 로 쓰고 >는 > 로 써야 소스를 실행(?)하지 않고 글에 써진다.
728x90'컴퓨터 > HTML & JS & TS' 카테고리의 다른 글
티스토리 기본 반응형 스킨 #1 간단 수정 (1) 2018.02.20 자바스크립트로 간단한 신경망(Neural Network) 만들기 Synaptic.js (0) 2017.08.26 CSS 3D glitch 글씨 효과 (shadow) (0) 2017.06.28
