티스토리 코드블럭 소스코드 입력하고 스타일 입히기

개발자 블로그들을 구경하다보니 소스코드에 하이라이트되어있는 모습이 가독성도 좋고 멋져보이더라구요.

'보기좋은 떡이 먹기도 좋다' 는 말이 있듯이 티스토리에서 제공하는 코드블럭을 통해서 문법에 맞게 syntax 하이라이팅 기능이 제공된다고 하여 알아보았습니다.

 

 

코드블럭 삽입하기

 

티스토리 새로운 에디터를 열고 더보기를 눌러주면 코드블럭이 보입니다. 코드블럭을 선택해주세요.

 

 

 

 

코드블럭을 선택하면 코드블럭 삽입 창이 뜨고 입력 언어를 선택할 수 있습니다. 코드를 입력하고 확인을 눌러주세요. 

 

 

 

 

본문에 소스코드가 삽입되었다는 것을 확인 할 수 있습니다. 코드가 하이라이팅 되어 나오는 것을 확인 할 수 있습니다. 

 

 

 

그런데 글을 발행해보면 하이라이팅 기능이 적용되지 않은 것을 볼 수 있습니다. 

 

 

 

 

 

이를 해결하기 위해 티스토리에서 제공하는 코드 문법 강조 플러그인을 다운로드 받아줘야 합니다. 

 

 

 

 

Syntax Highlight 사용하기

 

블로그 관리 > 플러그인  에 들어가서 Syntax Highlight 를 선택합니다.

 

 

 

 

적용하기를 클릭하고 발행한 글을 새로고침하면 소스코드가 하이라이팅 되어진 것을 확인 할 수 있습니다.

 

 

 

 

 

코드블럭을 인기 테마로 변경할 수 있으며 테마의 종류는 다음과 같습니다.

저는 Atom One Dark 를 적용해주었습니다. 

 

 

 

a = "문과생 주디"
b = "의"
c = "데이터 실험실"
print(a+b+c)

 

제공되어 있는 테마 이외에 테마를 원하신다면 GitHub에 공개된 highlight.js를 포함하여 이미 공개된 코드 하이라이터를 적용하시거나 필요한 형태로 만들어 사용하실수도 있습니다.