[GitHub Blog]깃허브 블로그 만들기 - 코드블록(codeblock)

13 Aug 2023 - juno

liquid문법을 코드블록에 써도 렌더링 되는 현상해결 및 언어별 스타일 적용

깃허브 블로그로 포스팅을 할 때 코드블록을 통해 liquid 문법을 있는 그대로 출력하고 싶은데 jekyll에서 렌더링을 한 채로 출력해서 불편함이 있다.

그래서 이 문제를 해결하고자 한다.

그리고 ```(백택)을 이용한 코드블록사용과 언어별 highlight 가 적용되지 않아 불편함이있기에 이 또한 해결하고자 한다.

jekyll - raw-endraw

markdown - pre/code

언어강조 - highlight 언어 - endhighlight

reference

1. Jekyll - raw-endraw

먼저 jekyll 언어는 liquid문법인 raw-endraw 문을 통해서 있는 그대로 출력할 수 있다.

코드:

결과: [GitHub Blog]깃허브 블로그 만들기 - 코드블록(codeblock)

=> page.title이 렌더링되어 front-matter에서 설정한 이 게시글의 title이 출력됨을 확인할 수 있다.

코드:

결과: {{page.title}}

=> page.title이 렌더링 되지 않고 글자 그대로 출력되었음을 확인할 수 있다.

<pre><code>는 마크다운파일을 작성할떄 사용하는 ```(백택)과 동일한 태그이다.

코드블록을 표현할 때 사용한다.

백택을 사용하여 작성하고 페이지 요소를 살펴보면

<pre>
    <code> 
        이렇게 작성되어있음을 살펴볼 수 있다.
    </code>
</pre>

나는 블로그를 만들때 테마를 사용하지 않았기 때문에 코드블록을 사용할때 언어 강조(highlight)가 되지 않는다.

코드

결과

이를 해결하기 위해 먼저 kramdown rauge 라는 gem 파일을 설치해야한다.

gem install kramdown rouge

설치 성공 후 _config.yml 파일에서

highlighther: rouge

를 추가해준다.

그래도 아직 색이 적용되지 않는데 highlighter 테마가 없기 때문이다.

이 테마는 터미널에서 아래 명령어로 받을 수 있다.

rougify style 테마명 > 파일경로

나는 “github” 테마를 _sass/highlight.scss 에 다운받았고

ex) rougify style github > _sass/highlight.scss

assets/css/styles.scss 에 @import "highlight"; 를 추가하여 css를 적용했다.

적용 결과

public class{
    public static void main(string[] args){
        int a = 10;
    }
}

적용 전 결과와 달리 코드블록 주변에 약간 회색의 블록이 생기고 글자별로 색상이 바뀌는 것을 확인할 수 있다.