Рендеринг инлайн-кода

Инлайн-код — это сегменты текста, которые выделяются в Markdown с помощью обратных апострофов ` и используются для обозначения коротких фрагментов кода прямо в тексте. В библиотеке Marked инлайн-код обрабатывается автоматически при разборе Markdown, но поведение и стили рендеринга можно настраивать.

Основы синтаксиса

Инлайн-код в Markdown записывается следующим образом:

`код`

Marked распознаёт такие конструкции и преобразует их в HTML-элемент :

код

Если обратных апострофов несколько, например ``код с апострофом ```, Marked корректно интерпретирует их как единый инлайн-блок, что позволяет использовать обратные апострофы внутри самого кода. Это важно при документации, где часто встречаются конструкции вродеconsole.log(Hello)``.

Настройка рендеринга

Marked позволяет настроить поведение рендеринга через объект renderer. Для инлайн-кода используется метод renderer.codespan(code). Пример:

import { marked } from 'marked';

const renderer = new marked.Renderer();

renderer.codespan = function(code) {
  return `${code}`;
};

const markdown = "Пример инлайн-кода: `let x = 5;`";
const html = marked(markdown, { renderer });

console.log(html);

В этом примере:

  • Все инлайн-коды оборачиваются в с классом highlight.
  • Можно добавлять стили, классы или даже изменять текст внутри кода.

Экранирование специальных символов

Marked автоматически экранирует HTML-символы внутри инлайн-кода. Например:

`
`

Будет преобразовано в:

<div></div>

Это предотвращает случайное внедрение HTML в страницу, сохраняя безопасность и корректность отображения.

Обработка вложенных элементов

Инлайн-код не поддерживает вложенный Markdown. Например, запись:

`*жирный*`

Отобразится как *жирный* без применения стиля жирного текста. Это стандартное поведение Markdown и соответствует спецификации CommonMark, на которой основан Marked.

Советы по стилям

Для улучшения читабельности кода рекомендуется:

  • Добавлять CSS-класс для подсветки синтаксиса.
  • Использовать моноширинный шрифт.
  • Контролировать перенос длинных строк с помощью word-break: break-word.

Пример CSS:

code.highlight {
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
}

Взаимодействие с другими элементами

Инлайн-код может использоваться внутри списков, заголовков и других блоков. Marked корректно рендерит его в любом контексте:

### Пример списка
- Команда: `npm install`
- Запуск: `node app.js`

Будет преобразовано в:

Пример списка


    

  • Команда: npm install
    • 

  • Запуск: node app.js
    •

Поддержка расширенных возможностей

Marked позволяет переопределять поведение рендеринга инлайн-кода, интегрировать с подсветкой синтаксиса через сторонние библиотеки, такие как PrismJS или highlight.js. Например, с highlight.js можно добавлять подсветку к каждому инлайн-коду через кастомный renderer.codespan:

import hljs from 'highlight.js';

renderer.codespan = function(code) {
  const highlighted = hljs.highlightAuto(code).value;
  return `${highlighted}`;
};

Это открывает возможности для динамического отображения кода с подсветкой прямо в тексте Markdown.

Оглавление