[티스토리 팁] 코드블럭 다루기 / 코드블럭 색깔입히기

티스토리에는 코딩 / 개발 관련 자료들이 많습니다.

그 이유에는 티스토리의 기능 중 하나인 '코드블럭' 도 큰 역할을 해주고 있다고 생각합니다.

코드 블럭은 티스토리가 자체적으로 제공하는 에디터 기능 중 하나로, 코드 텍스트를 IDE의 화면과 동일하게 출력시켜주는 효과가 있습니다. 따라서 단순히 코드를 텍스트 형식으로 보는 것보다 훨씬 가시적으로 좋은 효과를 얻을 수 있습니다.

 

---

1. 글쓰기 에디터 > 코드블럭 클릭

 

2. 언어 선택 > 코드 입력 > 확인 클릭

 

 

3. 코드블럭 확인 > 완료

 

4. 게시글 확인

 

 

---

 

위와 같은 과정을 통해 코드블럭을 사용할 수 있습니다. 하지만 결과가 조금 어색하지 않나요?

기본 에디터의 코드 블럭 기능만 사용한다면 위와 같이, 기본 텍스트와 구분도 안될 정도로 별로인 코드가 작성이 됩니다. 이제 이 코드를 좀 더 이쁘게 만들어봅시다.

 

1. 플러그인 > Syntax Highlight 클릭

Syntax Highlight 설정

 

2. 테마 선택 > 적용

테마가 중요합니다.

 

3. 게시글 확인

코드가 따로 구분되어 보이기 시작했습니다!

 

---

 

티스토리에서 자체적으로 제공하는 플러그인을 사용하면 되므로, 굉장히 간단합니다. 테마도 종류가 여러가지니, 자신의 티스토리 스킨이나 디자인에 맞게 선택하면 될 것 같습니다.

단지 조금 아쉬운 점은, 플러그인 테마 선택 부분에서 자체적으로 테마 적용의 미리보기가 불가능하다는 것입니다.

여러 IDE를 두루두루 사용해보신 분들은 테마 명만 봐도 머릿속에 그려지긴 하시겠지만, 참고용으로 테마별 적용사진을 올려봅니다.

 

각 테마 별 코드 디자인

---

기본적으로 플러그인에서 제공되는 테마 이외에도, 다음의 링크를 통하면 훨씬 다양한 테마를 직접 적용하여 사용할 수 있습니다.

notice.tistory.com/2483

코드블럭으로 소스코드 작성하기

github.com/highlightjs/highlight.js

highlightjs/highlight.js

 

 

<참고>
www.jbfactory.net/12748#highlightjs_-_1

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