티스토리 코드블럭 적용 안됨, 이쁘게 넣어보기

티스토리에 코드 블럭을 추가할 수 있는 기능이 있다.

글 작성시 상단에 ... 아이콘을 누르면 확인할 수 있다.

언어까지 선택해서 코드를 넣어주면 이렇게 이쁘게 보이는데 글 작성을 마치고 확인해보면 하나도 적용이 안되어있다.. 이는 플러그인이 적용되지 않아서 그런 거다. 뭐 직접 코딩할 수도 있겠지만 번거로우니 플러그인으로 하는게 빠르고 편하다. 플러그인을 적용하는 방법은 다음과 같다.

스크롤을 좀 내리다 보면 코드 문법 강조가 있다. 해당 플러그인을 적용해주면 ( 해당 글에서는 테마를 '기본'으로 적용했음)

성공!! 이라고 하기엔 코드가 다닥다닥 너무 못생겼다. 줄간격이라도 벌려서 이쁘게 만들자

글 수정하기를 누르고 수정 시 기본 모드에서 HTML모드로 들어간다.

내 코드는 pre 태그안에 code 태그로 감싸져 있는 것을 알 수 있다. code 태그에 간단한 스타일링을 넣자.

code 태그에 직접 스타일을 추가했다. code 태그가 많아지면 해당 방법은 비효율적이지만 일단은 하나밖에 없으니 저렇게 해도 무방하다.

코드 보기가 훨씬 간편해졌다.

수정할 때 코드는 알록달록 이쁜데 수정 완료를 누르고 글에서는 왜이리 못생기게 나오냐 하면 테마가 달라서 그렇다.

글 수정시에 코드 블럭은 사진의 Atom One Light 테마이다. 해당 테마를 적용해주면 글 수정하기 할 때의 알록달록 이쁜 코드가 나오는 것을 확인할 수 있다.

여러 테마들을 다 적용해보고 본인의 취향에 맞는 테마를 적용하면 된다. 

음 나는 아톰 다크!