728x90
반응형

 

개발자 코드 공유를 하려고 Tistory를 작성하게 되었습니다.

 

새로운 에디터가 생성되고 자체적으로 코드블럭이라는 코드작성란이 생겼습니다.

 

이전엔 ColorScript라는 사이트를 이용해서 코드를 깔끔하게 보여주었지만 새로운 에디터에서는 저장을 하면 보여지지 않는 문제가 있었습니다.

 

저장을 하고도 이쁘게 보여지는 방법을 소개하겠습니다.

 

 

 

 

 

새로운 글쓰기를 진행하겠습니다.

 

메뉴에서 코드블럭으로 들어갑니다.

 

 

 

 

특정 언어를 선택하고 코드를 입력합니다.

 

HTML언어를 선택하고 확인 버튼을 클릭합니다.

 

 

 

 

다시 에디터로 돌아와지고 깔끔하게 보이지만 저장을 하면 다르게 보여집니다.

 

 

 

이렇게 아무런 효과도 없이 보여지게 되죠.

 

 

 

 

이젠 저장을 한 뒤에도 highlight 출력을 할 수 있도록 플러그인을 설치해 보도록 하겠습니다.

 

관리자 화면에서 플러그인 메뉴를 클릭합니다.

 

 

 

스크롤을 하다보면 Syntax Highlight 라는 플러그인이 보여집니다.

 

 

 

 

해당 플러그인은 코드블럭으로 작성된 코드를 언어에 맞는 Highlight 를 적용해줍니다.

 

테마를 고정으로 해도 무방하지만 언어에 따라 변경되도록 기본으로 설정하겠습니다.

 

 

 

플러그인 적용을 하고 다시 글로 돌아와보면 Highlight 가 적용된 코드를 볼 수 있습니다.

 

 

 

 

GitHub에 공개된 highlight.js를 직접 필요한 형태로 만들어 사용도 가능합니다.

 

https://github.com/highlightjs/highlight.js

 

highlightjs/highlight.js

Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.

github.com

 

728x90
반응형
728x90
반응형

 

티스토리를 사용하는 대부분의 사용자들이 IT업계에서 일하는 걸로 알고있습니다.

 

그래서 코드 리뷰를 할때 코드를 예쁘게 보여주는 툴을 사용해 올리곤 했었죠.

 

https://colorscripter.com/

 

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

 

 

 

 

하지만 티스토리 에디터가 대규모로 수정되고 문제가 생겼습니다.

 

일단 업데이트 전에는 그냥 붙여넣기만 해도 아래와같이 이쁘게 색상이 입혀진 채로 붙여넣기가 되었습니다.

@SpringBootApplication
public class Application {
 
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
 
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
 

 

 

 

 

 

하지만 업데이트가 되고 난 뒤에 붙여넣기를 하면 아래와 같이 이상하게 보여지게 되었습니다.

@SpringBootApplication

public class Application {

 

    public static void main(String[] args) {

        SpringApplication.run(Application.class, args);

    }

 

}

Colored by Color Scripter

cs

 

 

 

 

Color Scripter 사이트에서 상단에 여러가지 버튼들이 있습니다.

 

세부설정 버튼을 클릭합니다.

 

 

 

 

위와같이 HTML 태그 자체 복사만 체크하고 저장해도 깔끔하게 나오는것을 확인할 수 있습니다.

 

728x90
반응형

+ Recent posts