[티스토리] 코드블럭으로 편리하게 Syntax Highlighter 사용하기 (소스 코드 입력)

 

티스토리 새 에디터가 생기면서 코드블럭 기능이 생겼습니다.

여기에 티스토리의 Syntax Highlight 플러그인을 적용하면 코드에 highlight 컬러가 적용된 결과(코드 문법 강조)를 볼 수 있습니다.

 

티스토리 Syntax Highlight 플러그인 적용하기

코드블럭으로 소스코드 입력하기

(각 단계를 클릭하면 빠르게 해당 위치로 이동할 수 있습니다.)

 

 

 

 

  티스토리 Syntax Highlight 플러그인 적용하기

 

 

티스토리 관리 페이지의 플러그인 메뉴에서 Syntax Highlight 플러그인을 찾습니다.

 

 

 

Syntax Highlight 의 원하는 테마를 선택하고 적용해줍니다.

 

 

불편한 점은, 테마를 적용시켜도 어떻게 나올지 전혀 알 수가 없다는 것입니다.

블로그에서 직접 코드블럭을 포함하여 글을 작성해봐야만 적용된 테마를 볼 수 있습니다. 또한, 테마가 일괄적으로 적용되어서 글마다 다르게 적용할 수 없다는 점입니다.

 

아래 링크는 Syntax Highlighter의 테마 데모를 볼 수 있는 사이트 입니다. 티스토리의 테마와 겹치는 건 Github와 Monokai 테마뿐이긴 하지만, 참고용으로 첨부합니다.

 

http://tutsplus.github.io/syntax-highlighter-demos/syntaxhighlighter.html

SyntaxHighlighter Demo - Default Theme

 

 

 

 

  코드블럭으로 소스코드 입력하기

 

티스토리의 새로운 에디터 입력 페이지에서 더보기를 클릭하여 코드 블록을 선택해줍니다.

 

 

 

코드블럭에 삽입할 코드를 입력할 수 있는 창이 나타납니다. 입력할 언어를 선택하고 코드를 입력한 후 확인을 눌러줍니다.

 

 

 

입력하고 나면 아래와 같이 코드 문법이 강조된 코드블럭이 생겨납니다. 플러그인에서 설정한 테마는 미리보기나 글쓰기를 완료할 후에만 확인이 가능합니다. 위에서도 언급했듯이, 테마 변경은 글 작성 시 불가능하고 플러그인 설정에서만 가능합니다.

 

실제 테마가 적용된 코드블럭입니다. 

 

#include <stdio.h>

int main()
{
	std::cout << "Hello! World!" << std::endl;
}