초급의 끄적거림

[Tistory] 코드블럭 꾸미기, 라인넘버 표시 본문

기타

[Tistory] 코드블럭 꾸미기, 라인넘버 표시

codingD 2019. 10. 24. 17:35

1. 테마 변경

[블로그관리] - [꾸미기] - [스킨 편집] - [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 부분을 변경해줌

https://highlightjs.org/static/demo

 

highlight.js demo

 

highlightjs.org

 ★ 주의 : 대문자는 소문자!, 띄어쓰기는 - 사용

 

2. 라인 넘버 표시

highlightjs-line-numbers.js 다운로드 : https://github.com/wcoder/highlightjs-line-numbers.js/

 

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

  • github에서 단일 파일을 다운로드 하기 위해서는 해당 파일을 누른후 raw를 우클릭하여 "다른 이름으로 링크저장"을 하면 된다.
  • 이 링크를 우클릭하여 "다른 이름으로 링크 저장"하여도 된다
  • 다운로드한 파일을 [블로그 관리]-[꾸미기]-[스킨 편집]-[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>

 ★ 주의 : 해당 스크립트를 추가한 후에도 테마에 따라서 적용이 되지 않는 경우도 있음

 

저작자표시 비영리 변경금지

'기타' 카테고리의 다른 글

[Unix/Linux] 기본 내용  (0) 2019.12.06
[크롤링] Crawling (크롤링) / robots.txt  (0) 2019.11.12
[Summernote] Summernote (썸머노트) 사용법  (2) 2019.11.07
디버깅 (Debug)  (0) 2019.10.01
[이클립스] html을 이용한 jQuery 실습 폰트 색상 바꾸기  (0) 2019.08.30
'기타' Related Articles more
Comments