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

티스토리 스킨, 프라치노 공책은 highlight.js 플러그인 기반의 개발 언어 하이라이트를 지원합니다. 이것은 글 안에 있는 코드 블록을 읽기 쉽게 표시해 줍니다. 개발 언어 하이라이트는 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘개발 언어 하이라이트 (hightlight.js)’ 항목에서 찾아볼 수 있습니다.

---

1. 사용

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

2. 코드 자동 감지

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

3. 번호 사용

코드 블록 내 작성된 내용에 줄 번호를 표시합니다.

4. 번호 사용 시 줄무늬

줄을 구분하기 위해 줄무늬 배경을 적용합니다. 단 이 옵션은 ‘번호 사용’ 옵션을 켰을 때에만 작동됩니다.

5. 일부 번호에 줄 바꿈

코드 블록의 내용 중 한 줄이 글의 너비보다 길다면 줄을 바꿉니다.

6. 테마

마음에 드는 코드 블록의 테마를 선택합니다. ‘Atom’, ‘Visual Studio’ 등의 다양한 테마가 있습니다.

7. 탭 폭

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

---

코드 블록 사용 예시

개발 코드 하이라이트를 사용하면 코드 블록은 아래처럼 표시됩니다.

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

코드는 각종 개발 언어에 맞게 표시되기 때문에 코드 내용의 가독성이 향상될 수 있습니다.