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

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

‘개발 언어 하이라이트 (highlight.js)’ 항목에는 다음과 같은 속성이 있습니다:

1. 사용
2. 코드 자동 감지
3. 번호 사용
4. 번호 사용 시 줄무늬
5. 일부 번호에 줄 바꿈
6. 너비 확장
7. 탭 폭

---

1. 사용

highlight.js 플러그인 기반의 개발 언어 하이라이트를 사용할 것인지 설정합니다. 만약 별도의 플러그인을 사용한다면 이 속성을 끄세요.

2. 코드 자동 감지

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

3. 번호 사용

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

4. 번호 사용 시 줄무늬

코드 블록 내용의 줄을 구분하기 위해 줄무늬를 넣습니다. 이 속성은 ‘번호 사용’ 속성을 켰을 때에만 작동됩니다.

5. 일부 번호에 줄 바꿈

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

6. 너비 확장

이 속성을 켜면 코드 블록이 글의 너비보다 확장됩니다. 확장된 너비는 ‘확장 미디어의 너비’ 값을 따라갑니다.

7. 탭 폭

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

---

코드 블록 사용 예시

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

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

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

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

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

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

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