프리즘 및 Next.js를 사용한 구문 강조 표시

반응형

블로그를 처음부터 구축하고 웹 사이트를 아름답게 디자인하고 모든 것이 훌륭하지만 블로그 게시물에 코드 블록을 포함시키는 경우 몇 가지 어려움에 직면할 수 있습니다.

구문 강조표시는 코드를 쉽게 읽을 수 있는 좋은 방법입니다. 이 튜토리얼에서는 PrismJs를 Next.js와 함께 사용하여 블로그 게시물에서 코드 블록의 구문을 강조 표시하는 방법을 보여드리겠습니다.

안녕하세요, 저는 도슨이고 웹 개발을 좋아합니다. 저는 웹 개발과 최근 프로젝트에 대한 블로그와 트윗을 작성하는데 관심이 있으시다면 팔로우 부탁드립니다.

왜 프리즘Js인가?

 

PrismJS는 브라우저에서 바로 자바스크립트로 구문 강조 표시에 이상적인 선택입니다. 프리즘JS는 모든 최신 브라우저를 지원한다. npmjs.com에서 매주 5백만 건의 다운로드를 받고 있습니다.

프리즘Js는 프런트엔드 언어를 위해 특별히 만들어진 가볍고 빠른 구문 강조 라이브러리이다. 모든 언어를 확장하고 포괄하는 것은 지역사회의 기여에 달려 있다. 하이라이트는 매우 커스터마이징이 가능하며 다양한 언어와 주제를 가지고 있습니다.

프리즘Js 가장 아름다운 색조로 맞춤 제작이 가능하며, 확장도 가능합니다. 그리고 그것은 거의 모든 프로그래밍 언어를 지원한다.

프런트엔드에서 라이브러리를 사용하려는 경우, 라이브러리는 클라이언트 측(사용자 브라우저)에서 실행되므로 경량화되어야 합니다. 즉, 애플리케이션의 프런트엔드에 경량 패키지를 사용해야 합니다.

Next.js와 함께 PrismJs를 사용하여 구문 강조 표시

 

프리즘Js는 구문 강조 라이브러리이다. 컴퓨터의 리소스를 최대한 적게 사용하도록 설계되었으며 CSS 및 JavaScript로 사용자 정의할 수 있습니다.

이 문서는 Next.js로 PrismJs를 설정하고 블로그 포스트에 사용할 간단한 구문 형광펜을 만드는 방법을 보여줍니다.

어떻게 되는 거죠?

먼저 구문 강조 표시가 어떻게 작동하는지 살펴보겠습니다.

개인 블로그를 만들고 블로그 게시물을 만들고자 하는 경우, 블로그 데이터를 데이터베이스 내에 저장할 수 있는 두 가지 옵션이 있습니다. 그 중 하나는 블로그 내용을 순수한 HTML로 저장한 후 나중에 사용자가 페이지를 표시할 때 HTML을 반환하는 것입니다. 더 나은 방법은 마크다운 언어를 사용하는 것입니다.

 

마크다운(Markdown)은 일반 텍스트 서식 구문의 경량 마크업 언어이다. 그것은 컴퓨터 프로그래밍 언어의 전문가가 아닌 사람들이 읽고 쓰기 쉽도록 고안되었다. 마크다운의 목표는 최대한 읽기 쉽고 쓰기 쉽게 하는 것입니다. 인하 형식 문서는 태그나 서식 지정 지시사항으로 표시된 것처럼 보이지 않고 있는 그대로 일반 텍스트로 게시할 수 있어야 합니다.

마크다운 구문이 어떻게 작동하는지 모르면 여기서 꼭 읽어보세요.

목표는 데이터베이스로부터 마크다운을 가져와 HTML 페이지에 보여주는 것이지만 직접 보여줄 수는 없다.

이를 위해 우리는 리액트 마크다운이라는 라이브러리를 사용할 것인데, 이 라이브러리는 마크다운을 정확히 필요한 리액트 컴포넌트(JSX)로 변환하는 라이브러리입니다.

