Prism 및 Next를 사용하여 구문을 강조표시합니다.js

너는 아마도 처음부터 너의 블로그를 세우고 싶을 것이다. 너의 사이트는 매우 아름답게 설계되어 있고 모든 것이 매우 좋다. 그러나 블로그 글에 코드가 포함된 것과 관련이 있을 때, 너는 약간의 도전에 직면하게 될 것이다.
문법이 돋보이는 것은 코드의 가독성을 높이는 좋은 방법이다.이 강좌에서, 나는 당신에게 어떻게 사용하는지 PrismJs 와 Next.js 블로그 글에서 코드 블록을 돋보이게 하는 문법을 보여 드리겠습니다.
여보세요, 저는 도슨입니다. 저는 인터넷 개발을 좋아합니다.나는 블로그와 트위터를 써서 인터넷 개발과 나의 최근 프로젝트를 소개한다.만약 당신이 흥미가 있다면 저에게 알려주세요.

왜 PrismJs야?

PrismJS는 브라우저에서 JavaScript를 사용하여 강조 표시된 구문을 사용하기에 적합합니다.PrismJS는 모든 현대 브라우저를 지원합니다.매주 NPMJ의 다운로드 건수는 500만 건을 넘는다.일반 도메인 이름 형식.
PrismJs는 전단 언어를 위한 경량급, 빠른 문법 하이라이트 라이브러리입니다.모든 언어를 확대하고 덮어쓰기 위해 지역사회의 공헌에 달려 있다.강조 표시는 다양한 언어와 주제로 사용자 정의가 가능합니다.
PrismJs의 디자인은 고도로 맞춤형으로 제작이 가능하며 가장 아름다운 색조를 가지고 있으며 확장도 가능합니다.그것은 거의 모든 프로그래밍 언어를 지원한다.
프런트엔드에서 라이브러리를 사용하려면 라이브러리가 클라이언트 (사용자의 브라우저에서) 에서 실행되기 때문에 경량급이어야 합니다.이것은 우리가 반드시 응용 프로그램의 전단에서 경량급 소프트웨어 패키지를 사용해야 한다는 것을 의미한다.

PrismJs 및 Next를 사용합니다.js 구문 강조 표시

PrismJs는 구문 강조 표시 라이브러리입니다.그것의 설계 목적은 가능한 한 컴퓨터 자원을 적게 사용하고 CSS와 자바스크립트를 사용하여 맞춤형 제작을 할 수 있도록 하는 것이다.
이 문서에서는 Next를 사용하여 PRISMJ를 설정하는 방법을 보여 줍니다.js는 블로그 게시물에 간단한 문법 하이라이트를 만들어 줍니다.

그것은 어떻게 일합니까?

먼저 문법이 밝아서 어떻게 일을 하는지 봅시다.
만약에 개인 블로그를 만들고 블로그 게시물을 만들고 싶다면 블로그 데이터를 데이터베이스에 저장할 수 있는 두 가지 옵션이 있다. 그 중 하나는 블로그 내용을 순수한 HTML로 저장한 다음에 사용자가 페이지를 표시할 때 HTML로 돌아가는 것이다Markdown language.
Markdown은 일반 텍스트 서식 구문을 사용하는 경량 태그 언어입니다.그것의 설계 목적은 컴퓨터 프로그래밍 언어 전문가가 아닌 사람들에게 쉽게 읽고 쓸 수 있는 기능을 제공하는 것이다.가격 인하의 목표는 가능한 한 쉽게 읽고 쓰는 것이다.태그 서식이 지정된 문서는 태그나 서식 설명으로 표시된 것처럼 보이지 않도록 일반 텍스트로 게시할 수 있어야 합니다.
가격 인하 문법이 어떻게 작동하는지 모르시면 read it here을 확보하세요.
데이터베이스에서 태그를 가져와 HTML 페이지에 표시하는 것이 우리의 목표이지만, 우리가 이렇게 하면 독자들이 태그 문법을 볼 수 있기 때문에, 이것은 당신이 원하는 일이 아닙니다.
이를 위해, 우리는 React Markdown 이라는 라이브러리를 사용할 것이다. 이것은 가격 인하를 반응 구성 요소 (JSX) 로 바꾸는 라이브러리이다. 이것이 바로 우리가 필요로 하는 것이다.
이것은 당신의 가격 인하 문법을 HTML 문법으로 변환할 것입니다.예를 들어, 이것은 (#에서 h1, ##에서 h2 등) 변환될 것이다. 이것은 현재 우리의 HTML 페이지에 순수한 HTML 문법이 있다는 것을 의미한다. 이것은 이상적인 것이다.
React Markdown은 자동으로 태그 구문 코드 블록<pre>을 태그에 넣은 다음 <code> 태그에 넣습니다. 예를 들면 다음과 같습니다.

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

다음 거 시작해.js 응용

우리는 우선 다음 것을 초기화한다.js 응용 프로그램 npx create-next-app@latest prism-app.이 예에서 (prism 프로그램) 이름 폴더에 넣을 것입니다.
그런 다음 애플리케이션 디렉토리로 이동하여 react-markdown 및 prismjs를 설치합니다.

가격 인하부터 시작하다

React markdown을 사용하여 태그를 분석하여 HTML 태그로 변환합니다.다음은 메서드입니다.

export default function Home ({ markdownContent }) {

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

이렇게 간단합니다. React Markdown은 모든 Markdown 변환을 가장 높은 보안 수준으로 처리합니다. 이것은 사용자가 사용할 수 있는 XSS 공격을 받지 않는다는 것을 의미합니다.

프리즘 테마

다양한 프리즘 테마를 코드에 적용할 수 있습니다.다음은 당신이 그것을 어떻게 사용하는지입니다.
PrismJS GitHub repository로 이동하십시오.당신은 많은 주제를 선택할 수 있다.원하는 것을 선택하고 CSS 파일을 다운로드한 다음 가져오십시오 _app.js.

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

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

export default MyApp

PrismJS로 구문 강조 표시

이제 HTML 페이지와 Prism CSS 파일에 코드 블록이 생겼으니 문법을 강조해서 읽을 수 있고 보기 좋게 할 때가 되었다.
넥스트를 썼으니까.js, 우리는 React 갈고리 useEffect 를 사용할 것입니다. React 구성 요소가 마운트될 때, 모든 문법을 강조하는 함수를 실행할 것입니다.
우리가 실행할 기능은 highlightAll() Prismjs를 가지고 있으며, 자동으로 <pre> 블록과 <code> 블록을 캡처하여 모두 밝게 표시합니다.
또한 PrismJS에서 특정 프로그래밍 언어를 강조 표시할 수 있도록 각 프로그래밍 언어에 대해 JavaScript를 가져와야 합니다.가져오려는 프로그래밍 언어만 가져오고 리소스를 최소화하면 프런트엔드에서 많은 양의 JavaScript를 다운로드하지 않고도 빠르게 실행할 수 있습니다.
JSX는 다음과 같습니다.

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>
  )
}

이렇게현재 당신의 문법 형광등은 반드시 완벽하게 작동해야 합니다.다른 프리즘 주제를 마음대로 시도해 보세요. 어떤 것을 가장 좋아하는지 보세요.
만약 당신이 이 글을 좋아한다면 반드시 저를 주목해 주십시오. 저는 매일 이곳에서 인터넷 개발에 관한 트윗을 쓸 것입니다.
트위터:
웹 사이트: https://www.dawsoncodes.com/