Tech blog를 돌아다니다보면 다양한 코드블록들을 볼 수 있다. 천편일률적이긴 하지만 다들 개성있는 코드블록으로 아이덴티티를 드러내고있다. 그 중에서도 탐났던게 vscode를 그대로 가져다놓은듯한 코드블록. ::after, ::before를 써가며 CSS로 구현해놨지만 코드 복사 기능이 없는게 너무 아쉬웠다. 이참에 코드 복사 기능과 코드블록의 타이틀 표시 기능을 추가해보고자 한다.

코드 블록 개선

markdown 관련 gatsby plugin이 잘 나와있어서 시간대비 라이브러리를 사용하는것이 여러모로 효율적일것 같았다. 사용한 라이브러리는 gatsby-remark-code-buttons 와 gatsby-remark-code-titles 두가지다.

코드 복사 기능 추가

1. Gatsby 플러그인 설치

• gatsby-remark-code-buttons 플러그인을 설치한다.

  copy

  npm install gatsby-remark-code-buttons 
  # 또는 
  yarn add gatsby-remark-code-buttons

2. Gatsby config 파일 수정

• Gatsby 프로젝트의 gatsby-config.js 파일을 열고, gatsby-transformer-remark 플러그인 구성에 gatsby-remark-code-buttons 플러그인을 추가한다.

  copy

  module.exports = {
    // ...
    plugins: [
      // ...
      {
        resolve: 'gatsby-transformer-remark',
        options: {
          plugins: [
            // ...
            'gatsby-remark-code-buttons'
          ]
        }
      }
    ]
  }

이렇게하면 따로 설정할 것 없이 Gatsby 블로그에 코드 블록 Copy 버튼이 손쉽게 추가된다. 라이브러리를 이용하니 굉장히 간편하게 복사기능이 완성됐다.

하지만 코드블록 copy icon 모양이 너무 못생겨서 맘에 들지않아서 바로 개발자도구 켜서 코드 구조부터 확인해보았다. 스타일이 맘에 들지 않을 경우 관련 엘리먼트 클래스 이름을 통해 직접 css customizing 할 수 있다. gatsby-config 파일에서 plugin option을 통한 설정도 가능하다.

플러그인 옵션 설정

플러그인 페이지 참고

코드 타이틀 표시

코드 타이틀 또한 gatsby 라이브러리를 통해 쉽게 구현 할 수 있다.

1. Gatsby 플러그인 설치

• gatsby-remark-code-titles 플러그인을 설치한다.

  copy

  npm install gatsby-remark-code-titles 
  # 또는 
  yarn add gatsby-remark-code-titles

2. Gatsby config 파일 수정

• Gatsby 프로젝트의 gatsby-config.js 파일을 열고, gatsby-transformer-remark 플러그인 구성에 gatsby-remark-code-titles 플러그인을 추가한다.

  copy

  module.exports = {
    // ...
    plugins: [
       {
           resolve: 'gatsby-transformer-remark',
           options: {
             plugins: [
                 {
                 resolve: 'gatsby-remark-code-titles',
                 options: {
                     className: 'your-custom-class-name',
                 },
                 }, // IMPORTANT: this must be ahead of other plugins that use code blocks
             ],
           },
       },
     ]
  }

3. CSS Customization

config 파일에 지정한 classname을 이용해 css를 커스터마이징 해주면 끝. 라이브러리 문서를 보면 기본 스타일링이 나와있다.

CSS Styling

4. 마크다운에 타이틀 적용

```javascript:title=파일명.js
alert('파일명을 추가했습니다.');
```js

alert('파일명을 추가했습니다.');

마무리

이제야 사용성이 좋아진 코드블록.