평생 공부만 해야할듯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이전글에선 티스토리 에디터 업데이트가 되고난 후에 Color Scripter 붙여넣기가 정상적으로 되지 않았던 문제에 대해서 작성하였습니다.

https://gigas-blog.tistory.com/128

이번글에선 티스토리 업데이트가 되고 나서 강력한 기능인 코드블럭에 대해서 알아보겠습니다.

글쓰기 화면으로 이동하여 새로운 에디터를 사용하고 계시다면 아래와 같은 화면이 보이게 됩니다.

상단의 더보기 버튼을 클릭합니다.

여러가지 메뉴들이 펼쳐지는데 코드블럭 메뉴를 클릭합니다.

아래와같이 Color Script 처럼 코드를 입력하는 화면이 보여지게 됩니다.

여러가지 코드 설정도 가능합니다.

코드에 맞게 색상이 표현됩니다.

삽입을 할 코드를 붙여넣고 확인을 클릭합니다.

그러면 이전화면으로 전환되며 아래와 같이 코드가 깔끔하게 붙여지는것을 확인할 수 있습니다.

기존에 Color가 입혀진 코드를 입혀본적도 있지만 다른사이트를 거치지 않고 티스토리 에디터에서 바로 삽입을 할 수 있다는 장점이 있습니다.

몇번의 설정없이 바로 사용하기에 정말 좋은 방법인것 같습니다.