english | русский
@diplodoc/transform is a package for converting Yandex Flavored Markdown to HTML.
Use it in your code to work with text during program execution. For example, to display user-generated content.
-
Install a package:
npm i @diplodoc/transform
-
Add the package in your code using the
require()
orimport()
function:const transform = require('@diplodoc/transform');
-
To ensure text is displayed properly, add CSS styles and client scripts to the project:
@import '~@diplodoc/transform/dist/css/yfm.css';
import '@diplodoc/transform/dist/js/yfm';
The package provides the transform()
function:
- Input data: Settings and a string with YFM.
- Returned value: An object with the
result
andlogs
fields.
result
: Resulting object, contains the fields:
html
: A line with HTML.meta
: Metadata from the transmitted content.title
: The document title. Returned ifextractTitle = true
orneedTitle = true
.headings
: A list of document headers.
logs
: Information about the transformation process, includes arrays:
error
: Errors.warn
: Warnings.info
: Additional information.
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});
MIT
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