Подсветка кода на стороне сервера в узле [Explained]

Реализация highlight.js в приложении Express для сверхбыстрой подсветки предварительно отрендеренного кода

Что мы строим

Простой серверный код Node / Express для преобразования содержимого Markdown в полностью отформатированный HTML с выделенными блоками кода.

Технологии, которые мы используем

уценка это легкий язык разметки с синтаксисом форматирования простого текста. Его дизайн позволяет конвертировать его во многие выходные форматы.
Highlight.js подсветка синтаксиса написана на JavaScript Он работает как в браузере, так и на сервере. Он работает практически с любой разметкой, не зависит от какой-либо платформы и имеет автоматическое определение языка.
Унифицированная это дружественный интерфейс, поддерживаемый экосистемой плагинов, созданных для создания и управления контентом.

Зачем использовать подсветку кода на стороне сервера?

В Regbrain мы решили реализовать подсветку кода на стороне сервера, чтобы увеличить время загрузки нашего основного сайта. Мы постоянно сравниваем наш сайт с Маяк и стремиться к лучшим показателям производительности.

Загрузка JavaScript для выделения кода в браузере занимала слишком много времени. Сначала нужно было получить файлы JavaScript, а затем браузер перерисовывал содержимое, что приводило к замедлению работы сайта. Чтобы повысить скорость, мы решили реализовать подсветку кода на сервере и теперь отправляем полностью отформатированный html в браузер.

На данный момент, вы можете быть удивлены, Как подсвечивает код серверной стороны? Мы рассмотрим это более подробно позже, но сначала давайте рассмотрим наше техническое решение.

Подсветка кода на стороне сервера

Наши статьи написаны в уценке, поэтому наш рабочий процесс должен принимать необработанную уценку в качестве входных данных и предоставлять полностью отформатированный HTML. Мы делаем это в следующие шаги:

1. Получить содержание уценки

2. Преобразуйте уценку в синтаксическое дерево уценки, используя замечание-синтаксический анализ

3. Преобразуйте синтаксическое дерево уценки в синтаксическое дерево HTML, используя замечание-rehype

4. Перейдите к синтаксическому дереву HTML, чтобы применить подсветку кода к содержимому использование тегов rehype-Изюминка

5. Преобразуйте синтаксическое дерево HTML в строку для отправки клиенту, используя rehype-stringify

Мы достигаем всего вышеперечисленного с унифицированы рамки и плагины следующим образом:

Импортируйте необходимые библиотеки

Мы берем единую структуру и необходимые плагины

let unified = require('unified')
let markdown = require('remark-parse')
let remark2rehype = require('remark-rehype')
let highlight = require('rehype-highlight')
let html = require('rehype-stringify')

Создать единый процессор

Мы создаем процессор, который объединяет все плагины, описанные выше, для достижения нашей цепочки преобразований от уценки до полностью выделенного HTML:


let processor = unified()
    // Transform markdown into a markdown syntax tree
    .use(markdown)
    // Transform markdown syntax tree to html syntax tree
    .use(remark2rehype)
    // Traverse html syntax tree to apply code highlighting to content within code tags
    .use(highlight)
    // Transform html syntax tree to string to send to the client
    .use(html)

Transform!

Теперь у нас есть процессор который может анализировать любой вход уценки следующим образом:

let input = some markdown content
let output = await processor.process(input)

Пример реализации Express JS-маршрутизатора

Мы реализуем вышеуказанные шаги в нашем приложении Express следующим образом:

let express = require('express')
let router = express.Router()

let unified = require('unified')
let markdown = require('remark-parse')
let remark2rehype = require('remark-rehype')
let html = require('rehype-stringify')
let highlight = require('rehype-highlight')

router.get('/:slug', async function (req, res, next) {
  let input = await article.from.database.in.markdown()

  let processor = unified()
    .use(markdown)
    .use(remark2rehype)
    .use(highlight)
    .use(html)
  
  let output = await processor.process(input)

  res.render('article', output)
})
module.exports = router

Не забывайте CSS

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


<html>
  
    
  
  
  
html>

Вопрос о производительности вновь

Как сделать серверную визуализацию эффективной? Несмотря на то, что выделение кода выше немного замедляет работу нашего сервера по сравнению с отправкой «чистого» html, ниже мы реализуем ряд дополнительных уровней, которые позволяют нам достичь превосходной скорости загрузки страницы:

AMP - по умолчанию мы предоставляем наш основной контент в виде страниц AMP. Это означает, что Google и Bing могут кэшировать наши страницы и очень быстро обслуживать их на мобильных устройствах.

Нет внешних стилей или JavaScript (кроме асинхронного AMP) - мы не используем какие-либо блокирующие внешние ресурсы, такие как стили, изображения или файлы JavaScript. Это уже соблюдается, следуя спецификации AMP, но даже если бы мы не внедрили AMP, это было бы хорошим подходом для повышения скорости загрузки страницы. Все наши CSS внутренние. Мы подготавливаем серверную часть CSS и делаем ее специфичной для типа контента, который мы обслуживаем, чтобы не включать неиспользуемые стили (... в пределах разумного ...).

минификация - мы используем минимизацию css и html для дальнейшего уменьшения размера наших страниц.



Источник: Подсветка кода на стороне сервера в узле [Explained]


Похожие материалы по теме: Подсветка кода на стороне сервера в узле [Explained]

Leave a comment