less than 1 minute read


블로그를 만들다 보니 제가 사용하는 코드블록이 다른 블로그의 코드블록에 비해 뭔가 허전한 느낌이 들었는데, 코드블록에 줄번호랑 텍스트 컬러가 적용이 안 되어있었습니다.
찾아보니까 간단하게 적용 가능한 부분이어서 오늘은 코드블록에 줄번호를 추가하고 테마(?)를 적용하는 방법을 포스팅 해보도록 하겠습니다.

우선 마크다운에서 코드블록을 사용하는 방법은 공백 4칸 이후 텍스트를 입력하거나 (“ ``` “)으로 블록을 지정해서 텍스트를 입력하는 방법이 있습니다. 여기서 코드블록 텍스트에 색을 입히고 싶다면 언어형식을 지정해주면 되는데 아래와 같이 적용해주시고, 여러가지 코드 스타일이 있으니 필요한 스타일을 찾아 사용하시면 됩니다.


ex) JAVA 테마 사용

1
2
3
4
5
```java
public void main(){
    System.out.print("Hell World");
}
```
1
2
3
public void main(){
    System.out.print("Hell World");
}


ex) JS 테마 사용

1
2
3
4
5
```js
function main(){
    console.log("Hello World");
}
```
1
2
3
fucntion main(){
    console.log("Hello World");
}


두번째로 코드블록에 줄번호를 적용하는 방법입니다. 이 것 역시 굉장히 간단합니다. 폴더를 찾아보시면 _config.yml 파일이 있으실겁니다. 파일을 열어 제일 하단에 아래 코드를 넣어주시고 적용해주시면 코드블록에 줄 번호가 생긴것을 볼 수 있습니다.

1
2
3
4
5
6
markdown: kramdown
kramdown:
    highlighter: rouge
    syntax_highlighter_opts:
        block:
            line_numbers: true

이상으로 간단히 코드블록을 수정하는 방법에 대해 알아봤습니다.

감사합니다.