Sintaks yang menonjol (dan banyak lagi!) Dengan prisma di laman statik

Tutorial ini menunjukkan cara mengintegrasikan sintaks prism.js yang menonjol ke blog seterusnya.js, termasuk nombor baris dan penonjolan garis. Kami akan memanfaatkan plugin remark-prism dan beberapa CSS/JavaScript tersuai untuk ciri-ciri canggih.

Membina blog Next.js sering memerlukan coretan kod yang diformat baik. Panduan ini menunjukkan kepada anda bagaimana untuk mencapai penonjolan sintaks, nombor baris, dan garis individu yang menonjol menggunakan prism.js dan plugin remark-prism . Walaupun beberapa aspek lebih kompleks daripada yang dijangkakan, panduan ini menyediakan penyelesaian.

Prasyarat:

Tutorial ini menggunakan starter blog Next.js, tetapi prinsip -prinsip itu berlaku untuk kerangka lain. Pasang starter dan prism.js:

 NPM I Catatan-Prisma

Integrasi asas prism.js:

Dayakan remark-prism dalam fail markdownToHtml anda (biasanya terletak di /lib ):

 Import {Catatan} dari "Catatan";
Import HTML dari "Catatan-HTML";
mengimport kiriman dari "kata-kata-prisma";

Eksport Fungsi Async MarkDownOHTML (Markdown) {
  Hasil Const = Menunggu Kata ()
    .Use (html, {sanitize: false})
    .Use (freakprism, {plugins: ["line-numbers"]})
    .process (markdown);
  hasil pulangan.ToString ();
}

Anda mungkin perlu menyesuaikan penggunaan remark-html bergantung pada versi anda. Import Prism CSS di pages/_app.js :

 import "prismjs/tema/prism-tomorrow.css";
import "prismjs/plugin/line-numbers/prism-line-numbers.css";
import "../styles/prism-overrides.css";

Buat prism-overrides.css untuk gaya tersuai.

Menambah nombor baris:

Walaupun plugin line-numbers dimasukkan, anda perlu memasukkan CSS yang sepadan (seperti yang dinyatakan dalam readme remark-prism ). Anda mungkin memerlukan pelarasan seperti ini dalam prism-overrides.css :

 .Line-numbers span.line-numbers-rows {
  margin -top: -1px;
}

Menonjolkan garis:

Plugin Line-Highlight Prism.js tidak bersesuaian secara langsung dengan remark-prism kerana batasan penjanaan tapak statik. Penyelesaian menggunakan CSS dan JavaScript. Tambah CSS ini ke prism-overrides.css :

 : root {
  -Highlight-Background: RGB (0 0 0/0);
  -Highlight-width: 0;
}

.Line-numbers span.line-numbers-rows> span {
  Kedudukan: Relatif;
}

.line-numbers span.line-numbers-rows> span :: selepas {
  Kandungan: "";
  Latar Belakang: var (-Highlight-Background);
  lebar: var (-sorotan lebar);
  Kedudukan: Mutlak;
  Atas: 0;
}

Tambahkan atribut data-line ke markdown anda<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Salin selepas log masuk</div></div> Tags (misalnya, [data-line="3,8-10"] ). Dalam components/post-body.tsx , gunakan JavaScript (contoh yang ditunjukkan, menyesuaikan diri dengan struktur anda):

 import {useeffect, useref} dari "react";

// ...

const rootRef = useref (null);

useeffect (() => {
  // ... (kod untuk mencari<pre class="brush:php;toolbar:false"> elemen dan garis sorot menggunakan atribut baris data) ...
}, []);

// ... (fungsi sorotan untuk menggunakan gaya berdasarkan atribut baris data) ...

Ini melibatkan menguraikan atribut data-line , mendapatkan<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Lebar elemen, dan secara dinamik menetapkan sifat tersuai CSS untuk menyerlahkan garis yang ditentukan.</pre><div class="contentsignin">Salin selepas log masuk</div></div>

Talian menonjol tanpa nombor baris:

Untuk menyerlahkan garisan tanpa menunjukkan nombor garis, tambahkan peraturan kelas .hide-numbers dan CSS untuk menyembunyikan nombor garis sambil mengekalkan penonjolan.

Ciri salinan ke papan:

Tambah butang untuk menyalin coretan kod. Dalam components/post-body.tsx , tambah butang ke setiap satu<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> elemen menggunakan fungsi &lt;code&gt;createCopyButton&lt;/code&gt; yang menggunakan &lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; . Gaya butang menggunakan CSS.</pre><div class="contentsignin">Salin selepas log masuk</div></div>

Panduan Komprehensif ini menyediakan penyelesaian yang mantap untuk mengintegrasikan prism.js ke blog seterusnya.js anda, membolehkan persembahan kod yang dipertingkatkan. Ingatlah untuk menyesuaikan coretan kod ke struktur projek khusus anda.

Atas ialah kandungan terperinci Sintaks yang menonjol (dan banyak lagi!) Dengan prisma di laman statik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!