티스토리에 코드블럭과 하이라이트 기능을 이용하여 코드 입력하기!

안녕하세요.

 

이번 포스팅에서는 티스토리에 소스 코드를 입력하여 예쁘게 출력하는 법에 대해 다뤄보려고 합니다.

 

자, 그럼 시작해볼까요?

 

티스토리 글쓰기에서 아래 그림과 같이 코드블럭을 클릭해줍니다.

코드블럭을 선택하시면 코드를 입력하는 창이 뜰텐데요.

한 번 코드가 어떻게 입력이 되고, 실제 출력이 되는지 확인해보겠습니다.

언어는 파이썬으로 선택했습니다.

코드블럭 내 코드 입력

글쓰기 상태에서는 아래와 같이 예쁘게 하이라이트 되어 나타나네요?

글쓰기 상태에서 나타나는 코드블럭 결과

하지만 포스팅을 완료하고 확인하니 정말 안 예쁘게 나타납니다..

실제 포스팅 시 웹 상에서 코드블럭 결과

 

코드가 예쁘게 하이라이트 되어 있지 않다면 코드를 보는데에도 상당히 어렵기 때문에 예쁘게 출력해야겠죠?

이를 위해 우선 티스토리 설정 창으로 가서 플러그인 탭으로 이동해줍니다.

"highlight"로 검색해보니 딱 하나 뜨네요.

테마를 정할 수 있는 것 같은데 저는 기본 테마로 설정해보겠습니다.

플러그인을 적용하고 어떻게 코드가 표출되는지 봐볼까요?

플러그인 적용 후 포스팅 시 웹 상에서 코드블럭 결과

오, 예쁘게 하이라이트 되었네요 ㅎㅎ

 

혹시라도 어떤 테마를 설정할지 고민하시는 분들을 위해 테마별 이미지를 함께 올려드릴게요 :)

 

기본

Atom One Dark

Atom One Light

Github

Monokai

Darcula

Visual Studio

XCode

XCode는 Visual Studio랑 차이가 없네요..? ㅎㅎ

 

그런데 제 블로그에서는 뭔가 테두리 박스가 있어서 예쁘지 않게 나오네요.

다음 포스팅에서는 이를 수정하기 위해 스킨 코드를 조금 수정해보겠습니다.

티스토리 코드블럭 테마 편집하기 - html, css, 크롬을 이용하자!

 

이번 코드 입력 관련된 포스팅은 여기까지 하도록 하겠습니다 :)

 

그럼 방문하신 모든 분들 좋은 하루 되세요!