Syntax Highlighting (and More!) With Prism on a Static Site

This tutorial demonstrates how to integrate Prism.js syntax highlighting into a Next.js blog, including line numbers and line highlighting. We'll leverage the remark-prism plugin and some custom CSS/JavaScript for advanced features.

Building a Next.js blog often requires nicely formatted code snippets. This guide shows you how to achieve syntax highlighting, line numbers, and individual line highlighting using Prism.js and the remark-prism plugin. While some aspects are more complex than expected, this walkthrough provides solutions.

Prerequisites:

This tutorial uses the Next.js blog starter, but the principles apply to other frameworks. Install the starter and Prism.js:

npm i remark-prism

Basic Prism.js Integration:

Enable remark-prism in your markdownToHtml file (usually located in /lib):

import { remark } from "remark";
import html from "remark-html";
import remarkPrism from "remark-prism";

export default async function markdownToHtml(markdown) {
  const result = await remark()
    .use(html, { sanitize: false })
    .use(remarkPrism, { plugins: ["line-numbers"] })
    .process(markdown);
  return result.toString();
}

You may need to adjust remark-html usage depending on your version. Import Prism CSS in pages/_app.js:

import "prismjs/themes/prism-tomorrow.css";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import "../styles/prism-overrides.css";

Create prism-overrides.css for custom styling.

Adding Line Numbers:

While the line-numbers plugin is included, you need to include the corresponding CSS (as noted in the remark-prism README). You might need adjustments like this in prism-overrides.css:

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

Highlighting Lines:

The Prism.js line-highlight plugin isn't directly compatible with remark-prism due to static site generation limitations. A workaround uses CSS and JavaScript. Add this CSS to prism-overrides.css:

:root {
  --highlight-background: rgb(0 0 0 / 0);
  --highlight-width: 0;
}

.line-numbers span.line-numbers-rows > span {
  position: relative;
}

.line-numbers span.line-numbers-rows > span::after {
  content: " ";
  background: var(--highlight-background);
  width: var(--highlight-width);
  position: absolute;
  top: 0;
}

Add a data-line attribute to your Markdown <pre class="brush:php;toolbar:false"></pre> tags (e.g., [data-line="3,8-10"]). In components/post-body.tsx, use JavaScript (example shown, adapt to your structure):

import { useEffect, useRef } from "react";

// ...

const rootRef = useRef(null);

useEffect(() => {
  // ... (Code to find <pre class="brush:php;toolbar:false"> elements and highlight lines using data-line attribute) ...
}, []);

// ... (highlightCode function to apply styles based on data-line attribute) ...

This involves parsing the data-line attribute, getting the <pre class="brush:php;toolbar:false"></pre> element's width, and dynamically setting the CSS custom properties to highlight the specified lines.

Line Highlighting without Line Numbers:

To highlight lines without showing line numbers, add a .hide-numbers class and CSS rules to hide the line numbers while preserving highlighting.

Copy-to-Clipboard Feature:

Add a button to copy code snippets. In components/post-body.tsx, append a button to each <pre class="brush:php;toolbar:false"></pre> element using a createCopyButton function that uses navigator.clipboard.writeText. Style the button using CSS.

This comprehensive guide provides a robust solution for integrating Prism.js into your Next.js blog, enabling enhanced code presentation. Remember to adapt the code snippets to your specific project structure.

The above is the detailed content of Syntax Highlighting (and More!) With Prism on a Static Site. For more information, please follow other related articles on the PHP Chinese website!