웹사이트나 티스토리같은 블로그에서 코드를 강조해주는 라이브러리가 있어서 소개해 드립니다.
저는 지금 티스토리에서 Syntaxhighlighter를 쓰고 있는데 highlight.js 라이브러리가 더 다양한 스킨도 있고해서 좋은 것 같네요^^
https://highlightjs.org/ => 사이트 바로가기
소스를 다운로드 받아서 사용해도 되지만, 아래처럼 웹링크를 제공해주고 있어서 <head>에 삽입만 해주면 바로 사용할 수가 있습니다.
아래 둘 중에 아무거나 붙여넣으시면 됩니다.
cdnjs
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
jsdelivr
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/default.min.css"> <script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
또한, css 파일의 링크만 바꾸면 테마를 마음대로 바꿔서 사용할 수 있는데요.
이 테마가 highlight.js의 가장 큰 장점 중의 하나랍니다.
정말 많은 테마를 지원하고 있네요~
https://highlightjs.org/static/demo/ => 테마보러 가기
서브라임 테마를 사용하려면 아래처럼 css 파일 링크만 바꿔주시면 됩니다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css"> <script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
위처럼 <head> 안에 삽입을 한 후에 강조할 코드는 아래와 같이 사용하시면 됩니다.
<pre><code class="html">...</code></pre>
https://highlightjs.org/usage/ => 사용법 바로가기
하지만, 주의할 점은 <table> => <table> 이렇게 태그를 감싸는 꺽쇠들은 반드시 치환해서 사용해야 한다는 것입니다.
아래는 잘못된 예제입니다.(X)
<pre><code class="html">
<strong>굵게</strong>
</code></pre>
아래가 제대로 된 예제입니다.(O)
<pre><code class="html"> <strong>굵게</strong> </code></pre>
이렇게 치환해서 사용해야 하는 부분이 좀 불편하긴 하네요 ㅠ
더 자세하고 더 구체적인 내용들은 API를 참조하시면 됩니다.
http://highlightjs.readthedocs.org/en/latest/api.html#configure-options => Library API 바로가기
'이것저것 > 유용한거' 카테고리의 다른 글
| 웹 ERD 사용해 보세요. (1) | 2015.09.30 |
|---|---|
| Ajax 로딩바 원하는 이미지 만들어주는 사이트 (0) | 2015.08.26 |
| [네이버캡처] 스크롤영역 캡처가 안될 때 (0) | 2015.08.07 |
| 운전면허 필기시험 기출문제(1종, 2종, 원동기) 무료 다운로드 받기 (0) | 2015.06.23 |
| [BlogChart] 블로그차트에서 내 블로그순위 확인하기 (0) | 2015.06.17 |
댓글