반응형
해당 게시글은 Tistory 글 작성 시 Code Block에 적용할 수 있는 방법을 설명합니다.
기술 블로그를 개인적으로 운영하면서 Code Block에 대한 고민을 많이 가졌습니다.
가독성 있는 Code를 위해서는 세련된 모양의 Code Block을 선택해야 했습니다.
해당 작업을 위해서 글쓰기 작업이 생각보다 더 오래 걸리고, 번거로움도 많이 있었습니다.
기존에 많이 선택했던 방식은 Color Scripter였지만, Adobe Flash가 종료되면서
제가 이용했던 방법이 어려워져 다른 방식을 여러가지 시도해보았지만...
여러가지 사정으로 본문과 Code를 구분하는 최소한의 Style을 선정하기로 했습니다.
기술 블로그를 개인적으로 운영하면서 Code Block에 대한 고민을 많이 가졌습니다.
가독성 있는 Code를 위해서는 세련된 모양의 Code Block을 선택해야 했습니다.
해당 작업을 위해서 글쓰기 작업이 생각보다 더 오래 걸리고, 번거로움도 많이 있었습니다.
기존에 많이 선택했던 방식은 Color Scripter였지만, Adobe Flash가 종료되면서
제가 이용했던 방법이 어려워져 다른 방식을 여러가지 시도해보았지만...
여러가지 사정으로 본문과 Code를 구분하는 최소한의 Style을 선정하기로 했습니다.
Tistory에서는 Code Block을 편집할 때, 수작업이 동반되기 때문에
가급적이면 한가지 방식을 잘 선택해서 적용하는 것이 좋은 것 같다.
세련된 Code Block을 위해서는 아래와 같은 방식이 존재한다.
- Tistory 플러그인
- Color Scripter
- Gist
- Syntax Highlighter
- Highlight.js
각 방식의 특징은 아래와 같다. (보이는 이미지는 테마에 따라 다를 수 있다.)
Tistory 플러그인
- 플러그인을 적용한 것이기에 쉽게 적용할 수 있다.
- customizing이 어렵다.
Color Scripter
개인적으로 깔끔한 코드가 마음에 들었지만, Adobe Flash가 중단되면서
클립보드 복사도 HTML로만 복사가 되어서 이용하지 않게 되었다.
세련된 디자인과 테마가 있으며 비교적 쉽게 이용할 수 있다
Gist
- github에서 제공해주는 서비로
- customizing이 어렵다.
- 변경 이력 관리 가능
Syntax Highlighter
- 테마가 다양하지 않다.
- 기본적으로 inline과 줄 번호를 제공한다.
Highlight.js
- 기본적으로 줄 표시 기능이 제공되지 않기 때문에
highlightjs-line-numbers.js.js를 추가적으로 설정해야 한다.
- 코드가 길어질 때, 가로 스크롤이 생기지 않는 경우 존재
추가적인 css 속성 설정이 필요할 수 있다.
- "저작권자 표시" 플러그인을 사용하는 경우, Code 복사 시
전체 코드가 한 줄로 복사되는 문제가 발생
- customizing이 가능하지만 쉽지 않다.
반응형
'Tistory 운영' 카테고리의 다른 글
Tistory 블로그 개설하는 방법 (0) | 2021.02.16 |
---|---|
[Tistory] Highlight.js 적용 (0) | 2021.02.15 |
[Tistory] highlightjs-line-numbers.js 적용 (0) | 2021.02.15 |
[Tistory] Code Block 가로 스크롤 (0) | 2021.02.15 |
[Tistory] Syntaxhighlighter v4 적용 (0) | 2021.02.15 |
댓글