티스토리 코드블럭 스타일 수정하는 방법_에디터/HTML/CSS/스킨편집/플러그인

4월부터 백엔드 개발 관련 자바 수업을 듣고 있는데, 개인적으로 수업 내용을 정리해놓기 위해

티스토리 블로그에 업로드를 진행하고 있었습니다.

 

그리고 웹개발 관련 내용이다보니 글 내용에 코드 삽입은 필수적인데, 티스토리 블로그에 코드블럭을 삽입하는 과정에서

두가지 마음에 안드는 점을 발견했습니다.

 

그 문제가 무엇이고 어떻게 해결할 수 있는지 나눠보도록 하겠습니다.

---

 

문제1) 코드블럭 스타일이 밋밋하다.

처음 티스토리 에디터 상에서 코드블럭을 삽입했을 때는 스타일이 뭔가 나쁘지 않았습니다.

에디터 편집 중 삽입된 코드블럭 스타일

 

그런데 막상 글을 발행하고 보니 뭔가 디자인이 마음에 안들더라고요..

글 발행 후 실제 코드블럭에 적용된 스타일

 

그럼 이걸 어떻게 해결할 수 있을까요?!

 

문제1 해결법) 플러그인을 통해 코드블럭 스타일 변경하기

1) 티스토리 관리자 페이지 접속 후 '플러그인' 접속

 

2) '검색' 클릭

 

3) '코드 문법 강조' 검색 후 클릭

 

4) 테마 변경 후 저장

 

 

---

 

문제2) 코드 들여쓰기가 너무 과하다

두번째 문제는 코드블럭을 삽입하고 나서 글을 발행해보니 코드의 기본 들여쓰기가 너무 과하게 적용되어 있어서

텍스트들도 다음줄로 밀리게 되는 문제가 생겨서 보기에 별로 좋지 않았습니다.

 

 

일반적으로 코드에디터로 코딩작업을 할 때 들여쓰기는 탭(tab) 한번을 눌렀을 때 스페이스바를 4번 누른 공백 4칸정도로 적용이 됩니다.

그런데 티스토리 코드블럭의 들여쓰기는 그것보다 훨씬 더 많은 공백이 들어가서 가독성이 별로 좋지 않았습니다.

 

그럼 이걸 어떻게 해결할 수 있을까요?!

 

문제2 해결법) 스킨편집에서 CSS 코드 삽입해주기

1) 티스토리 관리자 페이지 접속 후 '스킨편집' 접속

 

2) 우측 '스킨편집' 부분에서 'html 편집' 클릭.

 

 

참고로 'html 편집'을 누르면 아래와 같은 경고 팝업창이 뜨게 되서 HTML/CSS를 잘 모르시는 분들은 걱정되실 수도 있는데,

우리가 할 거는 매우 간단한 코드 하나만 삽입해줄 것이기 때문에 그냥 '확인'을 눌러주시면 됩니다.

 

 

 

3) 'CSS' 편집 탭 클릭

 

4) CSS 코드 제일 하단에 아래 코드 추가 후 '적용' 클릭

code {
	tab-size: 4;
}

 

참고로 이 코드의 의미를 설명드리겠습니다.

 

아래와 같이 우리가 '코드블럭'을 통해 코드를 삽입하게 되면 HTML 문서에는 'code' 태그로 우리가 작성한 코드가 들어가게 됩니다.

 

참고로 CSS는 HTML 문서에 스타일을 적용하는 언어라고 생각해주시면 됩니다.

그래서 우리가 추가해준 코드는 바로 code 태그에 tab을 4칸으로 설정한다는 의미정도로 생각해주시면 됩니다.

 

이렇게 CSS 코드를 삽입하고 '적용'을 누르면 또 아래와 같은 경고팝업창이 뜨는데, 

아무래도 코드로 편집을 한것이다 보니 오류 발생시 직접 수정을 해야 되거나, 티스토리 공식 스킨으로 다시 적용을 해달라는 메세지인데

우리가 편집한 내용은 별로 문제될 부분이 아니라서 이것도 그냥 '확인'을 눌러주시면 됩니다.

 

이렇게 최종 적용을 하고 나서 어떻게 변경이 되었나 한번 볼까요?

 

 

좀 달라진게 느껴지시나요?

 

확실한 차이를 느껴보기 위해 같이 비교를 해보겠습니다.

왼쪽 : 변경 전 - 오른쪽 : 변경 후

 

 

이렇게 코드블럭에 대해서 몇가지 옵션을 변경하고 나니 확실히 코드블럭 삽입 후 보기가 좋아진것 같습니다!

 

혹시 티스토리 블로그에서 코드블럭 삽입할 때 별로 마음에 안드셨던 부분이 있으셨던 분들은 

이 방법으로 조금이나마 해결을 받으셨으면 좋겠네요!