|
티스토리 소스 코드 가독성을 위해 하일라이트(highlight.js) 적용하는 방법 |
|
환경: Chrome |
방문하는 사용자들이 소스 코드을 쉽고 빠르게 파악할 수 있도록 하일라이트 기능을 넣었습니다. 이전 하일라이트 Javascript 는 애드센스와 충돌이 있어서 제거했기 때문에 새로운 것이 필요했습니다. 설치할 유틸은 highlight.js 입니다. 주의할 점은 티스토리에서 제공하는 코드 하일라이트는 비활성화해야 합니다. 같은 버전을 사용하기 때문에 설치를 하더라도 티스토리 버전이 적용됩니다.
▼ 먼저 하일라이트 홈페이지로 접속합니다. 왼쪽 화면에는 하일라이트로 코드를 표현한 상자가 있습니다. 그리고 아래에 style 항목이 보일 겁니다. 클릭하면 위에 있는 상자 디자인이 바뀝니다. 박스에 자신이 마음에 드는 스타일을 찾아서 스타일 이름을 기억해 두세요. 나중에 CSS 파일을 링크할 때 필요하기 때문입니다.
▼ 버전명을 눌러 이동한 페이지에서 cdnjs 항목에 주소를 복사합니다. link 와 script 로 나누는데, link 가 박스 디자인을 결정하는 CSS 파일입니다. link 에 있는 css 파일은 기본 디자인으로 default.min.css 입니다.
▼ 다른 디자인으로 바꾸고 싶다면 아래 사이트를 참고하세요. 이름을 바꿀 때 min 은 그대로 두고 앞에 있는 default 만 바꾸세요. 위에서 기억해 둔 스타일 이름을 아래 사이트에서 찾는 것입니다.
https://github.com/highlightjs/highlight.js/tree/master/src/styles
▼ 저는 default 디자인을 androidstudio 로 바꾸었습니다. 다음은 javascript 와 css 파일 뿐만 아니라 hljs.initHighlightingOnLoad() 함수를 호출 스크립트를 추가합니다. 이것을 추가하지 않으면 디자인이 적용되지 않습니다. 유의하시기 바랍니다.
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/androidstudio.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> |
▼ 티스토리 관리자 페이지에서 HTML 편집 화면으로 들어갑니다. 그리고 상단에 HTML 탭으로 이동합니다. 위의 소스를 복사해서 <head> 태그 사이에 삽입합니다. 마지막으로 오른쪽 상단에 적용 버튼을 클릭합니다.
|
◎ 코드 추가하는 방법 |
▼ 이제 코드 하일라이트를 적용할 환경은 갖춰졌습니다. 포스팅할 때 코드를 삽입하고 싶다면 상단 “외부컨텐츠” 메뉴를 클릭합니다.
▼ 컨텐츠를 추가할 때 <pre><code>... </code></pre> 태그 안에 소스를 입력합니다. 주의할 점은 <pre><code> 다음에 코드가 들어가야 합니다. 만약 아래와 같이 입력하면 줄바꿈이 되기 때문에 빈칸이 생깁니다.
|
<pre><code> code... </code></pre>
<pre><code>code... </code></pre> |
▼ 다음은 <code> 태그에 들어갈 언어 설정값입니다. 언어는 class 속성 값입니다. 지원하는 언어는 다양합니다. 아래 사이트에 나와있는 표를 참고하세요.
https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md
▼ 외부콘텐츠 삽입창에 <pre><code> 와 소스를 넣고 추가합니다.
▼ 적용한 결과는 다음과 같습니다.
'블로그' 카테고리의 다른 글
| 티스토리 사이트맵 자동 생성해서 네이버 웹마스터도구, 구글 Search Console 등록하기 (0) | 2020.07.19 |
|---|---|
| 티스토리 블로그 GIF 이미지 정지 화면으로 보이는 경우 조치 방법 (0) | 2020.06.10 |
| 티스토리 블로그 대표 이미지 설정하는 방법 (0) | 2020.06.04 |
| 티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법 (0) | 2020.05.27 |
| 티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법 (0) | 2020.05.21 |
| 티스토리 구독 피드 정보 관리하는 방법 (0) | 2020.05.08 |
| 티스토리 블로그 애드센스 광고 추가하기 (2) | 2020.02.17 |
| 티스토리 블로그 파비콘 적용하는 방법 (4) | 2020.02.15 |
