글을 쓰다가 코드를 입력해야할 때가 있다.
티스토리에서는 코드블럭이라고 해서 이를 지원하고 있다.
highlight를 추가하면 이 코드블럭을 더 보기 좋게 표시할 수 있다.
하이라이트 추가
- [블로그 관리]-[꾸미기]-[스킨 편집]-[html 편집]-html 탭
- <head> </head> 사이에 아래 script 추가
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>- stylesheet의 href 값을 바꾸어 주면 테마 변경이 가능하다
- 아래 사이트에서 마음에 드는 테마를 찾아서 default.min.css 파일명을 변경해준다
- 대문자는 소문자로, 띄어쓰기는 - 로 변경하면 된다
- Atom One Dark의 경우 atom-one-dark.min.css
- https://highlightjs.org/static/demo
highlight.js demo
highlightjs.org
라인 넘버 표시하기
이로써 코드 블럭에 하이라이트 적용이 되었다.
가독성을 더 높이기 위해 라인 넘버를 표시도 추가한다.
적용방법
- highlightjs-line-numbers.js 다운로드 : https://github.com/wcoder/highlightjs-line-numbers.js/
- github에서 단일 파일을 다운로드 하기 위해서는 해당 파일을 누른후 raw를 우클릭하여 "다른 이름으로 링크저장"을 하면 된다.
- 이 링크를 우클릭하여 "다른 이름으로 링크 저장"하여도 된다
wcoder/highlightjs-line-numbers.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
- 다운로드한 파일을 [블로그 관리]-[꾸미기]-[스킨 편집]-[html 편집] 화면에서 파일업로드 탭으로 진입하여 업로드한다.
- [블로그 관리]-[꾸미기]-[스킨 편집]-[html 편집] 화면에서 html 탭에서 <head>와 </head> 사이에 아래 코드를 삽입하면 적용 완료
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
주의사항
해당 스크립트 추가 후에도 적용이 안되는 경우가 있다.
적용한 스킨에 따라 정상적으로 적용되지 않는 경우도 있으니 다른 스킨에서 적용되는지 확인 해 보자.
결국 스킨 변경함...
'티스토리' 카테고리의 다른 글
| 티스토리 고래 스킨 수정하기 (30) | 2023.03.27 |
|---|---|
| 티스토리에 수식 표시하기 (1) | 2019.06.10 |
댓글