티스토리 코드 블럭 서식 만들기

 

글을 작성하다보니 코딩을 위한 코드블럭이 아닌 특정 카테고리를 경로를 표시하기 위한 코드블럭이 필요했다.

찾아보니 HTML로 충분히 표현히 가능해서 정리해본다.

 

 

 

1. 코드블럭 HTML 편집

일단 내가 원하는건 회색 바탕에 빨간 글씨의 코드블럭이다.

<code style="color: #ef5369; background-color: #d5d5d5;">내용</code>

• 원하는 색상 코드표는 네이버에 '색상 팔레트'를 치고 16진수 코드를 가져오면 된다.

 

 

 

2. 적용 방법

- 에디터 우측 상단의 '기본 모드'를 누르면 HTML 항목이 나오는데 이걸 클릭한다.

- 원하는 글에다가 1번의 코드블럭을 넣어주면 이렇게 된다.

 

 

 

3. 서식 지정

이제 원하는 코드블럭도 지정할 수 있게되었고, 색상도 설정할 수 있게 되었다. 하지만 일일이 설정하기에는 귀찮으므로 '서식 지정'을 통해 간편하게 작성해보자.

- 블로그 관리 - 서식 관리 - 서식쓰기를 누른다.

- 서식 제목을 작성하고 에디터 우측 상단의 '기본 모드'를 눌러 HTML항목을 클릭해준다.

- 다음과 같이 변경해준 뒤, 완료를 눌러서 서식 지정을 완료한다.

//기본으로 세팅되어있는 HTML 코드
<p data-ke-size="size16"></p>

//변경한 HTML 코드
<p data-ke-size="size16"><code style="color: #ef5369; background-color: #d5d5d5;">코드 블럭</code></p>

 

 

 

 

4. 결과

- 에디터 우측 상단에 ···을 눌러 서식에 들어가면 다음과 같이 뜬다.

이제 원하는대로 마음껏 코드 블럭을 사용해보자!