티스토리 코드블럭 변경하기 (폰트,하이라이트)

코드 폰트 변경하기

티스토리 블로그 관리자 → 스킨편집 → html편집 → CSS 클릭 → 아래 code 전체 붙여넣기

❗️코드를 붙여넣기 전에 CSS 화면에서 찾기(cmd + F)로 code 가 있는지 먼저 확인해주세요!

    code 라는 스타일이 있다면 해당 중괄호 { } 안에 아래 코드를 붙여넣어주세요.

/* 코드 전체 스타일 */
code {
  font-size: 14px;
  line-height: 1.5em;
  font-family: Menlo, Monaco, 'Courier New', monospace;
  tab-size: 2;
}

 

1.  코드 탭 사이즈 변경

- 기본 탭 사이즈는 스페이스 4번으로 설정되어 있습니다.

- 보통 코드 탭 사이즈로 많이 사용되는 스페이스 2번은 tab-size:2; 로 변경할 수 있습니다.

code {
  tab-size: 2;
}

<!-- 코드 블럭 탭 사이즈 테스트 -->
<div class="container">
	<span>탭 1번</span>
  <span>스페이스 2번</span>
    <span>스페이스 4번</span>
</div>

 

2.  코드 폰트사이즈 변경

- font-size 는 글자 크기를 변경할 수 있습니다.

- line-height 는 글자 높이를 설정할 수 있습니다.

   ( px 단위도 가능! → line-height: 20px; )

/* 코드 전체 스타일 */
code {
  font-size: 14px;
  line-height: 1.5em;
}

 

3.  코드 폰트 종류 변경

- VScode 에서 사용하는 폰트를 적용했습니다.

- 다른 다양한 폰트를 구글폰트를 연결해서 사용할 수 있습니다. Google Fonts

/* 코드 전체 스타일 */
code {
  font-family: Menlo, Monaco, 'Courier New', monospace;
}

 

---

코드 하이라이트 변경하기

티스토리 블로그 관리자 → 플러그인 → 코드 문법 강조 → 테마 선택 → 변경사항 적용

- 제가 추천하는 테마는 Darcula 입니다!

- 이외에도 highlightjs 를 통해  더욱 다양하게 꾸밀 수 있습니다.