티스토리 뷰
Revision History
2016/05/14 18:14:42 - 최초 작성
Reference Page
Highlight.js line numbers plugin Github
Link
티스토리에서 소스코드에 대한 문법 강조 기능 추가하는 방법
블로그 글을 작성 할 때 예제 코드에 가시성을 더해주는 하이라이트 기능을 적용하는 방법입니다.
1) 먼저 highlight.js 사이트에서 최신 버전에 대한 CDN 정보를 가져옵니다.
2016/05/14 기준 최신 버전은 9.3.0 입니다. 두 CDN 서비스 cdnjs 와 jsdelivr 중 하나를 선택해서 코드를 복사합니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
2) 티스토리 관리 페이지에서 HTML/CSS 편집 메뉴를 선택해서 코드를 붙여 넣습니다.
기본 설정은 아래와 같습니다.
복사해놓은 코드를 적당한 위치에 붙여넣기 합니다.
How to use highlight.js 페이지를 참고하여 초기화 코드를 추가합니다.
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
초기화 코드를 입력 후 블로그 설정을 저장합니다.
(아래는 초기 설정에 대한 스크린샷이 없어서 나중에 다시 캡처한 화면입니다)
3) 샘플페이지를 작성합니다.
* 에디터 예제
* HTML 예제
저장하고 내용을 보면 아래와 같이 보여집니다.
사용 설명에 의하면 언어는 자동으로 판단해준다고 합니다. 아래처럼 직접 지정할 수도 있습니다.
CSS 스타일 설명 및 언어(약어) 설명 페이지 에서 자세한 설명을 확인하세요.
직접 지정해도 내용은 동일하게 보입니다.
만약 다른 언어로 (?? 왜 그래야하는지 모르겠지만...) 보여주고 싶다면 직접 바꿀 수 도 있습니다. 다음은 js 코드를 bash 형식으로 하이라이팅 하는 소스입니다.
bash 에서는 export 가 눈에 띄는군요.
4) CSS 스타일 변경
기본 스타일 CSS 외에 다양한 스타일을 제공합니다.
기본 제공되는 스타일 중 monokai-sublime 스타일을 적용해보겠습니다. cdnjs 사이트를 방문하여 사용 가능한 css 파일을 확인 할 수 있습니다. 그 중 원하는 스타일을 선택하시면 됩니다.
다음은 monokai-sublime 스타일을 적용한 설정입니다. 수정 후 저장해주세요.
코드하이라이트 테스트 글을 갱신해보면 다음과 같이 스타일이 변경된 것을 확인할 수 있습니다.
5) 줄 번호 기능 추가
이제 line number 를 좌측에 표시해주는 기능을 추가해보겟습니다.
먼저 Highlight.js line numbers plugin Github 페이지를 방문하여 highlightjs-line-numbers.min.js 파일을 다운로드 합니다.
이 스크립트 파일을 이미지 처럼 업로드합니다.
먼저 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;
}
업로드 후 목록에 오른쪽 클릭을 하면 주소를 복사 할 수 있습니다. 이 주소를 붙여넣기 합니다. 그리고 초기화 함수 하나를 더 호출하도록 수정합니다.
<!--highlightjs-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="http://cfs.tistory.com/custom/blog/212/2122723/skin/images/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
이제 저장을 하고 코드하이라이트 테스트 글을 갱신해보면 줄 번호가 추가된 것이 보입니다.
아직 미흡한 부분은 우측에 있는 마진이 없어지지 않는다는 점입니다. 이 부분은 나중에 다시 손 봐야겠어요...
아직 티스토리 이사 온지 얼마 되지 않아 글 작성에 시간이 많이 걸리네요 끙끙!!!
검색: Tistory, 티스토리, Blog, 블로그, Syntax highlighting, 문법 강조, 구문 강조, Code highlighting, 코드 강조, Highlight, 하이라이트, Line number, 줄 번호,