정적 사이트에 프리즘이있는 구문 하이라이트 (및 더 많은!)

이 튜토리얼은 Prism.js 구문을 줄거리 및 라인 강조 표시를 포함하여 Next.js 블로그에 통합하는 방법을 보여줍니다. 고급 기능을 위해 The remark-prism 플러그인 및 일부 사용자 정의 CSS/JavaScript를 활용합니다.

Next.js 블로그를 구축하려면 종종 멋진 코드 스 니펫이 필요합니다. 이 안내서는 PRISM.JS 및 The remark-prism 플러그인을 사용하여 구문 강조 표시, 줄 번호 및 개별 행 하이라이트를 달성하는 방법을 보여줍니다. 일부 측면은 예상보다 복잡하지만이 연습은 솔루션을 제공합니다.

전제 조건 :

이 자습서는 Next.js 블로그 스타터를 사용하지만 원칙은 다른 프레임 워크에 적용됩니다. 스타터와 프리즘을 설치하십시오 .js :

 NPM 나는 비고 프리즘입니다

기본 Prism.js 통합 :

markdownToHtml 파일에서 remark-prism 활성화하십시오 (일반적으로 /lib 에 위치) :

 "비고"에서 {비고} 가져 오기;
"warch-html"에서 html 가져 오기;
"비고-프리즘"에서 비고 수입;

내보내기 기본 비동기 기능 MarkdownToHtml (Markdown) {
  const result = await 것 ()
    .use (html, {sanitize : false})
    .use (wartingprism, {플러그인 : [ "line-numbers"]})
    .Process (Markdown);
  return result.toString ();
}

버전에 따라 remark-html 사용을 조정해야 할 수도 있습니다. pages/_app.js :

 "Prismjs/Themes/Prism-Tomorrow.css"수입;
"prismjs/플러그인/라인-햄버이/프리즘 라인-햄버이 (CSS) 수입;
"../styles/prism-overrides.css";

맞춤형 스타일을 위해 prism-overrides.css 만듭니다.

줄 번호 추가 :

line-numbers 플러그인이 포함되어 있지만 해당 CSS를 포함해야합니다 ( remark-prism readme에 언급). prism-overrides.css 에서 이와 같은 조정이 필요할 수 있습니다.

 .line-numbers span.line-numbers-rows {
  마진 -탑 : -1px;
}

강조 표시 :

PRISM.JS 라인 하이라이트 플러그인은 정적 사이트 생성 제한으로 인해 remark-prism 과 직접 호환되지 않습니다. 해결 방법은 CSS 및 JavaScript를 사용합니다. 이 CSS를 prism-overrides.css 에 추가하십시오.

 : 루트 {
  -하이라이트 백 : RGB (0 0 / 0);
  -Highlight width : 0;
}

.line-numbers span.line-numbers-rows> span {
  위치 : 상대;
}

.line-numbers span.line-numbers-rows> span :: 이후 {
  콘텐츠: " ";
  배경 : var (-하이라이트 백 그라운드);
  너비 : var (-하이라이트 width);
  위치 : 절대;
  상단 : 0;
}

마크 다운에 data-line 속성을 추가하십시오<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div> 태그 (예 : [data-line="3,8-10"] ). components/post-body.tsx 에서 javaScript를 사용합니다 (예시, 구조에 적응) :

 "React"에서 {useEffect, useref} import;

// ...

const rootref = useref (null);

useeffect (() => {
  // ... (찾을 코드<pre class="brush:php;toolbar:false"> 데이터 라인 속성을 사용하여 요소 및 하이라이트 라인) ...
}, []);

// ... (데이터 라인 속성을 기반으로 스타일을 적용하려면 하이라이트 코드 함수) ...

여기에는 data-line 속성을 구문 분석하고 얻는 것이 포함됩니다<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 요소의 너비 및 CSS 사용자 정의 속성을 동적으로 설정하여 지정된 선을 강조 표시합니다.</pre><div class="contentsignin">로그인 후 복사</div></div>

줄 번호가없는 줄 강조 표시 :

줄 번호를 표시하지 않고 줄을 강조하려면 .hide-numbers 클래스 및 CSS 규칙을 추가하여 하이라이트를 유지하면서 줄 번호를 숨기십시오.

사본-클립 보드 기능 :

코드 스 니펫을 복사하려면 버튼을 추가하십시오. components/post-body.tsx 에서 각각의 버튼을 추가하십시오<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; 를 사용하는 &lt;code&gt;createCopyButton&lt;/code&gt; 함수를 사용하는 요소. CSS를 사용하여 버튼을 스타일링하십시오.</pre><div class="contentsignin">로그인 후 복사</div></div>

이 포괄적 인 가이드는 Prism.js를 Next.js 블로그에 통합하여 강화 된 코드 프레젠테이션을 가능하게하는 강력한 솔루션을 제공합니다. 코드 스 니펫을 특정 프로젝트 구조에 조정해야합니다.

위 내용은 정적 사이트에 프리즘이있는 구문 하이라이트 (및 더 많은!)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!