3-5. 개발 언어 하이라이트 설정하기

User Guide

2018. 12. 27. 22:09

프라치노 공책은 hightlight.js 플러그인 기반의 개발 언어 하이라이트를 지원해요. 이것을 사용하면 글 내에 있는 코드 블록의 스타일을 이해하기 쉽게 바꾸어 준답니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘개발 언어 하이라이트 (hightlight.js)’ 항목을 살펴보세요.

스킨 설정

‘개발 언어 하이라이트 (highlight.js)’ 항목에는 아래와 같은 속성들이 있어요.

1. 사용

highlight.js 플러그인 기반의 개발 언어 하이라이트를 켭니다. 다른 플러그인을 사용한다면 이 속성을 끄세요.

2. 코드 자동 감지

글을 쓸 때 코드 블록의 언어를 설정한 것과 상관없이 작성된 코드의 언어를 자동으로 감지해요. 글 에디터의 코드 블록에서 지원되지 않는 언어를 사용할 때 유용하답니다.

3. 번호 사용

코드 블록 내 작성된 내용에 줄 번호를 표시해줘요.

4. 번호 사용 시 줄무늬

코드 블록 내용의 줄을 구분하기 위해 줄무늬를 넣어줘요. 단 이 속성은 ‘번호 사용’ 속성을 켰을 때에만 작동되어요.

5. 일부 번호에 줄 바꿈

코드 블록 내용 중 한 줄이 글의 너비보다 길 경우 줄을 바꿔줘요.

6. 탭 폭

키보드의 tab 키를 눌렀을 때 입력된 여백의 크기를 설정합니다. 기본은 4칸이에요.


코드 블록 사용 예시

개발 코드 하이라이트를 사용하면 코드 블록은 아래 코드의 내용처럼 표시되어요.

#code {
    /* 코드 언어에 맞춰서 텍스트의 모양새가 변경됩니다. */
    display: flex;
    flex-flow: column-reverse;
}

코드는 각종 개발 언어에 맞게 표시되어 방문자에게 작성된 코드의 이해를 높일 수 있어요.

highlight.js 플러그인 사이트

하이라이트 모양새 또는 개발 언어 사용자화하기

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

개발 언어 하이라이트 플러그인의 자바스크립트 파일은 script_highlight.js, CSS 파일은 style_highlight.css예요. 이것들을 대치하면 됩니다.

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