블로그를 만들었지만, 코드블럭 테마가 아무래도 마음에 들지 않습니다. 평소 어두운 테마에서 코딩을 하다가 밝은 코드를 보다보니 눈도 아프도 익숙하지도 않은게 여간 거슬립니다.

바꾸기로 마음먹습니다.

  1. 색상 테마 뜯어고치기 : One-Dark Color Theme from Atom

예쁘고 보기 편한 코드블럭테마를 찾던 중, 그냥 Atom에서 즐겨 사용하던 One-Dark 테마를 적용하기로 마음먹었습니다. 소스코드는 제 github에 올려놓았으니, 참고하시길 바랍니다.

Atom 에서는 Syntax테마로 syntax.less를 사용합니다. 이것을 이용해서 지킬에 적용할 수 있는 syntax.css파일을 간단하게 만들었습니다. 이렇게 만든 syntax.css파일을 assets/css/폴더에 넣어줍니다. 그리고 _data/assets.yml 파일에 다음을 추가합니다.

css:
...
+  - /assets/css/syntax.css
...

끝!

  1. 폰트 바꾸기

폰트 역시 마음에 들지 않습니다. 코딩하기 좋은 폰트는 여러가지가 있지만, 한국 네이버에서 열심히 만든 D2Coding폰트도 좋습니다. 특히 한글, 영어간 밸런스를 중요하게 맞추었다는게 큰 장점입니다.

다운받습니다.

D2Coding 폰트를 웹폰트로 만들어 주신 능력자 joungkyung님께 감사드립니다. HTMLheader에 딱 한 줄 추가해 줍니다.

<link href="http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css" rel="stylesheet" type="text/css">

이제 css를 손보아야 합니다. 위에 추가했던 syntax.css에 다음과 같은 코드를 추가합니다. <!– 코드블럭에 관련된 css는 <pre> 안의 <code>에 있습니다.

열심히 찾아봅니다. 저같은 경우는 코드블럭에 대한 css가 없어서 새로 아래 코드를 추가해줬습니다. –>

syntax.css

.highlight,pre.highlight{
+font-family: 'D2 coding', "Consolas", monospace;
background:#222222;color:#aab1bf;}

Comments

Eungbean Lee's Picture

About Eungbean Lee

Lee is a Student, Programmer, Engineer, Designer and a DJ

Seoul, South Korea https://eungbean.github.io