본문 바로가기
DEVELOPER HARRY/Good to know (ERROR, Shortcuts)

#1 소스 코드 하이라이터(Color Scripter)

by 갈색토마토 2020. 12. 1.

안녕하세요. Harry입니다.

 

IDE를 이용하여 코드를 작성 후에 이런 하얀 바탕의 게시글에 글을 옮겨 오다 보면 굉장히 낯설게 느껴지더라고요..

그래서 오늘은 이런 하얀 바탕에도 IDE의 환경처럼 보이게 해주는 꿀팁(?!)을 소개해드리려고 합니다!


#1. Color Scripter
티스토리에 적용하는 법

color scripter 페이지 이미지#1

아래 링크를 클릭하여, Color Scripter 홈페이지로 이동합니다.

colorscripter.com/

 

highlight.js

Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.

highlightjs.org

 

코드를 복사해서 붙여넣기

특정 언어 형식이나 배경 색상을 원한다면, 아래 리스트 박스에서 언어와 배경 그리고 스타일 패키지를 선택하도록 합니다.

 

저는 검은 배경을 선호하여, Sublime text으로 설정하였습니다.

원하는 코드를 위의 이미지처럼 복사하여 붙여 넣으면, java 언어에 적합한 코드 하이라이터가 적용이 됩니다.

 

세부 설정하기

 

# 줄번호 복사 : 왼쪽에 출력되는 줄번호를 가지고 오고 싶은 경우

# HTML 태그 자체 복사 :

복사하여 가져온 코드를 클립보드에 옮기기 위한 설정

 

 

 

 

 

 

 

 

 

 

체크 박스를 설정하여 저장을 합니다.

 

코드 게시글에 가져오기 

우측 하단에 클립보드에 복사를 클릭 후 HTML 코드를 복사합니다.

 

티스토리로 넘어와 게시글 작성에 있는 

기본 모드, 마크다운, HTML 중 HTML을 선택하고,

클립보드에 바로 복사 기능으로 가져온 HTML 코드를 직접 복사 붙여 넣기 합니다.

위와 같이 원하는 위치에 복사 붙여넣기 후, 다시 기본 모드로 돌아오면!!

아래와 같이 소스코드 하이라이터가 적용된 걸 확인할 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Controller
@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
public class BoardController {
 
    private BoardService boardService;
    
    @GetMapping("/list")
    public void getList(Model model) {
        
        log.info("list");
        List<BoardVO> list = boardService.getList();
        list.forEach(board -> {
            log.info(board);
        });
    
        model.addAttribute("list", list);
    }
 
    @GetMapping("/register")
    public void registerForm() {
        
    }
}
cs

 

 

끝!!


 

 

이상 더욱 유익한 정보를 가지고 오도록 하겠습니다.

Harry 올림

댓글