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

코드 하이라이트, IT 블로그, 특히 스크립트 코드를 다루는 블로그들은 필수적으로 자신의 블로그에 소스 코드를 남길 수 있어야 됩니다. 사진으로 찍어서 오자니 불편하고 소스 코드를 그대로 글에 복사를 하자니 들어 쓰기 다 어긋나서 가독성이 떨어지고 코드 하이라이트가 되지 않아서 문법이 제대로 작성되었는지도 확인하기가 어렵습니다. 마치 Visual Studio나 Sublime Text를 그대로 옮겨서 내 블로그에 소스 코드를 남길 수 있는데요. 방법은 다양하겠지만 그중 간편한 방법 한 가지인 Color Scripter를 소개해드리겠습니다.

Color Script는 Action Script, ASP, C, C#, CSS, HaXe, HTML, Java, JavaScript, JSP, Objective C, Perl, PHP, Python, Ruby, SQL, Swift, Visual Basic 등 다양한 언어를 지원하는데 블로그에 업로드할 수 있는데 언어에 맞춰서 자동 하이라이트를 지원해서 보기 좋게 소스 코드를 공유할 수 있는 기능이 메인 기능입니다.

옛날에는 PC용도 지원했었는데 2018년 10월부로 지원이 중단된 것으로 보이고 대신 웹용으로 어디에서나 간편하게 사용이 가능합니다. 아래에 웹용 링크를 같이 올려드릴게요! 사이트에 들어가면 바로 소스 코드 입력하는 창이 있고 전반적으로 매우 심플한 구조에요.

https://colorscripter.com/ 

지원되는 소스 코드를 입력하고 자신이 코드에 맞는 언어를 선택하면 자동으로 하이라이팅이 됩니다. 저는 Unity C# 소스 코드를 주로 많이 올릴 예정이기 때문에 유니티 C# 코드를 가져와서 테스트해봤어요.

내가 가져온 소스 코드가 어떤 코드인지 모를 경우 언어>자동을 누르면, 사이트에서 자동으로 인식해서 해당 코드에 맞는 언어로 설정 되도록 할 수도 있습니다.

소스 코드의 스타일도 변경할 수 있는데 저는 눈의 피로도를 좀 덜 하는 어두운색 (서브라임 블랙)을 선택해봤습니다. 자신의 선호도에 맞게 설정하면 되겠습니다.

세부 설정>줄번호 복사 체크 박스로 줄 번호를 표시 안 할 수 있는 방법이 있습니다. 해제하면 블로그를 방문하는 사람들이 스크립트를 복사해 갈 때 드래그하다가 줄 번호도 같이 복사되는 상황을 막거나 스크립트 중간에서 복사해서 줄 번호를 표시하고 싶지 않을 때 사용할 수 있습니다. 그 외에도 글꼴, 줄 간격, 줄번호 시작 숫자, 크기 등 다양한 설정을 할 수 있습니다. 설정이 완료됐다면 저장을 눌러주세요.

이제 블로그에 공유를 해야겠죠? 티스토리 블로그 하시는 분은 아시겠지만 HTML로 짜인 것만 있으면 가져와서 바로 사용하실 수 있는데요. Color Scripter 역시 그 기능을 제공합니다. 바로 복사하거나 메일로 스크립트 공유도 가능합니다. 복사를 하셨다면 올릴 블로그의 HTML로 붙여 넣기를 합니다.

 구 에디터라면 오른쪽 상단에 HTML 체크 박스만 체크해서 붙여 넣으시면 되고, 새로운 에디터를 사용한다면 기본 모드를 HTML로 변경해서 붙여 넣으면 됩니다. 잘 붙여 넣었다면 아래처럼 깔끔하게 소스코드를 뽑을 수 있어요! 번호가 없는 버전과 있는 버전 모두  아래에 뽑아 봤습니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class JakadelaScript : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    { 
    }
    // Update is called once per frame
    void Update()
    {
        
    }
}
 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class JakadelaScript : MonoBehaviour
{
    void Awake()
    { 
    }
 
    void OnEnable()
    {
        
    }
  
}
 

Color Scripter는 Html으로 수정할 수 있는 티스토리뿐만 아니라  script 태그가 지원되지 않아 Syntax HighLighter를 사용할 수 없는 네이버 블로그 등에서도 사용이 가능하다고 하니 다양한 곳에서 유용하게 사용할 수 있겠네요!