Syntax -Hervorhebung (und mehr!) Mit Prisma an einer statischen Stelle

Dieses Tutorial zeigt, wie die Prism.js -Syntax in ein NEXT.JS -Blog integriert wird, einschließlich Zeilennummern und Hervorhebung von Zeilen. Wir nutzen das remark-prism -Plugin und einige benutzerdefinierte CSS/JavaScript für erweiterte Funktionen.

Erstellen eines nächsten.js -Blogs erfordert häufig gut formatierte Code -Snippets. Dieser Leitfaden zeigt, wie Sie mit Prism.js und dem remark-prism Plugin Syntax-Hervorhebung, Zeilenzahlen und individuelles Zeilen-Hervorhebung erzielen können. Während einige Aspekte komplexer als erwartet sind, bietet diese Vorgehensweise Lösungen.

Voraussetzungen:

Dieses Tutorial verwendet den nächsten Blog -Starter. Die Prinzipien gelten jedoch für andere Frameworks. Installieren Sie den Starter und Prism.js:

 NPM I Bemerkung-Prism

Grundlegende Prism.js -Integration:

Aktivieren Sie remark-prism in Ihrer markdownToHtml Datei (normalerweise in /lib ):

 importieren {merchens} aus "Bemerkung";
HTML von "Remark-HTML" importieren;
Import-Bemerkungsprismus aus "Bemerkung-Prismus";

Exportieren Sie Standard -Async -Funktionsmarkdowntohtml (Markdown) {
  const result = wartete merking ()
    .use (html, {sanitize: false})
    .use (RemarkPrism, {Plugins: ["Linienzahlen"]})
    .Process (Markdown);
  Rückgabeergebnis.ToString ();
}

Möglicherweise müssen Sie je nach Version die Verwendung remark-html anpassen. Importieren Sie Prism CSS in pages/_app.js :

 importieren "Prismjs/Themen/Prism-morgen.css";
importieren "prismjs/plugins/line-numbers/prism-line-numbers.css";
Import "../styles/prism-overrides.css";

Erstellen Sie prism-overrides.css für benutzerdefiniertes Styling.

Zeilennummern hinzufügen:

Während das line-numbers -Plugin enthalten ist, müssen Sie die entsprechenden CSS (wie im remark-prism Readme angegeben) einbeziehen. Möglicherweise benötigen Sie solche Anpassungen in prism-overrides.css :

 .Line-Numbers span.line-Zeugen-Reihen {
  Rand: -1px;
}

Hervorhebung von Linien:

Das Prism.js-Line-Highlight-Plugin ist aufgrund statischer Einschränkungen der Standortgenerierung nicht direkt mit dem remark-prism kompatibel. Eine Problemumgehung verwendet CSS und JavaScript. Fügen Sie dieses CSS zu prism-overrides.css hinzu.

 :Wurzel {
  -Highlight-Background: RGB (0 0 0/0);
  --Highlight-Width: 0;
}

.Line-Numbers span.line-zahlreiche Reihen> span {
  Position: Relativ;
}

.Line-Numbers span.line-zahlreiche Reihen> span :: After {{
  Inhalt: " ";
  Hintergrund: var (-Highlight-Background);
  Breite: var (-Highlight-Width);
  Position: absolut;
  Top: 0;
}

Fügen Sie Ihrem Markdown ein data-line -Attribut hinzu<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Nach dem Login kopieren</div></div> Tags (z. B. [data-line="3,8-10"] ). Verwenden Sie in components/post-body.tsx JavaScript (Beispiel angepasst, an Ihre Struktur anpassen):

 importieren {useEffect, useref} aus "react";

// ...

const rootRef = useref (null);

useEffect (() => {
  // ... (Code zu finden<pre class="brush:php;toolbar:false"> Elemente und Highlight-Zeilen mithilfe von Data-Line-Attribut) ...
}, []);

// ... (HighlightCode-Funktion zum Anwenden von Stilen basierend auf Data-Line-Attribut) ...

Dies beinhaltet das Parsen des data-line -Attributs, das Erhalten der<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Die Breite des Elements und dynamisch festlegen, dass die benutzerdefinierten CSS -Eigenschaften die angegebenen Zeilen hervorheben.</pre><div class="contentsignin">Nach dem Login kopieren</div></div>

Zeilen -Hervorhebung ohne Zeilenzahlen:

Um Zeilen hervorzuheben, ohne Zeilenzahlen anzuzeigen, fügen Sie eine .hide-numbers Klasse- und CSS-Regeln hinzu, um die Zeilenzahlen zu verbergen, während Sie das Hervorheben erhalten.

Kopie-zu-Clipboard-Funktion:

Fügen Sie eine Schaltfläche hinzu, um Code -Snippets zu kopieren. In components/post-body.tsx eine Schaltfläche annieren<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Element mit einer &lt;code&gt;createCopyButton&lt;/code&gt; -Funktion, die &lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; verwendet. Stylen Sie die Taste mit CSS.</pre><div class="contentsignin">Nach dem Login kopieren</div></div>

Dieser umfassende Leitfaden bietet eine robuste Lösung für die Integration von Prism.js in Ihr nächstes.js -Blog und ermöglicht eine verbesserte Codepräsentation. Denken Sie daran, die Code -Snippets an Ihre spezifische Projektstruktur anzupassen.

Das obige ist der detaillierte Inhalt vonSyntax -Hervorhebung (und mehr!) Mit Prisma an einer statischen Stelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!