지킬 블로그의 코드 부분이 일반 글과 구분이 잘 안되서, 이것 저것 검색 중 찾은 타이틀…Add Syntax Highlighting to your Jekyll site with Rouge
역시 영어를 배워야해 그래도 내 방식대로 쉽게 써놔야지
일단 맘에 드는 css 를 찾아 둔다.
어디서 찾느냐? 엄청 많은 리소스 들이 있지만 아래에 가서 간단하게 preview 해보소~
테마를 이것 저것 바꿔보고 자신의 맘에 드는 것의 이름을 알아둔다.
그 이름으로 css를 검색해도 되지만, 이 사이트에서 사용한 css를 복사해서 쓰면 될터
맘에 드는 테마의 css 위치는 아래 디렉토리에서 찾을 수 있다.
CSS 모음 디렉토리 - https://github.com/spsarolkar/rouge-theme-preview/tree/gh-pages/css
자기가 선택한 테마 이름의 css를 가져와서 자신의 css에 추가하면 끝!
지킬 블로그에 css 추가하기
css 추가하는 것이야 누구나 다 아는 것이지만, 아까 레퍼런스한 포스팅에서 가져와보자.
From Add Syntax Highlighting to your Jekyll site with Rouge
Then don’t forget to include the stylesheet in your HTML template (usually within <head></head>):
<link href="path-to-syntax-highlighter-stylesheet" rel="stylesheet">If you saved the syntax highlighter stylesheet as assets/css/syntax.css then you can add the following in your HTML template:
<link href="/assets/css/syntax.css" rel="stylesheet" >
_config.yml 설정 파일에서 세팅하기
_config.yml 설정 파일을 열고 마크다운 설정 부분이 아래처럼 되어 있는지만 확인하자.
markdown: kramdown
highlighter: rouge
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
이제 여기 바로 위에 _config.yml 코드 블럭처럼 이젠 좀 더 다르게 볼 수 있게 되었다. ^–^