Skip to content

Latest commit

 

History

History
137 lines (95 loc) · 3.84 KB

README.ru.md

File metadata and controls

137 lines (95 loc) · 3.84 KB

русский | english

NPM version

@diplodoc/transform — пакет для трансформации Yandex Flavored Markdown в HTML.

Используйте его в своем коде для работы с текстом во время выполнения программы. Например, чтобы отображать пользовательский контент.

Установка {#install}

  1. Установите пакет:

    npm i @diplodoc/transform

  2. Подключите пакет в своем коде, используя функцию require() или import():

    const transform = require('@diplodoc/transform');

  3. Для корректного отображения подключите в проект CSS-стили и клиентские скрипты:

    @import '~@diplodoc/transform/dist/css/yfm.css';
    import '@diplodoc/transform/dist/js/yfm';

Использование {#use}

Пакет предоставляет функцию transform():

  • входные данные — строка с YFM и настройки;
  • возвращаемое значение — объект с полями result и logs.

Поле result

result — объект результата, содержит поля:

  • html — строка с HTML.
  • meta — метаданные из переданного контента.
  • title — заголовок документа. Возвращается, если заданы настройки extractTitle = true или needTitle = true.
  • headings — список заголовков документа.

Поле logs

logs — информация о процессе трансформации, включает массивы:

  • error — ошибки.
  • warn — предупреждения.
  • info — дополнительная информация.

Пример вызова функции

const fs = require('fs');
const transform = require('@diplodoc/transform');

const content = fs.readFileSync(filePath, 'utf');
const vars = {user: {name: 'Alice'}};

const {
  result: {html, meta, title, headings},
  logs,
} = transform(content, {vars});

License

MIT

Публичные CSS-переменные

common

  • --yfm-color-text
  • --yfm-color-link
  • --yfm-color-base
  • --yfm-color-link-hover
  • --yfm-color-table
  • --yfm-color-table-row-background
  • --yfm-color-border
  • --yfm-color-accent

code

  • --yfm-color-inline-code
  • --yfm-color-inline-code-background
  • --yfm-color-code-background

hightlight

  • --yfm-color-hljs-background
  • --yfm-color-hljs-subst
  • --yfm-color-hljs-comment
  • --yfm-color-hljs-deletion
  • --yfm-color-hljs-section
  • --yfm-color-hljs-pseudo
  • --yfm-color-hljs-literal
  • --yfm-color-hljs-addition
  • --yfm-color-hljs-meta
  • --yfm-color-hljs-meta-string

note

  • --yfm-color-note-tip
  • --yfm-color-note-tip-background
  • --yfm-color-note-warning
  • --yfm-color-note-warning-background
  • --yfm-color-note-important-background
  • --yfm-color-note-info-background

term

  • --yfm-color-term-title
  • --yfm-color-term-title-hover
  • --yfm-color-term-dfn-background
  • --yfm-color-term-dfn-shadow
  • --yfm-color-term-dfn-pseudo-shadow

modal

  • --yfm-color-modal-content
  • --yfm-color-modal-actions-hover
  • --yfm-color-modal-wide-content
  • --yfm-color-modal-wide-content-overlay

file

  • --yfm-file-icon
  • --yfm-file-icon-color