🔨 코드블럭 적용하기!!!

---

일단 처음에는

gatsby-remark-highlight-code | Gatsby

이 플러그인을 적용하려 했습니다.

❓ 이유

이쁘거든요ㅎ

암튼 시키는대로 진행시켜봅시닥!

1. 플러그인 깔기

npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

플러그인을 쓰기 위해선 우리 로컬 디렉토리에 추가해줘야겠죠? 깔아줍니다.

저는 gatsby-plugin-mdx를 써서 굳이 gatsby-transformer-remark 는 필요없지만 혹시 이걸로 하시는 분도 있을테니 코드는 저대로 적어두겠슙미다!

1. gatsby-config.js 에 플러그인 추가

   2-1. gatsby-transformer-remark 를 사용하는 경우

   // In your gatsby-config.js
   plugins: [
     {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
           {
             resolve: `gatsby-remark-highlight-code`,
           },
         ],
       },
     },
   ];

   2-2. gatsby-plugin-mdx 를 사용하는 경우

   // In your gatsby-config.js
   plugins: [
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
         extensions: [".mdx", ".md"],
         gatsbyRemarkPlugins: [
           {
             resolve: `gatsby-remark-highlight-code`,
           },
         ],
       },
     },
   ];

2. js 파일에 코드 추가

   import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
   deckDeckGoHighlightElement();

   당신의 웹사이트의 메인파일에 해당 코드를 추가해줍니다.

   저같은 경우 index.js 가 기본이라서 여기에 추가해줬습니다.

🤮 에러난다..

아무래도 제가gatsby-plugin-mdx 를 사용해서 버전이 안맞든 여러가지 이유 때문에 해당 플러그인을 전혀 적용을 못하는 것 같습니다.

저걸 추가하는 경우 아예 mdx 파일을 못 읽어오는 그런 오류를 발생시켰씁니다!!!…

Gatsby - Error: Cannot find module '..\node_modules\gatsby\dist\utils\babel-loader.js'

이런 뭐 엄청~~~긴 오류가 나면서 그냥 mdx 파일에 구문이 틀렸다는 둥.. 이상한 오류가 났습니다.

그래서 결론

저 플러그인은..못쓴다…

🧐 그럼 우짜나?!!

저희에겐 다른 플러그인이 있습니다.

gatsby-remark-prismjs | Gatsby

이걸 써주면 됩니다.

방법은 위와 동일합니다.

1. 플러그인 설치

   npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs

2. gatsby-config.js 수정

   {
               resolve: `gatsby-plugin-mdx`,
               options: {
                   extensions: ['.mdx', '.md'],
                   gatsbyRemarkPlugins: [
                       {
                           resolve: `gatsby-remark-prismjs`,
                           options: {
                               classPrefix: 'language-',
                               inlineCodeMarker: null,
                               aliases: {},
                               showLineNumbers: true,
                               noInlineHighlight: false,
                           },
                       },
                   ],
               },
           },

   앞 전에 설명드렸듯이 전 gatsby-plugin-mdx 를 쓰기 때문에 위와 같이 수정해준것 입니다!

   옵션은 그냥 제맘대로 설정한거라 원하시는대로 하면 됩니다.

3. 원하는 테마 적용하기

   3-1. gatsby-browser.js 에서 불러오기

   // gatsby-browser.js
   require("prismjs/themes/prism-solarizedlight.css")

   원하는 테마를 골라서 위처럼 로드시켜주면 됩니다.

   3-2. global.css에 직접 적용시키기

   .gatsby-highlight-code-line {
     background-color: #feb;
     display: block;
     margin-right: -1em;
     margin-left: -1em;
     padding-right: 1em;
     padding-left: 0.75em;
     border-left: 0.25em solid #f99;
   }

   위와 같이 직접 테마를 지정해 줄 수도 있습니다.

   하지만 우리 언제 이걸 하고 있슴미까!!!

   기술 구현할 것도 무진장 많아서 미쳐벌이겠는데..

   그래서 테마를 가져다가 쓰면 됩니다~~

   GitHub - PrismJS/prism-themes: A wider selection of Prism themes

   위에서 골라다가 css 파일을 추가하든 긁어서 gloabal.css에 적용시키든 원하는 방식으로 하시면 됩니다!

   

   이쁘져..? 이렇게 적용이 됩니다!! ㅎㅎ

   아쉬운건 원래 처음에 적용하려했던 테마가 맥북모양이어서..

   너무 맘에 들어서 적용시키고 싶었는데 그걸 못 시킨게 넘..넘… 아쉽네여..

   하지만 어찌저찌 해결했으니까요!!

   20000!!!