개발 코드 하이라이터 사용하기

User Guide

2018.12.27 22:09

지금까지 프라치노 공책 스킨 사용자의 패턴을 분석했을 때 의외로 개발자 분들이 많이 사용한다는 것을 알았어요. 그 증거 중 하나로 제게 개발 코드 하이라이터를 적용하는 방법에 관하여 많은 문의를 주셨기 때문이에요.

이제 최신 버전의 프라치노 공책은 개발 코드 하이라이터를 공식으로 지원합니다. 어떠한 개조 없는 순수한 highlight.js 플러그인 기반으로 작동되기 때문에 원한다면 여러분이 플러그인 사이트에서 사용자화한 자바스크립트 파일 또는 다른 스타일이 적용된 CSS 파일로 대치할 수도 있어요.

스킨 옵션

기능 켜기

개발 코드 하이라이터를 켜려면 스킨 옵션에서 ‘개발 언어 하이라이트’ 속성을 켜면 됩니다. 참 쉽죠?

사용하기

개발 코드 하이라이터를 사용하려면 글을 쓸 때 HTML 모드로 전환한 뒤 <pre><code></code></pre>를 입력하고 그 사이에 보여주고자 하는 개발 코드를 입력하세요. 예를 들면 아래와 같아요.

<pre><code>&lt;!-- 글에서 보여주려는 개발 코드를 입력합니다.
기본적으로 개발 코드는 고정폭 서체로 표시됩니다. --&gt;</code></pre>

이 때 블로그는 HTML 기반이므로 <>, &같은 문자는 독립체로 사용해야 한다는 것을 잊지 마세요!

highlight.js 플러그인 사이트

하이라이트 스타일 또는 개발 언어 사용자화하기

아까도 말했듯이 개발 코드 하이라이터는 순수한 highlight.js 플러그인 기반으로 작동되어요. 따라서 원한다면 여러분이 플러그인 사이트로 가서 원하는 개발 언어가 지원되는 플러그인의 자바스크립트 파일을 다운로드하거나, 하이라이트 컬러 등의 모양새를 다르게 하기 위해 CSS 파일을 다운로드하여 대치할 수도 있어요.

개발 코드 하이라이터 플러그인의 자바스크립트와 CSS 파일은 images 폴더에 있어요. 자바스크립트 파일 이름은 script_highlight.js, CSS 파일 이름은 style_highlight.css입니다.

해당 파일을 업로드하여 대치를 완료했다면 브라우저의 캐시를 초기화할 것을 잊지 마세요!

'User Guide' 카테고리의 다른 글

개발 코드 하이라이터 사용하기  (0) 2018.12.27
블로그 표지 바꾸기  (6) 2018.12.27
손쉬운 스킨 사용자화 기본  (0) 2018.12.27
사이드바 모듈 설정하기  (1) 2018.12.27