티스토리로 개발 블로그 만드는 방법

깃블로그와 티스토리 블로그 중에서 고민하다가 티스토리가 가장 쉬울 것 같아서 만들어봤는데 좀 헤맸다.

• 문제 상황
  • 마크다운 모드에서 글을 썼는데 코드블록이 이쁘게 나오지 않았다.

진행 과정

블로그 글쓰기에서 기본모드가 아닌 마크다운을 통해 먼저 글을 작성하였다.

테스트 페이지 작성 후 완료를 클릭하였는데 아래와 같이 이쁘지가 않다. 코드블록도 잘 안보인다.

뭐가 잘못 되었나 싶어서 수정을 눌렀는데 수정 페이지 기본모드에서는 딱 아래처럼 멀쩡히 잘 보인다. 수정페이지의 기본모드처럼만 나오면 되는데 수정 페이지에서 완료를 누르고 글 발행을 하면 여전히 코드블록이 잘 보이지 않는다.

해결 과정

블로그 관리 창 들어가기

• 블로그 관리 창은 `본인의 티스토리 블로그 주소/manage` url을 통해 들어갈 수 있다.

블로그 관리 > 플러그 인 > 코드 문법 강조 선택하기

• 블로그 관리 창 왼쪽에 콘텐츠, 댓글 방명록, 통계, 꾸미기 등이 있는데 `플러그인`을 클릭한다.

• 여러가지 플러그인 중에서 `코드 문법 강조` 플러그인을 선택한 후 원하는 `테마`를 선택한 후 `적용`을 클릭 한다.

 

• 테마를 비교해볼 때는 한 개의 창은 내 블로그를 띄우고, 한 개의 창은 관리페이지>플러그인 페이지를 띄워서테마를 바꿔 적용한 후, 내 블로그 글을 새로고침해서 확인하면 테마를 비교해볼 수 있다.

 

 

• Atom One Dark 테마를 선택하여 코드블럭은 이뻐졌다. 다만 `문장앞뒤`라는 단어를 백틱을 이용해서 인라인블럭 처리했는데 잘 안보인다. 이 부분은 스킨을 바꿔주는 방법으로 일단 해결했다.

스킨 선택하기

• 관리창 왼쪽에 꾸미기>스킨변경을 클릭하면 스킨 목록이 나온다.

• 나의 스킨 선택의 기준

  • 티스토리가 기본으로 제공하는 무료 스킨 중에 고른다.

  • 반응형 스킨 중에서 고른다. 반응형 스킨은 사용자의 화면 크기에 맞게 자동으로 화면 구성을 변경해주기 때문에 편리하다.

  • 코드 블럭이 이쁘게 잘 들어 가는 지 확인한다(코드블럭 안에 코드블럭이 들어가는 스킨은 제외하기)

  • 직접 코드를 수정하기에는 힘들어서 기본 설정으로도 인라인블럭이 잘 보이는 것을 고른다.

  • 메뉴 구조가 잘 보이는 지 확인한다. 카테고리를 나눌 것이라서 카테고리가 잘 보였으면 좋겠다.

• 반응형스킨 #2 적용 모습

• 인라인블럭도 잘보이고, 코드블럭도 잘보인다.

• 반응형스킨 Square의 모습

• h3 과 코드블럭이 반응형스킨 #2 적용 모습과 다르다.

• 코드블럭 안에 코드블럭이 들어가서 모양이 좀 이상하다.

• `whatever`스킨의 경우 메뉴를 카테고리별로 추가해줘야 메뉴바에서 카테고리를 볼 수 있다. 메뉴바에 카테고리를 일일히 추가해주기가 불편할 것 같아서 `whatever`스킨은 pass

• `#2` 스킨은 햄버거 버튼을 누르면 카테고리가 보인다. 일단 `#2`스킨으로 티스토리를 시작해보려고 한다.

쉬울 줄 알았던 티스토리 블로그 제작이 생각보다 어려웠다. 막상 해내니까 쉬운 것 같기도 하다.

아직은 코드 수정하면서 블로그를 꾸미는 법을 공부하는 것보다는 요즘 공부하는 것을 얼른 정리하고 싶은 마음이 크다. 코드블럭 테마를 코드를 붙여넣는 방법을 통해 수정하기도 하던데 블로그 글쓰기가 안정화 되면 블로그도 더 이쁘게 꾸며보고 싶다.