[티스토리] 코드블럭 1 - 코드블럭으로 소스코드 작성하기

프로그래밍 공부를 하면서 티스토리 블로그에 학습 일지를 조금씩 작성하고 있는데요,

복잡한 경우에는 개발 환경 자체를 캡쳐하여 작성하기도 하지만,

간단한 코드를 사용할 경우에는 제가 작성한 코드를 복사+붙여넣기에 용이하게

티스토리 자체의 <코드블럭>을 이용하고 있어요! 

 

코드 블럭은 개발자 블로거를 위해 티스토리에서 제공하는 코드 삽입 기능으로,

소스코드를 입력하고 보기 좋게 공유하는 것을 돕는 기능입니다. 

 

 

🐶 아주 간단한 코드블럭 사용 방법

 

1. 글쓰기에서 툴바 메뉴에서 더보기 > 코드블럭을 선택하여 사용합니다. 

2. 입력하려는 언어르 선택하고 코드 입력창에 코드를 작성합니다. 

3. 코드 입력 후 글쓰기 페이지에서 나타나는 모습입니다. 

---

글쓰기 페이지에서 보이는 것처럼 발행된 글에서도 코드가 깔끔하면 좋겠지만,

티스토리에서는 다른 모양이나 방식으로 필요한 형태로 자유롭게 사용하도록 지원하기 위한 의도로

아래와 같이 들여쓰기만 적용된 조금 투박한 코드블럭 형태를 띄고 있습니다. 

 

코드블럭의 글씨체, 색상 등이 깔끔하게 표현된 것을 코드 하이라이트라고 하는데, 이가 적용되지 않는다는 것입니다.

코드 하이라이트를 적용하기 위한 가장 간단한 방법으로 티스토리 플러그인 적용에 대해 알아보겠습니다.

 

---

 

🐶 티스토리 플러그인 코드 문법 강조 (Syntax Highlight) 적용하기

 

1. 블로그 관리 페이지에서 왼쪽에 있는 메뉴 중 플러그인을 클릭하고, 코드를 검색하거나 '코드 문법 강조' 플러그인을 찾습니다. 

 

2. 코드 문법 강조 플러그인에서 원하는 테마를 고르고, 플러그인을 적용해줍니다. 

 

 

🐶 티스토리 플러그인 코드 문법 강조 (Syntax Highlight) 미리보기

 

아쉽게도 플러그인 팝업창에서는 미리보기를 제공하고 있지 않습니다. 그래서 제가 준비했어요 ! 😉

참고해서 원하는 문법 강조 테마를 적용해보시길 바래요.

 

기본

Atom One Dark / Atom One Light

Github

Monokai / Darcula

Visual Studio / Xcode

 

저는 개인적으로 다크다크한 코드 블럭들이 마음에 들어요.

---

하지만 ! 

플러그인 이외에 highlight.js를 활용한 코드 하이라이트를 적용하는 방법이 있습니다. 

많은 개발자 블로그가 이 방법을 적용하고 있는데, 플러그인보다

좀 더 세부적인 조절(폰트 사이즈, 행간, 자간, 코드 블럭 모양 조절 등)이 가능하기 때문입니다. 

이후에 highlight.js를 적용하는 방식에 대해서도 포스팅 하겠습니다 ! 😉