티스토리 강좌 | 코드블럭으로 코드 입력하고 highlight.js로 예쁘게 출력하는 방법

티스토리에는 코딩 관련 자료가 많습니다. 그런데, 글을 작성할 때 코드를 삽입하는 것은 쉽지 않았습니다. 특히 HTML 관련 코드를 넣을 때는 특정 문자를 변환해야 하는 불편도 있었습니다. 그러나 티스토리에서 새 에디터를 출시하면서 코드를 쉽게 삽입할 수 있는 기능을 추가했습니다. 이름은 [코드블럭]입니다.

코드 입력하기

  • 새 에디터에서 [코드블록]을 클릭하면...

  • 코드를 넣을 수 있는 창이 뜹니다. 언어를 선택하고 코드를 입력하고 [확인]을 클릭하면...

  • 코드가 하이라이트되어 나옵니다.

  • 그러나 하이라이트는 에디터에서만 됩니다. 실제 블로그에서 보면 스킨에서 정한 pre, code 스타일로 표현되고 하이라이트는 되지 않습니다. 하이라이트 기능은 별도로 구현해야 합니다.

highlight.js 적용하기 - 방법 1

티스토리에서 코드하이라이트를 구현하는 방법은 여러 가지가 있는데, 플러그인을 이용하는 게 가장 편합니다.

  • 티스토리 관리자의 플러그인에서 Syntax Highlight를 클릭합니다.

  • [적용]을 클릭하면...

  • 블로그에서 예쁘게 나오는 것을 확인할 수 있습니다.

  • 모양은 여러 가지가 있습니다. 예를 들어 테마를 Github로 변경하면...

  • 다음처럼 나옵니다.

highlight.js 적용하기 - 방법 2

highlight.js에서 직접 코드를 받아오는 방법도 있습니다.

HTML 편집에서 </head> 위에 다음 코드만 추가하면...

코드 하이라이트가 구현됩니다.

하이라이트 스타일은 여기에서 고를 수 있습니다.

스타일을 선택한 후 CSS 경로를 바꿔줍니다. 예를 들어 Androidstudio가 마음에 든다면 default를 androidstudio로 바꿔주면 됩니다.(스타일 이름에서 대문자를 소문자로 고치고, 띄어쓰기는 -로 바꿉니다. 예를 들어 An Old Hope라면 an-old-hope입니다.)

모양은 데모 페이지와 다를 수 있습니다. 스킨에서 정한 pre와 code 스타일 때문입니다. 모양이 이상하면 CSS에 있는 pre 또는 code 관련 코드를 제거하거나, <style> 태그를 추가해서 조정합니다.

이제 새로운 스타일로 코드가 표현됩니다.

티스토리 반응형 스킨을 찾으시나요?
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) (문의는 메일로 해주세요.) E-MAIL : jb.jbfactory@gmail.com 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침