Hexo에서 Highlight 변경하기

2020-01-23

⏱ 3 min.

블로그를 사용하다가 코드를 문법에 맞춰 가독성있게 표시해주는 코드 하이라이트 테마가 맘에들지 않았다. 처음 설정때부터 Androidstudio 테마를 사용하고 있었는데, 흰 블로그 배경에 다소 어두운 테마가 들어가다보니 이질감도 있고, 별로 가독성이 좋다고 생각하지 않았다. 평소에도 가독성 있는 텍스트는 흰 배경에 어두운 글자여야 한다는 생각을 갖고 있다.

알고보니 변경 방법이 어렵지 않아서 왜 이제야 바꿨나 싶다.

먼저 하이라이트 파일(.styl)을 다운받아야 한다. 그러나 사실 이미 theme 폴더를 확인해보면 수십개의 하이라이트 파일이 있는걸 확인할 수 있다.

1	/themes/hueman/source/css/_highlight

hexo 블로그 디렉토리에서 위의 경로로 들어가서 맘에 드는 하이라이트 파일을 찾거나 다운받은 하이라이트 파일을 이곳에 넣어둔다.

그 다음엔 [themes] 디렉토리 바로 하위에 있는 _config.yml 파일을 열어보자.

여기서 cutomize: highlight: 에서 바꾸고자 하는 테마로 수정만 하면된다.

# Customize
customize:
    logo:
        width: 180
        height: 70
        url: images/logo-3.png
    theme_color: '#ff7f50' # coral
    highlight: github # 여기를 바꾸면 된다.
    sidebar: left 
    thumbnail: true
    favicon: images/favicon.jpg
    social_links: 
        linkedin: https://www.linkedin.com/in/youngjinmo/
        github: https://github.com/youngjinmo

어떤 테마로 바꿔야할지 모르겠다면 highlight.js 에 들어가서 구경하고 결정하면된다. 각 하이라이트 스타일별 언어가 어떻게 스타일링(?) 되는지 볼 수 있다.

DevHexo