color picker로 티스토리 <code> 태그 꾸미기

문장 중간에 인라인 타입 코드 삽입하기

개발 블로그를 운영하면 필연적으로 코드블록을 삽입하게 된다. 티스토리는 코드블록을 지원해서 코드만 붙여넣으면 알아서 블록이 완성된다.

그런데, 나 같은 경우 문제풀이 포스팅을 주로 하다 보니 코드를 설명하기 위해 문장 중간에 inline 타입의 코드를 넣고 싶을 때가 있다. code 이렇게 말이다.

 

방법은 단순하다. 작성 모드를 HTML 편집 모드로 바꿔서 단어를 code와 /code 태그로 감싸주면 된다.

하지만 그냥 적용하면 별로 멋이 안 날 것이다. 코드블록처럼 디자인해서 일관성을 주고 싶은 마음이 든다.

 

나는 memostack님이 배포한 berry 스킨을 사용하고 있는데, 기본으로 code 태그에 css가 적용되어 있다.

하지만 색상이 그라데이션이 가미된 화려한 색상이라 가독성은 좋지 않았다. 어떻게 색상을 바꾸는지 알아보자.

 

블로그를 조금 꾸며보신 분이라면 코드블록에 디자인 요소를 넣기 위해 'Codehighlight JS'를 이용해본 경험이 있을 것이다. 지금도 사용 중일테고.

 

여기에 적용되는 디자인을 코드 태그에도 적용하면 일관성을 줄 수 있다. 

 

 

코드블록 이미지와 color picker 사이트 준비하기

우선 적용할 색상이 무엇인지 알아야 하는데, color picker 사이트를 먼저 찾아보자.

구글에 color picker를 검색해서 나오는 사이트에 들어가보자.

 

 

https://imagecolorpicker.com/

👍 Color Picker online | HEX Color Picker | HTML Color Picker

 

나는 이 사이트가 최상단에 검색되어서 이 사이트를 이용했다. 여기서는 이미지를 업로드하고 이미지에 적용된 색상을 확인할 수 있다.

 

코드블록 디자인이 적용된 부분을 캡처하고 업로드한 뒤 원하는 부분을 picker로 찍어서 색상의 hex값을 알아내면 된다. 배경 색상과 글자 색상 두 가지를 확인하자.

 

 

내가 적용된 codehighlight의 배경 색상은 #22227D 이고, 글자 색상은 #B6C0C9 였다. 이 값을 어딘가에 붙여넣기 해두고 다음 단계로 넘어가자.

 

CSS가 뭔지 아는 사람이 왜 이렇게 확인하고 있을까? 싶다면 정답이다. 처음에 내가 미처 보지 못한 부분이 있었다. 

사실 개발자 도구를 통해서 색상을 확인할 수 있다.

 

색상을 알아내고 싶은 코드블록 디자인이 적용된 사이트에서 F12, 혹은 '우클릭-검사'를 눌러 개발자 도구를 열면

좌측 상단에 화살표 메뉴가 보인다. 이 친구도 picker 역할을 한다.

저걸 클릭하고 코드를 알고 싶은 사이트의 부분을 클릭하면

이렇게 hljs(highlight js) 테마에 적용된 색상을 알아낼 수 있다. 완전히 똑같진 않지만 이 값이 더 정확하다. 이미지는 왜곡이 생길 수도 있으니 말이다.

 

적용하기

이제 적용할 차례다. 티스토리 블로그 관리 - 스킨 편집 - HTML 편집 - CSS로 들어간다.

CSS 메뉴에서 Ctrl+F를 눌러 검색창을 연 다음 '.code'를 검색한다. 마침표는 클래스 선택자인데 code라는 단어만 치면 결과값이 많아서 찾기 귀찮아진다. 스킨마다 다를 것 같지만 나 같은 경우 '.code'로 검색하면 결과값이 단 두 개였다.

 

 

대충 찾다 보면 .article blockquote > code{} 부분에 뭔가가 적용되어 있을 수도 있고, 아닐 수도 있다. 내가 적용한 스킨은 배경 색상만 그라데이션으로 지정되어 있었다.

background: #22272d;	//배경 색상
color: #b6c0c9;		//글자 색상

원하는 색상 코드를 입력하면 끝난다.

 

그런데 글꼴이 마음에 들지 않을 수도 있다. 마찬가지 방법으로 개발자 도구에서 해당하는 부분의 font-family를 찾아서 

background: #22272d;
color: #b6c0c9;
font-family: Consolas, Menlo, Monaco, source-code-pro, 'Courier New', monospace;

이런 식으로 적용하면 된다.