Heim > Web-Frontend > CSS-Tutorial > Syntax -Hervorhebung (und mehr!) Mit Prisma an einer statischen Stelle

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

Christopher Nolan
Freigeben: 2025-03-13 11:32:09
Original
877 Leute haben es durchsucht

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.

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

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
Nach dem Login kopieren

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 ();
}
Nach dem Login kopieren

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";
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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) ...
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage