블로그에 html 이나 CSS 소스코드를 공유하시는 분들이 많습니다. 이미지로 캡쳐해서 사용하기도 하지만, 코드를 코드블럭을 통해 작성하면 코드에 대한 가독성이 높아집니다. 티스토리에 있는 코드블럭 플러그인을 소개합니다.
목차
플러그인 > Syntax Highlight
▲먼저 코드 문법을 강조하기 위해서 하이라이트를 주고 싶다면, 티스토리에서 플러그인으로 제공하고 있습니다. 물론 코드블럭 플러그인이 최신 업데이트가 안되고 탭간격 조절이 안되는 단점이 있습니다. 하지만, 가장 쉽게 코드블럭을 보기 좋게 바꾸는 방법이지요.
그래서 티스토리에서 가장 쉽게 1초만에 코드블럭을 사용하는 방법은 플러그인에서 Syntax Highlight 를 눌러주는 것입니다.
코드블럭 테마 선택 > 적용
▲티스토리 코드블럭, 코드 문법을 꾸미는 플러그인 Syntax Highlight 에서는 다양한 테마를 선택할 수 있습니다. 저 테마 중에서 원하는 테마로 선택하고 적용을 누르면 하이라이트 코드블럭이 적용됩니다.
플러그인 Syntax Highlight 테마
티스토리에서 제공하는 플러그인 Syntax Highlight 테마가 각각 적용된 예시를 이미지로 빠르게 보여드리겠습니다. 플러그인 화면에서 예시를 바로 보면 좋을텐데 그렇지 않아서 저도 테마를 하나 적용해놓고 글쓰기로 코드블럭이 적용된 화면을 확인해야했습니다. 테마 예시가 많은 분들에게 도움이 되면 좋겠습니다.
혹시 테마를 적용했는데 다르게 보이신다면?
아래 예시는 코드블럭 CSS 를 적용했습니다. HTML로 적용했다면, B/W로만 보입니다.
1) Atom One Dark 테마
2) Atom One Light 테마
3) Github 테마
4) Monokai 테마
5) Dracula 테마
6) Visual Studio 테마
7) Xcode 테마
저처럼 티스토리 코드블럭 Syntax Highlight 테마 예시가 궁금하셨던 분들에게 도움이 되시면 좋겠습니다.
티스토리 블로그 관련글
'💡Blog > 블로그 운영' 카테고리의 다른 글
| 가장 쉽게 설명하는 티스토리 글쓰기 방법 (3) | 2022.11.26 |
|---|---|
| 티스토리 프로필 이미지, 블로그 이름, 닉네임 설정하고 변경하기 (5) | 2022.11.26 |
| 웹폰트 적용(1) 파일업로드하여 티스토리 적용하기 (0) | 2022.11.24 |
| 티스토리 글 수정하고 삭제하는 방법(PC와 모바일앱) (3) | 2022.11.24 |
| 가장 간단한 티스토리 글 수정, 삭제, 비공개 변경 방법 (1) | 2022.11.24 |
| 카카오뷰 친구추가, 카카오뷰 품앗이 (feat.카카오뷰 수익 조건) (24) | 2022.02.09 |
| 가장 간단한 무료 이미지 압축, webp변환 앱 Squoosh (0) | 2022.01.12 |
| 블로그 운영에 꼭 필요한 Top 15 사이트 (1) | 2021.12.19 |