티스토리에 Highlihgt.js를 적용하는 방법은
이 블로그에서 보고 하시면 될 것 같습니다.
제가 소개하려고 하는 것은 line number를 추가하는 것입니다.
hightlight.js에서는 기본적으로 line number를 지원하지 않기 때문에 fork 나 customizing된 소스를 사용해야 합니다.
그래서 방법을 찾다가 가장 간단한 방법을 소개하려고 합니다.
https://github.com/wcoder/highlightjs-line-numbers.js
여기에 들어가서 src/highlightjs-line-numbers.js 파일을 받습니다. 그리고 티스토리 HTML/CSS 편집에 들어갑니다.
아마 위 블로그에서 따라했다면 highlight.js 파일을 불러온 html 코드가 있을 것입니다. 그 아래에 코드를 추가해줍시다.
script src="./images/highlight.pack.js"></script>
<script src="./images/highlightjs-line-numbers.js"></script>
<link rel="stylesheet" href="./images/darcula.css" />
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>css 부분에 아래 코드를 추가
.hljs-line-numbers {
text-align: right;
border-right: 1px solid #ccc;
color: #999;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}이제 html 모드에서 다음과 같이 하면 됩니다.
<pre>
<code class="[강조할 언어]">
[소스코드]
</code>
</pre>'웹 > 기타' 카테고리의 다른 글
| [티스토리] 인용문 (0) | 2016.11.17 |
|---|---|
| [웹] REST API란 (0) | 2016.10.28 |
| URL, URI 차이점 (0) | 2016.10.24 |
NCookie