티스토리 소스코드 문법강조 추가법
Hello World!
태어나서 처음으로 블로그를 오픈했습니다. 이 블로그는 제가 흥미를 가지고 있는 것들에 대한 정보를 공유하는 동시에 제가 배우고 있는 프로그래밍에 대한 정보 등을 공유하는데 목적이 있습니다. 앞으로 얼마나 자주 포스팅을 하게 될지 모르겠지만 열심히 해보도록 하겠습니다.
앞서 말씀드린 프로그래밍에 관한 정보를 올리는데 있어서 소스코드가 빠질 수 없습니다. 하지만 소스코드를 그대로 붙여넣고 글을 게시하면 보는 사람입장에선 불편할 수 있습니다. 제가 지금까지 프로그래밍에 관해 모르는 정보를 찾을 때도 이러한 문제점들이 있었습니다. 그래서 이 블로그에서 자료를 참고하시는 분들이 편하게 소스코드를 볼 수 있도록 소스코드에 프로그래밍 문법을 적용하고 또한 색상강조를 하는 방법을 먼저 찾아보았습니다. 생각보다 매우 간단한 방법이 있었고 소개하려고 합니다.
Highlight.js 를 이용해 코드 구문 강조하기
Highlight.js 소개
Highlight.js는 제가 필요에 의해 검색을 하다가 가장 먼저 찾아낸 라이브러리입니다. 자바스크립트로 쓰여진 소스 코드 구문 강조를 위한 라이브러리이며 모던 브라우저(IE9이상)에서 지원됩니다. 구체적인 특징은 다음과 같습니다.
- 130개의 언어와 65가지 스타일 제공
- 자동으로 소스 코드 구문을 찾아 알맞은 스타일로 표현
- 혼합된 코드에 대한 구문 강조 가능
- node.js에서 사용 가능
- 모든 마크업에서 작동
- 모든 자바 스크립트 프레임워크와 호환
- 모던 브라우저, IE9 이상 지원
Highlight.js 설치
highlight.js 홈페이지에 접속하여 get Version 버튼을 클릭하고 두가지 제시된 방법 중 Hosted 방식을 이용하여 사용한다.
Hosted 방식은 일반적으로 사용되는 언어 22개를 미리 구성하여 CDN을 통해 호스팅한다. 이 22개의 항목에 포함되는 언어는 Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, SQL 이 포함된다.
Hosted 방식의 설명과 함께 다음의 코드가 적혀있다.
cdnjs
위의 코드를 티스토리 블로그 관리자 메뉴의 HTML편집을 이용해 삽입해주면 된다. 삽입위치는 <head>태그의 안쪽에 적당한 곳에 삽입하면 된다. 아래 사진은 최종적으로 삽입한 화면이다.
Highlight.js 사용법
기본적으로 highlight.js는 테마를 지원한다. 테마를 변경하는 방법은 아주 간단하다. 삽입된 코드중 윗줄인 <link> 를 보자. 맨 뒤에 default.min.css 라는 부분이 있다. 이곳을 다른 테마로 수정해주면 간단하게 테마를 바꿀 수 있다. 테마를 선택하는 방법은 highlight.js demo 페이지에서 Style에 적용된 디자인을 살펴보고 마음에 드는 디자인 이름으로 코드를 수정해주면 된다.
코드를 게시물 내에 삽입하는 방법은 매우 간단하다. 게시물을 작성할 때 HTML 편집기를 사용하는 방법은 티스토리를 사용하는 사람이라면 다 알것이라 생각하고 생략하겠다. HTML 편집기를 사용하여 코드를 넣고싶은 곳에 <pre><code> 를 입력하고 사이에 넣고싶은 소스 코드를 구현하면 된다. 실제 사용하는 방법은 다음과 같다.
위와 같이 HTML에서 작업을 하고 게시물을 게시하면 다음과 같이 표시되는 것을 볼 수 있다.
<pre><code> 태그부분을 스스로 인식하여 하이라이팅 해주는 것이 아주 편리하다. 또한 에디터에서 코딩하는 것 처럼 색을 표시해주고 들여쓰기도 지원해주니 더욱 더 좋다. 해당 코드를 복사하여 붙여넣을 경우 들여쓰기도 그대로 복사되는 장점이 있다.
REFERENCE
https://highlightjs.org/
'Information > Tistory' 카테고리의 다른 글
| 티스토리, 구글 검색 노출시키는 법 소개 (0) | 2016.11.07 |
|---|