그러면 마크다운 구문이 HTML 구문으로 변환됩니다. 예를 들어, 이것은 (#을 h1로, ##을 h2로 등) 변환하는데, 이는 이제 HTML 페이지에 순수 HTML 문법이 있다는 것을 의미한다.

 

리액트 마크다운은 자동으로 마크다운 구문 코드 블록을

태그 안에 넣은 다음  태그 안에 넣는다.

<pre>
  <code>
      Your code here
        </code>
        </pre>
        ```

        ### Next.js 앱 시작

        먼저 npx create-next-app@latest prism-app을 사용하여 Next.js 애플리케이션을 초기화한다. 이 경우 명명된 폴더에 넣겠습니다(prism-app).

        그런 다음 응용 프로그램의 디렉토리로 이동하여 react-markdown 및 prismjs를 설치합니다.

        <div class="content-ad"></div>

        ### 반응 마크다운부터 시작

        리액트 마크다운을 사용하여 마크다운을 구문 분석하여 HTML 태그로 변환합니다. 방법은 다음과 같습니다.

        ```js
        export default function Home ({ markdownContent }) {

          return (
              <div className='container'>
                    <ReactMarkdown children={markdownContent} />
                        </div>
                          )
                          }
                          ```

                          이처럼 간단한 경우, Ract Markdown은 모든 마크다운 변환을 최고 수준의 안전성으로 처리하므로 사용자가 사용하고자 할 수 있는 XSS 공격으로부터 안전합니다.

                          ### 프리즘 테마

                          <div class="content-ad"></div>

                          당신의 코드에 적용할 수 있는 다양한 프리즘 테마가 있습니다. 여기 그것들을 사용할 수 있는 방법이 있습니다.

                          프리즘으로 이동JS GitHub 저장소입니다. 원하는 테마를 선택하여 CSS 파일을 다운로드한 다음 _app.js 파일로 가져올 수 있습니다.

                          ```js
                          import '../styles/globals.css'
                          import '../styles/prism-one-dark.css'

                          function MyApp ({ Component, pageProps }) {
                            return <Component {...pageProps} />
                            }

                            export default MyApp
                            ```

                            ### 프리즘을 사용하여 구문 강조 표시JS

                            이제 HTML 페이지와 Prism CSS 파일에 코드 블록이 있으므로, 독자가 더 읽기 쉽고 아름답게 만들기 위해 문법을 강조해야 합니다.

                            <div class="content-ad"></div>

                            Next.js를 사용하므로, React hook useEffect를 사용하고, React 컴포넌트가 마운트될 때 함수를 실행하여 모든 구문을 강조 표시하겠습니다.

                            우리가 실행하려는 함수는 모두 하이라이트()이며, 이것은 자동으로 <pre> 블록과 <code> 블록을 잡고 모두 하이라이트 할 것이다.

                            우리는 또한 프리즘을 위해 각 프로그래밍 언어의 자바스크립트를 가져와야 한다.JS는 특정 프로그래밍 언어를 강조 표시할 수 있습니다. 가능한 한 적은 리소스를 가져오려는 프로그래밍 언어만 가져올 수 있으므로 사용자가 많은 양의 자바스크립트를 다운로드하지 않아도 프런트엔드를 빠르게 만들 수 있습니다.

                            JSX는 다음과 같아야 합니다.

                            ```js
                            import { useEffect } from 'react'
                            import Prism from 'prismjs'

                            require('prismjs/components/prism-javascript')
                            require('prismjs/components/prism-css')
                            require('prismjs/components/prism-jsx')

                            export default function Home ({ markdownContent }) {
                              useEffect(() => {
                                  Prism.highlightAll()
                                    }, [])

                                      return (
                                          <div className='container'>
                                                <ReactMarkdown children={markdownContent} />
                                                    </div>
                                                      )
                                                      }
                                                      ```

                                                      <div class="content-ad"></div>

                                                      이제 구문 형광펜이 완벽하게 작동해야 합니다. 다른 프리즘 테마를 사용해 보고 어떤 것이 가장 마음에 드는지 확인해 보십시오.

                                                      이 글이 마음에 드셨다면 제가 매일 웹 개발에 관한 트윗을 쓰는 트위터에서 저를 팔로우하는 것을 잊지 말아주세요.

                                                      트위터: https://twitter.com/DawsonCodes

                                                      웹사이트: https://www.dawsoncodes.com/