본문 바로가기

SNS와 블로그

티스토리 소스코드 코드블록으로 넣기

반응형

티스토리 소스코드를 넣는 방법을 알아보겠습니다. 티스토리에 IT 관련 내용을 포스팅하다보면 소스코드를 넣어야 할 때가 있습니다. 이럴 때 코드블록과 티스토리 플러그인을 사용하면 소스코드가 색깔로 잘 구분되어서 좋습니다.

그러면 티스토리 소스코드를 코드블록을 사용해서 넣는 방법과 코드블록 색깔을 바꾸는 방법을 알아보겠습니다.

티스토리-소스코드-코드블록-썸네일

 

티스토리 소스코드 넣는 방법

1. 코드블록으로 티스토리 소스코드 넣기

티스토리 에디터에서 점 세 개가 있는 아이콘을 클릭하고 코드블록 메뉴를 선택해서 소스코드를 넣으면 됩니다.

코드블록

 

아래와 같이 코드를 붙여넣고 확인 버튼을 클릭합니다.

소스코드-붙여넣기

 

그러면 아래와 같이 소스코드가 색깔로 구분됩니다. 포스팅을 하다가 프로그래밍 코드를 넣을 때 이렇게 코드블록을 사용하면 눈에 잘 구분되어서 좋습니다.

소스코드-색깔

 

하지만 포스팅을 발행하면 색깔이 사라집니다.

색깔-사라진-소스코드

 

2. Syntax Highlight 플러그인 사용하기

소스코드가 색깔로 구분되려면 티스토리 플러그인에서 Syntax Highlight를 사용해야 합니다.

Syntax-Highlight-플러그인

 

플러그인을 클릭하고 테마에서 원하는 것으로 적용 버튼을 누르면 됩니다. Atom One Dark / Atom One Light / Github / Monokai / Darcula / Visual Studio / Xcode에서 테마를 고릅니다.

티스토리-소스코드-테마선택하기

 

코드 색깔과 배경이 어떻게 다른지 하이라이트 데모 사이트에서 확인합니다.

 

왼쪽 테마에서 원하는 것을 선택하면 오른쪽 화면에 어떻게 보이는지 확인할 수 있습니다.

테마-종류

 

Atom One Dark을 선택하면 아래와 같이 색깔과 배경이 적용됩니다.

소스코드-색깔확인하기

 

3. 티스토리 소스코드 색깔 확인하기

티스토리 플러그인에서 Atom One Dark를 선택했습니다. 그러면 코드블록에서 넣었던 코드가 다음과 같이 색깔이 바뀝니다.

티스토리-소스코드-색깔바뀜

 

이번 포스팅에서는 티스토리 소소코드 넣는 방법을 알아봤습니다. 직접 코드 하이라이트 자바스크립트 파일과 css를 수정해서 원하는 색깔과 배경을 선택할 수도 있습니다. 자세한 내용은 하이라이트 데모 사이트에서 확인하기 바랍니다.

 

HTML, CSS, Javascript를 코드를 보기 좋게 넣기 위해서는 codepen을 이용하면 좋습니다. codepen은 전세계 사람들이 사용하는 사이트로 codepen을 이용하면 웹사이트에서 해당 코드가 어떻게 작동하는지도 확인할 수 있습니다.

 

추천 포스팅

반응형