[Tistory] 인라인 코드 테마 변경하기

티스토리 인라인 코드 테마 변경하기

 

안녕하세요😆

 

오늘은 티스토리의 스킨 편집에서 인라인 코드의 테마를 변경하는 법을 알아보겠습니다.

 

그 전에, 인라인 코드가 뭐냐구요?

 

사실 티스토리 글쓰기에서 기본 모드만 이용하신 분들은 인라인 코드가 뭔지 잘 모를 수 있습니다. 

 

하지만, 마크다운이나 HTML 모드로 작성하면 코드블록과는 살짝 다른 것이 인라인 코드입니다.

 

우선은 마크다운 기준으로 설명을 해 보겠습니다.

 

HTML 모드로 이용하시는 분들은 이미 인라인 코드의 차이를 아실테니 적용 단계부터 해보세요.

 

 

 

---

 

 

마크다운에서 코드블록을 입력하기 위해서는 ```와 ``` 사이에 코드를 입력하면 기존에 설정한 테마대로 코드블록이 생길 겁니다.

 

저 같은 경우 티스토리 국민 테마인 highlight.js에서 ir-black 스타일을 적용하였기 때문에

 

print("hi ^_^")

 

이런 식으로 코드블록이 생성됩니다.

 

하지만 마크다운 모드에서 `와 ` 사이에 뭔가를 입력하면 조금 다른 블록이 생성됩니다.

 

hi ^_^

 

뭔가 코드블록과는 다소 다르고 테마도 다르게 적용되어 있죠?

 

이러한 블록을 인라인 코드라고 하는데, 스킨마다 다를 수 있지만 대충 기본 값은

 

요런 식으로 생겼을 겁니다. 저 같은 경우 css파일에서 따로 테마를 지정해 주었기 때문에 여러분들과 다르게 보일 것이구요.

 

어떠한 스킨에 쓰시냐에 따라, 인라인 코드가 기본 원문과 아무런 차이가 없을 수 있습니다!!(Letter 스킨같은 경우 그렇습니다 ㅠ ㅠ)

이러한 경우는 css에서 아예 code를 처리하는 코드가 하나도 없기 때문이니 천천히 다음부터 따라해보세요~

 

 

highlight.js를 사용하시는 분들은 코드블록은 이쁘게 스타일 지정이 되셨겠지만 이 인라인 코드를 애용하시는 분이라면 이러한 기본 디자인이 불-편 하실수 있습니다.

 

이 인라인 코드의 테마를 변경하는 법은 매우매우 간단합니다.

 

관리자 모드의 스킨 편집 -> css 편집으로 들어가 줍시다.

 

 

css 파일의 경우 스킨마다 다르겠지만, 굉장히 양이 깁니다. 하지만 겁먹지 마세요, 우리는 단순한 코드 몇줄만 추가해 주면 됩니다.

 

대충 저 body 아래 쯤에(body 초기화 코드 이후에) 다음 코드를 넣어 줍시다.

 

/* 인라인 코드*/
code { 
border: 1px solid #eee; 
background-color: #fafafa; color: red; border-radius: 3px; padding: 5px; 
margin: 3px 0; font: 11px 'verdana'; display: inline-block; 
}

 

사실 저 수치들은 기본 값에서 color만 변경해준 값이기 때문에 큰 변화는 없을 것입니다.

 

한번 적용을 누르고 새로고침을 해볼까요? 본문의 인라인 코드 테마가 변경되었다면 성공입니다!

 

이제, 이 코드를 입맛대로 바꾸셔서 이쁜 인라인 코드를 만드시면 되겠네요!

 

 

 

이상으로 포스팅을 마칩니다.