Please Enable JavaScript!
Gon[ Enable JavaScript ]

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

환경: Chrome

 

이제 티스토리도 코드 하일라이트 기능이 이용할 수 있습니다. 플러그인이 추가되었기 때문입니다. 클릭한번으로 적용이 가능해서 HTML 을 편집하지 않아도 됩니다. 이제 번거롭게 코드 하일라이트 자바스크립트를 찾아 추가할 필요가 없습니다. 하지만 디자인과 지원 언어가 많지 않습니다. 이것이 마음에 들지 않는다면 최신 하일라이드를 다운받아 설치하세요. 방법은 다음 포스팅에서 알려드리겠습니다.

 

▼ 소스 코드 하일라이트 기능을 추가하기 위해서는 관리자 페이지의 플러그인 목록으로 가야 합니다.

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

▼ 화면에 나타난 플러그인 중에서 Syntax Highlight 를 찾습니다. 제목은 코드 문법 강조 라고 되어 있습니다. 코드를 보기 편하게 디자인 해 주는 플러그인입니다. 

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

▼ 설정은 간단합니다. Syntax Highlight 상세 설정 페이지에서 적용 버튼을 클릭합니다.  

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

▼ 처음에는 기본 디자인으로 설정이 되어 있습니다. 테마 콤보박스를 눌러 보세요. 기본 외에 다양한 디자인이 나타납니다. 

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 


▼ 테마에서 기본 디자인은 다음과 같습니다. 회색 바탕에 검은 글씨라 깔끔하기는 하지만 별로 좋아 보이지 않습니다. 

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

▼ 다른 테마를 선택해서 적용해 보세요. 글을 배포할 필요없이 미리보기로 확인이 가능합니다. 이것은 Monokai 디자인을 선택해서 적용한 것입니다. 

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법

 

▼ 티스토리 플러그인의 단점은 선택 가능한 디자인이 몇 가지 없다는 것입니다. 실제 개발 사이트로 가면 훨씬 많은 지원 언어와 디자인들이 존재하기 때문에 시간이 있으신 분들은 아래 하일라이트 주소로 방문해서 직접 설치해 볼 것을 권합니다.

https://highlightjs.org/

티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법



Posted by 녹두장군

댓글을 달아 주세요