Jekyll 기반의 GitHub Page 생성(4)rouge를 이용한 syntax highlighting.12:00.깃페이지만들기(Git블로그)

_config.yml 을 열어보면

highlighter부분이 있다! 지정은했는데 설치를 안한 상태.

 

CMD창 해당blogmaker위치에서 아래 명령어 실행.(루즈설치)

gem install rouge

얼큰우동쌤은 3.20.0 설치.

나는 3.26.0 설치 됨;

 

루즈의 사용가능한 스타일 확인(아래 명령어 실행)

rougify help style

얼큰우동쌤은 monokai.sublime 테마 사용하신다고~

테마 적용 명령어

rougify style monokai.sublime > assets/css/syntax.css

syntax.css파일을 post에 사용할 수 있도록

_layouts/default.html에 아래와 같이 추가

    <!-- 루즈 syntax.css추가 -->
    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}assets/built/syntax.css" />

 

gulp걸프를 사용하여 압축시키자.

gulp css

아..ERROR 왜 에러죠...ㅠㅠ

 

컴파일해서 적용하자.

bundle exec jekyll serve

 

 

 

(영상 9:10) 코드에 루즈적용해보기~

~~~언어javascript python
신텍스하이라이팅적용할 문구
~~~

얼큰우동님의 예제 코드

~~~javascript
function syntaxHighlight(code) {
   var foo = 'Hello World';
   var bar = 100;
}
~~~

 

https://moon9342.github.io/jekyll-rouge

Jekyll 기반의 GitHub Page 생성(4) - rouge를 이용한 syntax highlighting