Skip to main content

clean blog 지킬 테마에서 코드블럭 하이라이터 설정하기


최근 깃허브를 이용해서 블로그를 시작하였는데, 지킬 무료 테마를 찾던중에 Clean Blog Theme 가 맘에 들어서 적용했다.

하지만 사이트를 동작시켜보니 코드블럭을 쓰더라도 자동으로 하이라이팅이 되지 않는 문제가 있어서 구글링을 통해 해결해 보았다.


적용전

적용전


1. ruby 다운로드 및 설치​

설치후 터미널 실행후 rouge 설치

gem install rouge

2. 코드블럭 테마 선택​

rougify help style 을 입력하고 테마 중 하나 선택

available themes:
  base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, bw, colorful, github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, magritte, molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip

3. 테마, 경로, 파일이름 설정​

css 내용만 복붙할거라 저장경로는 어디로 하든 상관 없다.

rougify style base16.dark > highligter.css

4. scss 파일 수정​

아래 경로로 들어가서 파일 하단에, 다운받은 highligter.css 코드를 전부 복붙한다.

assets/vendor/startbootstrap-clean-blog/scss/_bootstrap-overrides.scss


5. _config.yml 에 코드 추가​

highlighter: rouge

적용후

적용후


추가1 : 코드블록 가로 스크롤 제거​

자동줄바꿈 적용전

적용전


아래 경로에 추가로 아래의 코드를 넣어주면 줄바꿈이 적용된다.

assets/vendor/startbootstrap-clean-blog/scss/_bootstrap-overrides.scss
pre.highlight {
  white-space: pre-wrap;
}

자동줄바꿈 적용후

적용후