티스토리 블로그 Code 프로그래밍 코드 블록 올리기

티스토리로 코딩, 프로그래밍 블로그를 운영하시는 분들이 꽤 있습니다. 최근 velog 등 다른 여러 플랫폼을 이용하시는 분들도 많지만 아직 국내 검색 유입도 등을 보았을 때 티스토리를 사용하시는 분들이 많은 것으로 알고 있는데요.

최근 더 많은 기능 및 플러그인 제공을 블로그 생활에 더욱 편리함을 더해주고 있어 이탈을 막아주고 있습니다. 올해 3월 말부터 운영되고 있던 코드 문법 강조 또한 이 같은 기능 개편에 한 몫을 하고 있는데요.

Syntax Highlight

위 사진과 같이 자신의 블로그 관리 > 플러그인 탭에서 설정이 가능합니다.

테마도 설정이 가능한데요. 기본, Atom One Dark, Atom One Light, Github, Monokai, Darcula, Visual Studio, Xcode 등 다양한 테마를 제공하고 있습니다. 자신이 원하는 테마를 골라 구독자들이 읽기 편하게 보여주면 좋을 것 같습니다.

블로그 글 작성에서 코드 블록 등록하기' 

플러그인 사용하기 적용 후에는 이렇게 글 작성하기 시에서 더보기 탭에서 코드 블록 플러그인을 볼 수 있습니다.

저 맨 밑에 플러그인 안에는 플러그인을 사용한다고 적용한 다른 플러그인들을 확인해 볼 수 있습니다. 저 같은 경우는 이전 글 넣기와 유튜브 링크 삽입 두 가지 플러그인이 존재하고 있습니다.

 타입 설정

코드 블록 옵션을 누를 시 나오는 창입니다. 여기서는 코드의 타입을 정해줄 수 있습니다. 블로그의 특성에 맞게 웹 쪽 언어들 html, css, Javascript 나 Python, Java, C++, Kotlin, Swift, PHP, Go 와 같은 다양한 언어를 지원해주고 있습니다. 총 10개의 언어를 지원하고 있네요.

Github 스타일

마지막으로 코드 블록을 등록한 모습입니다. github 스타일로 코드를 등록해보았습니다. 코드는 리액트 React.js에 styled-components 가 적용된 짧은 코드입니다. 밝은 테마가 특징이고 github 스타일에 잘 맞게 코드가 등록되었네요. 구독자들의 눈 건강을 생각해 어두운 테마를 고르는 것도 좋을 듯 합니다.