Syntaxe mettant en évidence (et plus!) Avec Prism sur un site statique

Ce didacticiel montre comment intégrer la syntaxe PRISM.js sur un blog suivant.js, y compris les numéros de ligne et la mise en évidence de ligne. Nous tirons parti du plugin remark-prism et de certains CSS / JavaScript personnalisés pour les fonctionnalités avancées.

La construction d'un blog Next.js nécessite souvent des extraits de code bien formatés. Ce guide vous montre comment réaliser la mise en évidence de la syntaxe, les numéros de ligne et la mise en évidence de la ligne individuelle à l'aide de Prism.js et du plugin remark-prism . Bien que certains aspects soient plus complexes que prévu, cette procédure pas à pas fournit des solutions.

Prérequis:

Ce tutoriel utilise le démarreur de blog suivant.js, mais les principes s'appliquent à d'autres cadres. Installez le démarreur et Prism.js:

 npm je remarque le primaire

Intégration de base Prism.js:

Activez remark-prism dans votre fichier markdownToHtml (généralement situé dans /lib ):

 import {remarque} de "remarque";
Importer HTML à partir de "Remark-HTML";
Importer un remarquable à la "remarque-risque";

Exporter la fonction Async Default MarkdowtoHtml (Markdown) {
  const Résultat = attendre remarque ()
    .Use (html, {Sanitize: false})
    .Use (RemarkPrism, {Plugins: ["Line-Numbers"]})
    .Process (Markdown);
  return result.toString ();
}

Vous devrez peut-être ajuster l'utilisation remark-html en fonction de votre version. Importer Prism CSS en pages/_app.js :

 importer "prisrishjs / themes / prim-tomorrow.css";
Importez "PrismJs / Plugins / Line-Numbers / Prism-Line-numbers.css";
import "../styles/prism-overrides.css";

Créez prism-overrides.css pour un style personnalisé.

Ajout de numéros de ligne:

Bien que le plugin line-numbers soit inclus, vous devez inclure le CSS correspondant (comme indiqué dans le Readme de remark-prism ). Vous pourriez avoir besoin d'ajustements comme celui-ci dans prism-overrides.css :

 .Les numbers Span.line-numbers-Rows {
  marge: -1px;
}

Lignes de mise en évidence:

Le plugin Prism.js Line-Highlight n'est pas directement compatible avec remark-prism de la génération de sites statiques. Une solution de contournement utilise CSS et JavaScript. Ajoutez ce CSS à prism-overrides.css :

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

.Les numbers Span.line-numbers-Rows> Span {
  Position: relative;
}

.Les numbers Span.line-numbers-Rows> Span :: After {
  contenu: " ";
  CONTEXTE: VAR (- Highlight-Background);
  Largeur: var (- highlight-width);
  Position: absolue;
  en haut: 0;
}

Ajoutez un attribut de data-line à votre marque<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div> Tags (par exemple, [data-line="3,8-10"] ). Dans components/post-body.tsx , utilisez JavaScript (exemple indiqué, adaptez à votre structure):

 import {useEffecte, useref} de "react";

// ...

const rootRef = useRef (null);

useEFFECT (() => {
  // ... (code à trouver<pre class="brush:php;toolbar:false"> Éléments et lignes de surbrillance à l'aide d'attribut de ligne de données) ...
}, []);

// ... (Fonction HighlightCode pour appliquer des styles basés sur l'attribut de ligne de données) ...

Cela implique l'analyse de l'attribut data-line , obtenant le<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> La largeur de l'élément et la définition dynamique des propriétés personnalisées CSS pour mettre en surbrillance les lignes spécifiées.</pre><div class="contentsignin">Copier après la connexion</div></div>

Ligne mettant en évidence sans numéros de ligne:

Pour mettre en surbrillance les lignes sans afficher les numéros de ligne, ajoutez une classe .hide-numbers et des règles CSS pour masquer les numéros de ligne tout en préservant la mise en évidence.

Fonctionnalité de copie sur clip:

Ajoutez un bouton pour copier des extraits de code. Dans components/post-body.tsx , ajoutez un bouton à chacun<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> élément utilisant une fonction &lt;code&gt;createCopyButton&lt;/code&gt; qui utilise &lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; . Style le bouton à l'aide de CSS.</pre><div class="contentsignin">Copier après la connexion</div></div>

Ce guide complet fournit une solution robuste pour intégrer Prism.js dans votre blog Next.js, permettant une présentation de code améliorée. N'oubliez pas d'adapter les extraits de code à votre structure de projet spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!