Remark.js 구문 형광펜을 빌드하는 방법

이것은 약간의 모험이었고 좋은 방법은 아니었습니다. 나는 이틀 중 더 좋은 시간을 아주 간단해 보이는 일을 하는 데 보냈지만, 평생 알 수 없는 일을 했습니다. 이 게시물에서 코드 강조 표시가 있는 정말 간단한 Markdown 블로그를 구축하려고 하는 같은 경로에 있는 일부 사람들을 돕고 싶습니다. 하지만 저와 달리 그렇게 하는 데 이틀을 보낼 필요는 없습니다.

Remark.js 란 무엇입니까?

Remark JS는 Markdown을 AST(Abstract Styntax Tree)로 구문 분석하는 매우 깔끔한 작은 라이브러리로, 마크다운을 HTML로 변환하고 출력 html에 CSS 클래스를 추가하는 것을 포함하여 모든 종류의 흥미로운 작업을 수행할 수 있습니다. 실제 구문 강조를 수행할 Highlight.js에 쉽게 연결할 수 있습니다. Remark는 더 큰 도구 제품군의 일부입니다. 우산 도구는 Markdown에 연결되지 않은 Unified라고 하며 HTML에 대한 또 다른 하위 파서가 있습니다. 이 세 가지 도구에는 모두 AST 및 출력을 수정하는 데 사용할 수 있는 다양한 플러그인이 있습니다.

따라서 이 작업을 개별적으로 수행하는 방법을 보여주고 나처럼 Next.js에서 웹사이트를 구축하려는 경우 몇 가지 팁을 제공합니다.

1 단계

NPM 또는 Yarn을 사용하여 프로젝트에 unified 또는 remark를 포함해야 합니다.

npm install remark --save

remark-html 도 필요합니다. 이것은 마크다운에서 출력 html을 생성하기 위한 플러그인입니다.

npm install remark-html --save

마지막으로 remark-highlight.js 가 필요합니다. 이것은 Highlight.js 으로 적절하게 형식을 지정하기 위해 코드 블록에 CSS 클래스를 추가하는 역할을 합니다.

npm install remark-highlight.js --save

비고 대신 통합을 설치했다면 문제가 없지만 통합을 사용하는 경우에만 remark-parse 필요합니다.

2 단계

이제 모든 종속성을 설치했으므로 프로세스 체인을 구축할 차례입니다. 간단하게 유지하기 위해 지금은 마크다운 문자열만 사용하여 이 작업을 수행할 것이지만 파일 시스템이나 API에서 마크다운을 로드할 수는 있지만 실제로는 중요하지 않습니다.

import { remark } from 'remark'
import remarkHtml from 'remark-html'
import remarkHighlightjs from 'remark-highlight.js'

function convertMarkdownToHtml() {
    const output = remark()
        .use(remarkHighlightjs) // we can add , {include: ['css']} or exclude: [a list of langages]
        .use(remarkHtml, { sanitize: false })
        .processSync('# Hello!\n\n```

css\nh1{}\n

```')
    return output
}

`

이 줄은 그 모든 것 중에서 가장 중요하고 시간을 많이 소모한 것입니다. 나는 만일 당신이 Sanitize: true로 바꾸거나 그냥 생략하면... 기본적으로 사실일 것이라는 사실을 문서화하는 어떤 것도 찾을 수 없었습니다... 당신은 remarkHighlightjs 하고 있는 모든 것을 잃게 될 것입니다
ts
.use(remarkHtml, {sanitize: false})


I also want to note: you can include or exclude certin languages from your highlighter. I'm not totally sure what the usecase is for this, but it's possible.

ts
.use(remarkHighlightjs, {exclude: ['css', 'html']} )


also you can run process() 대신 processSync() 비동기 호출이 됩니다.

나는 그것이 아마도 매우 기본적인 것처럼 보였지만 슬프게도 잘 문서화되지 않았다는 것을 알고 있습니다. 비슷한 문제로 작업하는 다른 사람들의 혼란이 해소되기를 바랍니다. 이러한 도구가 제대로 작동하지 않는 경우 이러한 도구를 볼 때 한 가지 조언이 제공됩니다. 디버거를 사용하여 코드를 단계별로 살펴보고 예상한 대로 작동하는지 확인하십시오. 일이 눈에 띄게 실패할 수 있습니다.

이 일반 프로세스에 대해 마지막으로 주의해야 할 사항입니다. 이 시스템에서 구문 강조 표시를 사용하려면 원하는 테마와 함께 highlight.js CSS 파일도 포함해야 합니다. 그것 없이는 이 프로세스가 추가할 클래스 이름이 아무것도 하지 않을 것입니다.



Nextjs에 대한 참고 사항

이 프로세스를 사용하여 Next.js 및 정적 마크다운 파일을 사용하여 블로그를 구축했습니다. 현재 Next.js에는 ESM 모듈과 관련된 일종의 문제가 있으므로 두통 없이 발언으로 작업하려면 아래 버전을 사용할 수 있습니다. 그렇지 않으면 이상한 오류와 싸울 수 있습니다.
json
"remark-highlight.js": "^6.0.0",
"remark-html": "^13.0.1",
"remark-parse": "^9.0.0",
"remark":"^9.0.0"
"unified": "^9.2.0"


매우 도움이 되는 몇 가지 리소스

This is a fantastic project and website that I used as a refrence

Also Nextjs has a fantastic blog post on this as well