Это краткое руководство покажет вам, как подключить Highlight.js к вашему сайту Next.js.

Что такое Highlight.js?

Highlight.js — это библиотека Javascript, которая превращает листинг кода в код с подсветкой синтаксиса. Вы можете получить весь пакет из CDN и подключить его к своему сайту, однако он довольно большой, поскольку поддерживает десятки языков программирования, включая Javascript, C #, CSS, Ruby, PHP и многие другие.

Лучше выбрать только те языки, которые вам понадобятся на вашем сайте. В настоящее время я использую только пакет Javascript, но возможна любая комбинация, которая соответствует вашим интересам и целям программирования.

Highlight.js активируется, когда ваш сайт загружается и настраивает внешний вид примеров кода с помощью собственного CSS.

Как использовать подсветку синтаксиса на сайте Next.js (React)

Использовать Highlight.js на HTML-странице легко с помощью глобальных пакетов. На сайте Next.js, созданном с помощью React и JSX, все становится немного сложнее.

Установка Highlight.js

Во-первых, вам нужно установить Highlight.js с помощью Node:

npm i highlight.js

Затем откройте страницу, на которой вы хотите использовать выделение кода. Обычно это шаблон сообщения в блоге. Сначала добавьте таблицу стилей в разметку вашего шаблона:

<React.Fragment>
    <Head>
        ...
        <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/default.min.css"></link>
    </Head>
...
</React.Fragment>

Вы также можете добавить стили локально, если хотите избежать использования внешнего ресурса, импортировав их в свой _app.tsx:

import 'highlight.js/styles/default.css';

Добавьте ваш код в JSX

Чтобы добавить свой код в JSX, следуйте этой простой схеме:

<pre><code className="js">
{`
your code
`}
</code></pre>

Если ваш код не содержит обратных кавычек, это позволит избежать всех специальных символов. Взгляните на этот простой пример Javascript:

<pre><code className="js">
{`fetch('{url}')
    .then(response => console.log(response));
`}
</code></pre>

Имя класса помогает Highlight.js распознавать используемый язык программирования и настраивать выделенную цветовую схему.

Инициализировать Highlight.js

Последний шаг — подключить Highlight.js и позволить ему сканировать и настраивать все образцы кода. Добавьте следующий код в верхнюю часть вашего шаблона:

import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

Если вы хотите использовать несколько языков, повторите две нижние строчки для всех из них.

Highlight.js необходимо активировать при рендеринге страницы. Для этого вы можете использовать React Hooks:

{
    ...
    useEffect(() => {
        hljs.initHighlighting();
    }, []);
    ...
    return (
        *JSX*
    )
}

И все. Скомпилируйте свой сайт и проверьте, работает ли подсветка синтаксиса.

Светлый и темный режимы

Если вы используете несколько таблиц стилей на своем сайте для настройки его цветов, можно также переключать темы подсветки синтаксиса. Взгляните на этот проект, который содержит таблицы стилей, адаптированные к соответствующим цветовым схемам.

Заключение

В этой статье я показал вам, как подключить Highlight.js к вашему сайту Next.js. Этот подход также можно использовать на простых сайтах React или сайтах, реализованных с использованием других генераторов статических сайтов, таких как Gatsby. Вы также можете ознакомиться с полной реализацией

import Head from 'next/head';
import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

const FetchApiCheatsheet: any = () => {
	useEffect(() => {
		hljs.initHighlighting();
	}, []);
	return (
		<React.Fragment>
			<Head>
				<title>Fetch API cheatsheet - Ondrabus</title>
				<meta property='og:title' content='Fetch API cheatsheet - Ondrabus' />
				<link
					rel='stylesheet'
					href='//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/default.min.css'
				></link>
			</Head>

			<main>
				<section className='content cheatsheet'>
					<motion.div
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						exit={{ opacity: 0 }}
					>
						<h1>Fetch API cheatsheet</h1>
						<pre>
							<code className='js'>
								{`async function getData(){
									let response = await fetch(...);
									let dataObj = await response.json();
									
										console.log(dataObj);
									}
								`}
							</code>
						</pre>
					</motion.div>
				</section>
			</main>
		</React.Fragment>
	);
};

export default FetchApiCheatsheet;