静的サイトでプリズムで強調表示（およびその他！）-CSSチュートリアル-php.cn

静的サイトでプリズムで強調表示（およびその他！）

Christopher Nolan

リリース： 2025-03-13 11:32:09

オリジナル

875 人が閲覧しました

このチュートリアルでは、prism.js構文を統合する方法を示しています。ライン番号やラインハイライトを含むnext.jsブログに強調表示されます。高度な機能を得るために、 remark-prismプラグインといくつかのカスタムCSS/JavaScriptを活用します。

静的サイトでプリズムで強調表示（およびその他！）

Next.jsブログを構築するには、多くの場合、フォーマットされたコードスニペットが必要です。このガイドは、Prism.jsとremark-prismプラグインを使用して、構文の強調表示、ライン番号、および個々の行の強調表示を実現する方法を示しています。いくつかの側面は予想よりも複雑ですが、このウォークスルーは解決策を提供します。

前提条件：

このチュートリアルでは、Next.JSブログのスターターを使用していますが、原則は他のフレームワークに適用されます。スターターとprism.jsをインストールします：

 npm I省略

ログイン後にコピー

基本的なprism.js統合：

markdownToHtmlファイル（通常/libにある）でremark-prism有効にします。

 「berem」から{areme}をインポートします。
"areme-html"からHTMLをインポートします。
「発言権」からのYERMPRISMをインポートします。

デフォルトのasync関数markdowntohtml（markdown）をエクスポートする{
  const result = await arem（）
    .use（html、{sanitize：false}）
    .use（aremprism、{プラグイン：["line-numbers"]}）
    .Process（MarkDown）;
  return result.toString（）;
}

ログイン後にコピー

バージョンに応じて、 remark-html使用法を調整する必要がある場合があります。 Prism CSSをpages/_app.jsにインポート：

 「prismjs/themes/prism-tomorrow.css」をインポートします。
「prismjs/plugins/line-numbers/prism-line-numbers.css」をインポートします。
インポート "../styles/prism-overrides.css";

ログイン後にコピー

カスタムスタイリング用のprism-overrides.cssを作成します。

行番号の追加：

line-numbersプラグインは含まれていますが、対応するCSSを含める必要remark-prismあります。 prism-overrides.cssでこのような調整が必要になる場合があります。

 .line-numbers span.line-numbers-rows {
  マージントップ：-1px;
}

ログイン後にコピー

ハイライトライン：

PRISM.JS Line-Highlightプラグインは、静的なサイト生成の制限のため、顕著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 :: after {
  コンテンツ： " ";
  背景：var（ - ハイライトバックグラウンド）;
  幅：var（ -  highlight-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を使用します（例として、構造に適応します）：

 "ruce"から{useefect、useref}をimport;

// ...

const rootref = useref（null）;

effect（（）=> {
  // ...（見つけるコード<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"> <code>navigator.clipboard.writeText</code>を使用する<code>createCopyButton</code>関数を使用する要素。 CSSを使用してボタンをスタイルします。</pre><div class="contentsignin">ログイン後にコピー</div></div>

この包括的なガイドは、prism.jsをNext.jsブログに統合し、強化されたコードプレゼンテーションを可能にするための堅牢なソリューションを提供します。コードスニペットを特定のプロジェクト構造に適合させることを忘れないでください。

以上が静的サイトでプリズムで強調表示（およびその他！）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。