Contentful Rich Text Editor와 Gatsby를 사용하여 예쁜 코드 블록을 렌더링하는 방법

, 이 게시물에서는 Contentful의 리치 텍스트 편집기를 사용하여 예쁜 코드 블록을 렌더링하는 방법을 배우게 됩니다. 이미 알고 있다고 가정합니다.

gatsby-source-contentful을 사용하여 Gatsby 페이지를 Contentful에 연결하는 방법

서식 있는 텍스트 편집기에서 기본 콘텐츠를 렌더링하는 방법, here's a tutorial

그 말로 시작합시다!

게시물 콘텐츠에 코드 스니펫 추가

내장된 code 옵션을 사용하여 게시물에 스니펫을 삽입할 것입니다. 제가 직면한 문제는 Contentful이 Github Flavored Markdown과 같은 스니펫의 언어를 지정하는 것을 허용하지 않기 때문에 이와 같은 작업을 수행할 수 없다는 것입니다. 하이라이트 관리하기:

``javascript
console.log("Hello World")
``

대신, 제가 생각한 것은 스니펫의 언어와 같은 메타데이터에 대한 스니펫의 첫 번째 줄을 사용하는 것이었습니다. 그런 식으로 위의 스니펫은 다음과 같이 작성됩니다.

---
lang:javascript
console.log("Hello World")

나중에 코드에서 이 메타데이터 정보를 처리할 것입니다. 지금은 게시물의 콘텐츠에 추가하겠습니다.

블로그에 코드 강조 표시 추가

확인해보니 지금까지 가장 인기 있는 라이브러리는 PrismJS인 것 같습니다. Gatsby 웹사이트에 추가하기 쉽고 구성하기 쉽습니다.

설치

설치하려면 다음을 실행하기만 하면 됩니다.
npm install prismjs babel-preset-gatsby babel-plugin-prismjs

PrismJS 구성

babel-babel-preset-gatsby 패키지를 설치하여 prismjs 어떤 테마를 사용할지, 정확히 어떤 언어와 플러그인을 우리 쪽에서 지원하고 따라서 사용하지 않는 기능을 포함하지 않을 것인지 알 수 있습니다. 이를 위해 다음이라는 새 파일을 만들어야 합니다. :.babelrc

{
  "presets": [
    "babel-preset-gatsby"
  ],
  "plugins": [
    [
      "prismjs",
      {
        "languages": [
          "javascript",
          "css",
          "markup"
        ],
        "plugins": [
          "show-language",
          "line-numbers"
        ],
        "theme": "tomorrow",
        "css": true
      }
    ]
  ]
}

블로그에서 지원할 언어는 위의 스니펫에서 확인할 수 있습니다. javascript, css, markup

지원되는 모든 언어 목록을 보려면 check here

지원하는 플러그인은 show-language 및 line-numbers입니다.

다시 말하지만 지원되는 모든 플러그인을 보려면 check their doc

마지막으로 애플리케이션에서 PrismJS를 활성화합니다.

마지막 단계는 단순히 Prismjs를 호출하여 찾은 모든 <code> 태그에 색상을 지정하는 것입니다. 블로그 게시물을 렌더링하는 React 구성 요소에서 useEffect 내부의 함수를 호출하여 수행했습니다.

useEffect(() => {
  // call the highlightAll() function to style our code blocks
  Prism.highlightAll();
}, []);

올바른 HTML 태그 렌더링

서식 있는 텍스트 편집기의 기본 콘텐츠를 렌더링하는 코드 섹션에서 renderRichText 함수에 새 옵션을 추가해야 합니다. 이 새 옵션은 키renderMark 내부의 속성입니다(코드 블록은 mark 콘텐츠가 있는 언어로), 다음과 같이 표시됩니다.

renderRichText(post.body, {
  renderMark: {
    [MARKS.CODE]: (text) => {
      return (
        <pre>
          <code>{text}</code>
        </pre>
      );
    },
  },
});

위의 코드에서 Contentful 서식 있는 텍스트 편집기 콘텐츠 내에서 code 블록을 찾을 때마다 <pre><code> 태그 내에서 텍스트를 렌더링합니다. 이것이 Prismjs가 우리 코드가 예상하는 방식입니다.

코드 스니펫에서 언어 추출

이제 우리는 코드 스니펫의 첫 번째 줄에서 언어를 추출하려고 합니다. 나중에 이상한 동작을 피하기 위해 o 라인을 살펴보고 다음 정규식^lang:(\w+)을 사용하여 코드 스니펫을 테스트합니다.

표현식이 일치하지 않으면 기본code 블록

을 렌더링합니다.

그렇지 않으면 멋진 Prismjs 요소

를 렌더링합니다.

최종 코드

renderRichText(post.body, {
  renderMark: {
    [MARKS.CODE]: (text) => {
      const regex = /^lang:(\w+)/;
// If the code snippet doesn't have the expected metadata
      if (!regex.test(text)) {
        return <code>{text}</code>;
      }
// Extract the language
      const language = regex.exec(text)[1];

// Remove the first line to avoid including metadata in the rendered version
      return (
        <pre>
          <code className={`language-${language} line-numbers`}>
            {text.split("\n").slice(1).join("\n")}
          </code>
        </pre>
      );
    },
  },
});

영상