|
티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법 |
|
환경: Chrome |
이제 티스토리도 코드 하일라이트 기능이 이용할 수 있습니다. 플러그인이 추가되었기 때문입니다. 클릭한번으로 적용이 가능해서 HTML 을 편집하지 않아도 됩니다. 이제 번거롭게 코드 하일라이트 자바스크립트를 찾아 추가할 필요가 없습니다. 하지만 디자인과 지원 언어가 많지 않습니다. 이것이 마음에 들지 않는다면 최신 하일라이드를 다운받아 설치하세요. 방법은 다음 포스팅에서 알려드리겠습니다.
▼ 소스 코드 하일라이트 기능을 추가하기 위해서는 관리자 페이지의 플러그인 목록으로 가야 합니다.
▼ 화면에 나타난 플러그인 중에서 Syntax Highlight 를 찾습니다. 제목은 코드 문법 강조 라고 되어 있습니다. 코드를 보기 편하게 디자인 해 주는 플러그인입니다.
▼ 설정은 간단합니다. Syntax Highlight 상세 설정 페이지에서 적용 버튼을 클릭합니다.
▼ 처음에는 기본 디자인으로 설정이 되어 있습니다. 테마 콤보박스를 눌러 보세요. 기본 외에 다양한 디자인이 나타납니다.
▼ 테마에서 기본 디자인은 다음과 같습니다. 회색 바탕에 검은 글씨라 깔끔하기는 하지만 별로 좋아 보이지 않습니다.
▼ 다른 테마를 선택해서 적용해 보세요. 글을 배포할 필요없이 미리보기로 확인이 가능합니다. 이것은 Monokai 디자인을 선택해서 적용한 것입니다.
▼ 티스토리 플러그인의 단점은 선택 가능한 디자인이 몇 가지 없다는 것입니다. 실제 개발 사이트로 가면 훨씬 많은 지원 언어와 디자인들이 존재하기 때문에 시간이 있으신 분들은 아래 하일라이트 주소로 방문해서 직접 설치해 볼 것을 권합니다.
'블로그' 카테고리의 다른 글
| 티스토리 블로그 GIF 이미지 정지 화면으로 보이는 경우 조치 방법 (0) | 2020.06.10 |
|---|---|
| 티스토리 블로그 대표 이미지 설정하는 방법 (0) | 2020.06.04 |
| 티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법 (0) | 2020.05.27 |
| 티스토리 소스 코드 가독성을 위해 하일라이트(highlight.js) 적용하는 방법 (0) | 2020.05.24 |
| 티스토리 구독 피드 정보 관리하는 방법 (0) | 2020.05.08 |
| 티스토리 블로그 애드센스 광고 추가하기 (2) | 2020.02.17 |
| 티스토리 블로그 파비콘 적용하는 방법 (4) | 2020.02.15 |
| 구글 세이브 브라우징 서비스로 내 블로그 악성코드 감염여부 확인하는 방법 (0) | 2020.01.29 |
