[정보] 블로그에 소스 코드 추가하기 2 : 코드 블럭

소스코드 하이라이팅 2 코드블럭

 

Visual Stsudio, Sublime Text 등 자신의 코드를 보기 좋게 해주는 기능인 코드 하이라이트, 프로그램을 이용하지 않고 블로그 내에서도 각 언어 별 코드의 문법에 따라 하이라이트 해주고 싶다면 어떻게 할까요? 다양한 방법이 있지만 이번에 소개할 방법은 티스토리 블로그에서 제공하는 기능으로 하이라이트를 하려고 합니다. 이 기능은 티스토리 새로운 에디터에서 제공하는 정말 간편한 기능인데요.

 

 

블로그 관리>플러그인

가장 먼저 자신의 블로그 관리에서 플러그인을 눌러 플러그인 설정하는 창으로 이동합니다. 유튜브 동영상 넣기, 키워드 출력, 텐핑, 페이스북 소셜, 파피콘 등 다양한 플러그인들이 보이는데요. 그중 Syntax Highlight라고 그림이 있는 "코드 문법 강조"를 눌러주세요.

 

 

코드 문법 강조 플러그인

코드블럭에서 다양한 테마를 지정할 수 있는데요. Atom One Dark, Atom One Light, Github, Monokai, Darcula, Visual Studio, Xcode, 등 다양한 테마가 있네요. 저는 그중 눈에 잘 보이는 Atom One Dark를 선택했습니다. 원하는 테마를 선택했으면 적용을 눌러주세요.

 

 

플러그인 적용 완료

플러그인 적용이 완료가 됐는지 확인하기 위해

코드 문법 강조가 사용 중으로 바뀌었는지 확인해주세요.

사용 중으로 바뀌었면 코드 하이라이트를 사용할 수 있습니다.

 

 

글 작성하기

코드를 사용해보기 위해 바로 글 작성을 해보겠습니다.

그림에서 코드블럭을 눌러주세요.

 

 

코드블럭 삽입

코드를 작성하는 창이 떴다면 자신이 원하는 언어를 선택합니다. 기본은 HTML이고 CSS, Javascript, Python, Java, C++, Kotlin, Swift, PHP, Go, 등 다양한 언어를 지원합니다. 우선 기본으로 HTML 코드를 한 번 추가해보도록 하겠습니다.

 

 

 

HTML 스크립트 작성

<p style="color:red;">Hello</p>
<p style="color: red;">Jakadela</p>
<p style='color:red;'>Hi!</p>
<p style='color: red;'>Jake</p>
<p style=color:red;>Hollys</p>

소스코드를 다 작성했다면 확인 버튼을 누르면 위같이 코드블럭이 생성됩니다.  HTML 문법에 맞춰서 자동으로 소스코드가 하이라이팅 됩니다.

 

 

C++ 하이라이팅

#include <iostream>

int main() {
  std::cout << "Hello, JAKADELA!!" << std::endl;
  return 0;
}
​

많이 배우고 많이 사용되는 C++도 문법에 맞게 하이라이팅이 잘됩니다.

 

using UnityEngine;
 
public class JakadelaScript : MonoBehaviour
{
    void Start()
    { 
    }
 
    void Update()
    {
        
    }
  
}
 

제가 앞으로 가장 많이 사용할 언어인 C#도 C++와 뿌리가 같아서인지

C++로 코드블럭을 만들면 하이라이팅이 잘 되네요.

 

그 외에도 이렇게 특정 말을 강조하기 위해
강조 표시로 사용할 수도 있습니다.

 

아래에 다른 방법도 있으니 참고해보세요!

Color Scripter를 이용해서 블로그에 소스 코드 남기는 방법

[정보] 블로그에 소스 코드 남기는 방법 1 : Color Scripter