안녕하세요. 오늘은 티스토리에서 코딩을 공유할 때 도움이 될만한 스킨 편집 방법을 공유하겠습니다.
예전에 교수님께서 코드를 짤 때 가장 중요한 건 가독성이다!라는 말씀을 하신 적이 있습니다. 팀 작업을 할 때도 그렇고, 본인이 작업을 할 때도 결국 가독성이 좋아야 코드가 잘 짤 수 있는거라구요.
그래서 오늘은 블로그에 코드를 공유할 때 필요한 스킨 변경에 대해 알려드리겠습니다. 또 보통 코드 문제를 풀고 답과 풀이과정을 올려두는 경우가 많으니까 이때 쓸 수 있는 접은 글 기능에 대해서도 알려드릴게요. 이게 그냥 쓰게 되면 가독성이 너무 떨어지더라구요.
보통 인터넷으로 코드를 공유할 때 가장 많이 쓰는 프로그램이 바로 'Color Scripter'입니다.
Color Scripter
Simple & Flexible Syntax HighLighter
colorscripter.com
사이트에 접속하셔서, 공유하고 싶은 코드를 작성하시고, 클립보드에 복사를 누릅니다.
아래 사진처럼 창이 뜨면 Ctrl C를 눌러서 복사를 해주고
블로그 글쓰기 창으로 돌아와서 마크다운 모드를 눌러줍니다.
그다음 코드를 넣고 싶은 곳에 Ctrl V를 해서 복사한 코드를 붙여 넣습니다.
저는 여기다가 코드를 넣어 볼게요. - - vV
|
1
2
3
4
5
6
7
8
9
|
#include <stdio.h>
void main(){
float a = 7.9;
printf("%f\n", a);
printf("%.3f\n", a);
printf("%6.2f\n", a);
}
|
cs |
그럼 이런 식으로 마크다운 모드일 때는 어마 무시하게 많던 코드가, 기본 모드로 돌아오면 위처럼 예쁘게 코드가 작성이 됩니다.
그런데 매번 이렇게 복사 붙여 넣기를 하는 것이 귀찮다고 하면 조금 간편하게 코드를 공유할 수 있는 방법이 있는데요, 바로 티스토리 코드 블록을 이용하는 것입니다. 티스토리 기본 앱이어서 따로 뭘 설치할 필요가 없습니다.
블로그 관리자 페이지에 들어가서 플러그인을 누릅니다.
여러 가지 플러그인 중에서 "코드 문법 강조"라는 플러그인을 선택합니다.
그럼 여러가지 테마를 선택할 수 있는데요, 저는 Atom One Light를 사용하고 있습니다. 개인적으로 눈이 너무 아파서 검은 배경 코딩을 별로 안 좋아하거든요.
다른 테마는 어떤 모양일지 궁금하실 것 같아서, 테마별로 자세하게 리뷰해둔 블로그 추천드립니다.
[티스토리] 코드블럭 사용법, 테마 비교, 추천
프로그래밍 개발자 블로그에서 필수로 필요한 티스토리 코드 블록 (Code Block) 사용 방법을 알아보고 8가지 테마 별 이미지를 통해 색상, 모드, 줄 간격 등을 비교해보고 가독성이 좋고 본인 취향
wondytyahng.tistory.com
적용을 선택하고 다시 글쓰기 창으로 돌아와서 보면 코드를 작성할 수 있는코드 블록이 생긴 걸 보실 수 있습니다.
이런 식으로 작성한 코드에 맞는 언어를 선택해 주시면 자동으로 알맞은 색상으로 적용이 됩니다.
공유하고 싶은 코드를 작성하고 확인을 누르면 아래와 같은 결과가 나옵니다.
#include <stdio.h>
void main(){
float a = 7.9;
printf("%f\n", a);
printf("%.3f\n", a);
printf("%6.2f\n", a);
}
그런데 저 같은 경우는 보통 본문 1로 글을 작성하는 편인데, 본문 글에 비해 코드 블록의 폰트 사이즈가 너무 작은 것 같아서 코드 블록의 폰트 크기를 키워 주기 위해 따로 HTML에 가서 수정을 해주었습니다.
블로그 관리자 > 스킨 편집 > HTML 편집 > HTML로 갑니다 (css가 아닌 html입니다!)
그리고 아래의 코드를 <head>와 </head> 사이에 넣어줍니다.
<style>
pre > code { font-size: 1.3em; }
</style>
코드 블록의 기본 폰트 사이즈는 1.0em인데, 저는 살짝만 키워주고 싶어서 1.3em으로 변경해 주었습니다.
그리고 같은 곳 (<head>와 </head> 사이)에 아래의 코드를 적어주시면 접은 글을 사용하실때 나타나는 더보기가 이쁜 모양으로 바뀝니다.
짠!
이 코드를
<style>
.btn-toggle-moreless {
background-color: #F6F6F6;
box-shadow: 2px 2px 7px 1px rgba(28,110,164,0.75);
border-radius: 12px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.moreless-content {
font-size: 16px;
padding-top: 20px;
}
.btn-toggle-moreless:hover {
background-color: #00F6F6;
}
</style>
여기다 복사하시면 됩니다. 그럼 티스토리 접은 글 더보기의 모양이 변경된것을 확인하실 수 있습니다.
접은글 더보기 모양 디자인 변경 바꾸기 짠!
코드를 넣고 적용 & 새로고침을 하면, 보시는 것처럼 조약돌 모양의 더보기 버튼이 생깁니다. 코드 수정을 안 하고 그냥 써보시면 아시겠지만 아무 모양이 없어서 가독성이 매우 떨어지거든요.
저기 코드에서 숫자로 되어있는 color 값을 조절하면 색상도 변경할 수 있습니다.
이번 포스팅에서는 color script를 이용한 코드 공유, 티스토리 기본 플러그인인 코드 블록을 이용한 코드 공유, 또 접은 글 디자인 변경 방법까지.
이상으로 티스토리 블로그에서 코드를 작성하기 위해 알아 두면 좋은 스킨 편집 방법에 대해 공유해 보았습니다. 😊
'정보처리기사' 카테고리의 다른 글
| 정보처리기사 실기 프로그래밍 문제 SQL 기출 풀이 모음 (10) | 2022.10.15 |
|---|---|
| 정보처리기사 실기 프로그래밍 문제 파이썬 기출 풀이 모음 (7) | 2022.10.14 |
| 정보처리기사 실기 프로그래밍 문제 Java 기출 풀이 모음 (3) | 2022.10.14 |
| 정보처리기사 실기 프로그래밍 문제 C언어 기출 모음 (19) | 2022.10.11 |
