티스토리 블로그에 소스코드 이쁘게 올리기 코드블럭, Color Scripter

자신의 코드들을 정리할 겸~ 관리할 겸~ 개발자나 개발을 공부하는 사람들은 블로그에 자신의 코드와 설명을 올리는 경우가 빈번하게 있다.

뭐 깃허브에 올리기도 하고 네이버블로그, 티스토리, 워드프레스, 미디엄 뭐 등등 여러 방법이 있겠지만 나도 모르게 네이버 블로그처럼 서론이 길었네. 그러면 각설하고 티스토리에 소스코드를 올리는 방법을 알아보자.

 

뭐 아~~무런 생각 없이 올렸을 때는 그냥 코드?? 그냥 이대로 작성하면 안 되나?? 컴파일러에서 그대로 복붙 하면 안 되나? 이런 생각을 하고 올려봤었는데 그게 안되더라..

 

방법은 여러가지 있지만 내가 사용하는 두 가지 방법을 알아본다.

먼저 블로그 관리에 들어간다.

플러그인을 선택하고~ 스크롤 내려서 코드 문법 강조를 찾아서 클릭해준다.

설명을 보면 알겠지만 강조하는 것이기 때문에 필수는 아니다. 요 플러그인을 사용 안 해도 본문에서 코드 블록을 사용할 순 있다.

근데 이거 사용해야 더 이쁘다.

테마는 뭐 기본밖에 안써봐서 나머지는 모르지만 궁금하신 분은 직접 해보세요~

그리고 적용을 누른다. 그리고 글쓰기로 한 번 글을 써보자.

먼저 글 작성에 상단 우측에 ㆍㆍㆍ 버튼을 누른다. 그리고 아래 코드블럭 메뉴를 선택하자.

그리고 저 드롭다운리스트에서 원하는 언어를 선택한다. 언어 종류가 그렇게 많지는 않다.

public class Main{
	public static void main(String[] args){
		Scanner sc = new Scanner(System.in);
	
		String s = "hello";
		
		System.out.println(s);
	}
}

확인을 누르고 글 작성을 하면 코드가 이렇게 보이게 된다.

이렇게 첫 번째 방법을 알아보았고 주로 즐겨 사용하는 두 번째 방법도 알아보자.

이것도 초 간단하다. colorscripter.com/

Color Scripter

요기에 들어가서 코드를 작성하면 된다.

먼저 링크를 들어가 보자.

이렇게 올릴 코드를 마찬가지로 작성한다.

언어는 자동으로 놔두면 알아서 찾아주기 때문에 건드릴 필요는 없지만 원한다면 내가 사용하는 언어로 설정해도 된다.

스타일패키지는 기본으로 사용하지만 본인이 원하는 취향을 골라도 된다.

요렇게 테마를 설정할 수 있다. 배경은 그냥 뭐 기본으로 두고 세부설정은 글꼴 및 크기 제한 등 설정할 수 있다.

아무튼 코드를 다 작성하면 

우측 하단에 HTML로 복사를 클릭한다.

요렇게 되면 Ctrl+c 를 누르고 티스토리 글쓰기로 돌아간다.

상단에 기본모드 메뉴를 클릭하여 HTML을 선택한다.

요렇게 바뀐 글쓰기 창에서 삽입하고 싶은 위치에 Ctrl+v를 누른다. 그리고 기본모드로 돌아와 보면

public class Main{
    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);
    
        String s = "hello";
        
        System.out.println(s);
    }
}

이렇게 깔쌈하게 뜬다.

 

이 밖에 Syntaxhighlighte 플러그인을 사용하는 방법도 있는데 이것은 뭐 html css에 뭐 파일 추가하고 태그 사이에 뭐 작성하고 뭐 그런 귀찮은 짓거릴 해야 돼서 갖다가 버렸다. 혹시 이 방법을 원하시는 분이 있다면 다른 블로그를 참고하시길 그럼 여기까지!