개요

Gatsby에서 만든 블로그의 Syntax Highlight를 Prism으로 변경한다.
코드 제목을 추가합니다.

했던 일

플러그인 설치

% yarn add gatsby-transformer-remark gatsby-remark-prismjs prismjs
% yarn add gatsby-remark-prismjs-title

gatsby-remark-prismjs-title에 대해서는
htps //w w. tsbyys. 오 rg / pa c gaze s / tsby-rema rk-p smjs-chi t /

이미 설치되었습니다.

gatsby-transformer-remark

gatsby-remark-prismjs

prismjs

PRISM에서 좋아하는 테마 다운로드

Download CSS를 선택하면 prism.css가 다운로드됩니다.
다운로드 한 prism.css를 prismjs/themes/prism.css에 넣습니다.

가볍고 아주 좋습니다. 항상 사용하고 있는 solarized dark가 있으면 좋았다.

config

gatsby-config.js 의 plugins에 추가gatsby-transformer-remark 다음의 plugins 에 쓴다.

gatsby-config.js

   {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-prismjs-title',
          `gatsby-remark-prismjs`,
        ]
      }
   }

prism.css 로딩 하기 gatsby-browser.js
gatsby-browser.js

'use strict';

require('./src/assets/scss/init.scss');
require('./static/css/prismjs/theme.min.css');
require('./prismjs/themes/prism.css')

css

참고 : htps //w w. tsbyys. 오 rg / pa c gaze s / tsby-rema rk-p smjs-chi t /
이하 인용.

src/assets/scss/init.scss

.gatsby-code-title {
  display: block;
  position: relative;
  background: #272822;
  width: 100%;
  top: 10px;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}

.gatsby-code-title span {
  display: inline;
  position: relative;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #eee;
  background: #777;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  padding: 3px;
  top: 1px;
}

CSS는 각자 조정한다.

결과

자신은 다음과 같은 느낌이 들었다.

참고 링크

htps //w w. tsbyys. rg / pac 게이 s /가 tsby

htps //w w. tsbyys. 오 rg / 빠 c 가게 s /가 tsby - rk - p smjs - t t / /? = p sm