블로그 글에 코드 보기 좋게 넣는 방법

2021. 11. 15. 22:32 / 서기랑

 블로그에 코드를 넣는 방법이나 설명하는 글 등을 작성하는 경우 글의 내용에 코드를 넣는 경우가 많다.

 이런 경우 코드를 그냥 넣는 것보다는 코드 에디터에서 보이는 것처럼 넣어주는 것이 아무래도 보기에 좋은데 직접 색을 변경하거나 테이블을 만드는 등의 편집을 하는 것도 좋지만 코드를 보기 좋게 변경해주는 사이트를 이용한다면 별다른 수고 없이도 간단하게 블로그 글에 코드를 보기 좋게 넣을 수 있다.

 

블로그 글에 코드 보기 좋게 넣기

1. Color Scripter.

 코드를 보기 좋게 변경해주는 사이트.

 Color Scripter 바로가기

 

 사이트에 접속하면 바로 코드를 입력할 수 있는 화면이 나타나며 여기에 코드를 복사해서 붙여넣으면 각 코드에 맞는 색을 자동으로 변경하여 보여주며 옵션을 이용하여 색이나 글꼴 등을 변경할 수 있다.

 변경된 코드를 확인했다면 HTML로 복사 버튼을 클릭하여 생성된 html 코드를 블로그의 html 화면에서 넣어주면 된다.

 (<div><table>형태의 코드가 생성된다.)

코드 스크립터 화면

 생성된 html 코드를 블로그에 넣으면 아래와 같은 형태로 보인다.

1
2
3
4
5
6
7
8
9
10
body{
 font: 15px gulim, Sans-serif;
 color: #000; /*08a 본문 글자 색*/
 background-image: none;
 background-position: left top;
 background-repeat: no-repeat;
 background: #F2F4F7;
 margin: 0;
 line-height: 1.8;
}
cs

 

2. Carbon.

 Color Scripter 사이트와 같이 코드를 보기 좋게 변경해주는 사이트.

 코드를 보기 좋게 변경한 뒤 이미지 형태로 붙여 넣을 수 있기 때문에 상황에 따라서는 Color Scripter보다 더 유용하게 사용 가능한 사이트이다.

 Cabon 바로가기

 

 사용방법 역시 Color Scripter과 비슷하다.

 사이트에 접속하여 코드를 붙여 넣으면 자동으로 코드에 맞는 색으로 변경하여 보여주며 옵션을 이용하여 글꼴이나 색을 변경, 코드의 여백 등을 변경할 수 있다.

 변경된 코드를 확인했다면 이미지로 클립보드에 복사하여 블로그에 넣으면 된다.

카본 화면

 생성된 이미지는 아래와 같은 형태로 보인다.

카본 코드 변환 이미지

3. 티스토리 코드 블록.

 티스토리 에디터의 코드 블록을 이용하면 코드를 보기 좋게 넣을 수도 있다.

 플러그인을 추가하면 에디터에서 바로 넣을 수 있기 때문에 티스토리 블로그에서 코드를 넣는 경우라면 보다 간편하게 사용할 수 있을 것이다.

 

 플러그인에서 [코드 문법 강조] 플러그인을 찾아서 추가하도록 하자.

 (플러그인을 사용하지 않으면 코드블럭을 사용해도 실제 글에는 적용되지 않는다.)

티스토리 플러그인 추가

 글쓰기 에디터 상단의 ,,,(더보기) 메뉴를 열고 [코드 블록]을 클릭.

 코드를 붙여 넣고 코드의 종류를 선택한 뒤 확인 버튼을 클릭하면 커서가 위치한 곳에 바로 넣을 수 있다.

티스토리 코드블럭 추가 화면

 

그 외 내용

 티스토리를 사용하고 있다면 에디터에서 제공하는 코드 블록을 사용하는 것이 가장 간단하지 않을까 한다.

 다만 코드 블록은 심플한 만큼 다른 두 사이트를 이용하는 것보다 여러 가지 옵션을 지원하지 않기 때문에 필요하다면 사이트를 이용해서 코드를 넣는 것이 더 좋을 수도 있다.