{"id":413789,"date":"2024-06-29T23:20:58","date_gmt":"2024-06-29T23:20:58","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=413789"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=413789","title":{"rendered":"<span>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c markdown \u0432 html \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0441 Unified \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3><\/h3>\n<h3><\/h3>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Unified \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Markdown \u0438 HTML \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React. Unified \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e, \u0438 \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u043d\u043e \u0434\u0430\u0436\u0435  \u0431\u0435\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0443\u0442\u0438\u043b\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 javascript. \u0412\u0441\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u043e.<br \/> \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0438 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<h3>\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Unified<\/h3>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 React \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 HTML\/Markdown \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-react\" rel=\"noopener noreferrer nofollow\">rehype-react<\/a> &#8212;  \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark-react\" rel=\"noopener noreferrer nofollow\">remark-react<\/a> &#8212; \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 Markdown<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445  \u043c\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React <a href=\"https:\/\/github.com\/remarkjs\/react-markdown\" rel=\"noopener noreferrer nofollow\">react-markdown<\/a> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, react-markdown \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Unified \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b rehype-react + remark-react.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/unifiedjs\/unified\" rel=\"noopener noreferrer nofollow\">Unified<\/a>.<br \/> \u041e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430  \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e  <a href=\"https:\/\/habr.com\/ru\/post\/672266\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u044f Markdown \u043f\u0430\u0440\u0441\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u043b<\/a> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Unified \u0442\u043e\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e.<\/p>\n<h3>\u0422\u0435\u0440\u043c\u0438\u043d\u044b \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/h3>\n<ul>\n<li>\n<p>Markdown &#8212; \u043e\u0431\u043b\u0435\u0433\u0447\u0451\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u0446\u0435\u043b\u044c\u044e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435, \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c, \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u0439 \u0434\u043b\u044f \u043c\u0430\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044f\u0437\u044b\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/www.markdownguide.org\/getting-started\/\" rel=\"noopener noreferrer nofollow\">markdownguide.org<\/a>  \u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Markdown\" rel=\"noopener noreferrer nofollow\">Wiki<\/a><\/p>\n<\/li>\n<li>\n<p>HTML &#8212; \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0433\u0438\u043f\u0435\u0440\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/HTML\" rel=\"noopener noreferrer nofollow\">Wiki<\/a> \u0438 <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" rel=\"noopener noreferrer nofollow\">HTML Living Standard<\/a><\/p>\n<\/li>\n<li>\n<p>AST(Abstract syntax tree) &#8212; \u044d\u0442\u043e \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0442\u0435\u043a\u0441\u0442\u0430, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 javascript. \u0414\u0430\u043b\u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c AST \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Abstract_syntax_tree\" rel=\"noopener noreferrer nofollow\">Wiki<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#overview\" rel=\"noopener noreferrer nofollow\">Unified<\/a> &#8212;  \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 (\u0441\u043c\u043e\u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b processor API) \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e AST. \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 AST.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#ecosystems\" rel=\"noopener noreferrer nofollow\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/a> &#8212; \u043a\u0430\u0436\u0434\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: <\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">rehype<\/a> &#8212; HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">remark<\/a> &#8212; markdown<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#processor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \/ Processor<\/a> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 unified(), remark(), rehype() \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 processor(). \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 processor().use(). \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u044f &#8212; \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430. \u042d\u0442\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430: <a href=\"https:\/\/github.com\/syntax-tree\/unist\" rel=\"noopener noreferrer nofollow\">specification syntax tree<\/a><\/p>\n<p>\u041d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/hast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">hast<\/a> &#8212; HTML abstract syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/mdast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">mdast<\/a> &#8212; Markdown abstract syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/nlcst#list-of-utilities\" rel=\"noopener noreferrer nofollow\">nlcst<\/a> &#8212; Natural language syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/xast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">xast<\/a> &#8212; XML abstract syntax tree<\/p>\n<\/li>\n<\/ul>\n<h4>Node &#8212; \u0443\u0437\u043b\u044b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430<\/h4>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Node \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/github.com\/syntax-tree\/unist#nodes\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><\/p>\n<p>\u0432 \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/p>\n<pre><code>export type Node = Partial&lt;{     type: string; \/\/ for example 'element'     tagName: string; \/\/ for example \"p\"     properties: { [key: string]: any }; \/\/     children: Array&lt;Node>;     value: string;     position: { \/\/ \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430         start: { line: number; column: number; offset: number }; \/\/ { line: 1, column: 1, offset: 0 }         end: { line: number; column: number; offset: number };     }; }>; <\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<ul>\n<li>\n<p><strong>type<\/strong> &#8212; \u0438\u0437 \u043c\u043e\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <\/p>\n<ul>\n<li>\n<p><strong>root<\/strong> &#8212; \u043a\u043e\u0440\u0435\u043d\u044c \u0434\u0435\u0440\u0435\u0432\u0430<\/p>\n<\/li>\n<li>\n<p><strong>text<\/strong> \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><strong>element<\/strong> &#8212; html \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>tagName<\/strong>  \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0442\u0438\u043f\u0430 element, \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>value \u0435\u0441\u0442\u044c<\/strong> \u0442\u043e\u043b\u044c\u043a\u043e \u0443 text<\/p>\n<\/li>\n<li>\n<p><strong>properties<\/strong>  \u0435\u0441\u0442\u044c \u0443 type element \u044d\u0442\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><strong>children<\/strong> \u044d\u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p><strong>position<\/strong> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443\u0437\u043b\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u0434\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c position.end.line &#8212; position.start.line.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 AST<\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f markdown \u0432 html<\/p>\n<pre><code>    result = unified()         .use(remarkParse)         .use(remarkRehype)         .use(parseElements)         .processSync(\"## Netlify\"); <\/code><\/pre>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e<\/p>\n<pre><code>[   {     type: \"element\",     tagName: \"h2\",     properties: {     },     children: [       {         type: \"text\",         value: \"Netlify\",         position: {           start: {             line: 1,             column: 4,             offset: 3,           },           end: {             line: 1,             column: 11,             offset: 10,           },         },       },     ],     position: {       start: {         line: 1,         column: 1,         offset: 0,       },       end: {         line: 1,         column: 11,         offset: 10,       },     },   }, ] <\/code><\/pre>\n<h3>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 unified\u00a0\u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/h3>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified\" rel=\"noopener noreferrer nofollow\">unified<\/a>\u00a0&#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e AST \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. <a href=\"https:\/\/unifiedjs.com\/\" rel=\"noopener noreferrer nofollow\">\u0421\u0430\u0439\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 <a href=\"https:\/\/github.com\/unifiedjs\/unified#overview\" rel=\"noopener noreferrer nofollow\">\u0442\u0440\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0430\u0434\u0438\u0438<\/a>:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 html \u0438\u043b\u0438 markdown \u0432 AST &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Parser<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 AST &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Transformer<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 html \u0438\u043b\u0438 markdown &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Compiler<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Processor API, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435.<\/p>\n<h4>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 rehype \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html<\/h4>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype<\/a> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html.<br \/> \u041f\u043b\u0430\u0433\u0438\u043d\u044b parser \u0438 compiler:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype-parse<\/a> &#8212; \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 HTML \u0432 AST<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype-stringify<\/a> &#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-react\" rel=\"noopener noreferrer nofollow\">rehype-react<\/a> &#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST HTML \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b Transformers, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/mapbox\/rehype-prism\" rel=\"noopener noreferrer nofollow\">@mapbox\/rehype-prism<\/a> &#8212; \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c PrismJS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-sanitize\" rel=\"noopener noreferrer nofollow\">rehype-sanitize<\/a> &#8212; \u0434\u0435\u043b\u0430\u0435\u0442 AST \u0431\u043e\u043b\u0435\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438, \u0432 \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f html \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b <a href=\"https:\/\/github.com\/rehypejs\/rehype\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">rehype<\/a><\/p>\n<h4>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 remark \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 markdown<\/h4>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark<\/a>\u00a0&#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 markdown.<br \/> \u041f\u043b\u0430\u0433\u0438\u043d\u044b parser \u0438 compiler:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark-parse<\/a> &#8212; \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 markdown \u0432 AST<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark-stringify<\/a>&#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 markdown<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b Transformers, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark-rehype\" rel=\"noopener noreferrer nofollow\">remark-rehype<\/a> &#8212; \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 AST Markdown \u0432 AST HTML, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f rehype<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b <a href=\"https:\/\/github.com\/remarkjs\/remark\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">remark<\/a><\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/h4>\n<p><a href=\"https:\/\/github.com\/wooorm\" rel=\"noopener noreferrer nofollow\">Titus (wroom)<\/a> &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 <a href=\"https:\/\/github.com\/syntax-tree\/unist\" rel=\"noopener noreferrer nofollow\">unist<\/a>, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Unified \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 remark \u0438 rehype, \u0441\u0434\u0435\u043b\u0430\u043b 4100 \u0432\u043a\u043b\u0430\u0434\u0430 (\u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u0435\u0449\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 <a href=\"https:\/\/github.blog\/2013-01-07-introducing-contributions\/#repositories-contributed-to\" rel=\"noopener noreferrer nofollow\">contribution<\/a>) \u043d\u0430 github \u0437\u0430 2022 \u0433\u043e\u0434, \u043d\u043e \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e \u0447\u0438\u0441\u043b\u043e, \u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u0442 \u0434\u043d\u0435\u0439 \u0431\u0435\u0437 \u0432\u043a\u043b\u0430\u0434\u043e\u0432. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043a\u0430\u043a \u043e\u043d \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043e\u043a. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/6d7\/9fa\/fdc\/6d79fafdc36498dbd461626fc2f97477.jpeg\" width=\"1125\" height=\"257\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6d7\/9fa\/fdc\/6d79fafdc36498dbd461626fc2f97477.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h3>Processor API &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Unified<\/h3>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#processor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0444\u0430\u0437 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 AST \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430:<\/p>\n<ul>\n<li>\n<p>processor() &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440, \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>processor.use(plugin[, options]) &#8212; \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>processor.parse(file) &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c parser, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 AST<\/p>\n<\/li>\n<li>\n<p>processor.stringify(tree[, file]) &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c compiler, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>processor.run(tree[, file][, done]) &#8212; \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 AST \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>processor.runSync(tree[, file]) &#8212; \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 AST \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>processor.process(file[, done]) &#8212; \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST > \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f AST  >  \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>processor.processSync(file) &#8212; \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST > \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f AST  >  \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430:<\/p>\n<pre><code>    import {unified} from 'unified'     import remarkParse from 'remark-parse'     import remarkRehype from 'remark-rehype'     import rehypeDocument from 'rehype-document'     import rehypeFormat from 'rehype-format'     import rehypeStringify from 'rehype-stringify'          const file = await unified()       .use(remarkParse)       .use(remarkRehype)       .use(rehypeDocument, {title: '??'})       .use(rehypeFormat)       .use(rehypeStringify)       .process('# Hello world!')          console.log(String(file)) <\/code><\/pre>\n<p>\u0412\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<pre><code># Hello world! <\/code><\/pre>\n<p>\u0412\u044b\u0445\u043e\u0434\u043d\u044b\u0435<\/p>\n<pre><code>&lt;!doctype html> &lt;html lang=\"en\">   &lt;head>     &lt;meta charset=\"utf-8\">     &lt;title>??&lt;\/title>     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">   &lt;\/head>   &lt;body>     &lt;h1>Hello world!&lt;\/h1>   &lt;\/body> &lt;\/html> <\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 use<\/h4>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#example-1\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a><\/p>\n<pre><code>unified()   \/\/ Plugin with options:   .use(pluginA, {x: true, y: true})   \/\/ Passing the same plugin again merges    \/\/ configuration (to `{x: true, y: false, z: true}`):   .use(pluginA, {y: false, z: true})   \/\/ Plugins:   .use([pluginB, pluginC])   \/\/ Two plugins, the second with options:   .use([pluginD, [pluginE, {}]])   \/\/ Preset with plugins and settings:   .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}})   \/\/ Settings only:   .use({settings: {position: false}}) <\/code><\/pre>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 run<\/h4>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#example-4\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a><\/p>\n<pre><code>import {unified} from 'unified' import remarkReferenceLinks from 'remark-reference-links' import {u} from 'unist-builder'  const tree = u('root', [   u('paragraph', [     u('link', {href: 'https:\/\/example.com'}, [u('text', 'Example Domain')])   ]) ]) const changedTree = await unified().use(remarkReferenceLinks).run(tree) <\/code><\/pre>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 markdown \u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 html c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u043c\u0438<\/h4>\n<pre><code>const processor = unified()   \/\/ markdown \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 AST   .use(remarkParse)    \/\/ markdown AST \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 HTML AST \u0438 \u0434\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e    \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b Rehype   .use(remarkRehype)     \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 HTML AST \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c    \/\/ \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u043c html \u0442\u0435\u0433 title \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c ?   .use(rehypeDocument, {title: '?'})   \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430     .use(rehypeStringify)   \/\/ \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442   \/\/ \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 process \u0438\u043b\u0438 processSync <\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/h3>\n<p>\u0418\u0437 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u043d\u0435\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u0442\u0430\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e: \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043a\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0443\u0437\u043b\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0434\u0435\u0440\u0435\u0432\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c.<br \/> \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c Tranformer \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 AST \u0434\u0435\u0440\u0435\u0432\u043e, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0432\u043d\u043e\u0441\u0438\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 html \u0442\u0435\u0433 &#171;a&#187; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 target=&#187;_blank&#187; \u0438 rel=&#187;noreferrer&#187; \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 href \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 &#171;#&#187;. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/unifiedjs.com\/learn\/guide\/create-a-plugin\/\" rel=\"noopener noreferrer nofollow\">unifiedjs.com \u0435\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b retext \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c. \u041e\u043d\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 rehype \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u0445 \u0442\u0438\u043f\u043e\u0432 \u0432 \u0443\u0437\u043b\u0430\u0445. \u0442\u0430\u043a\u0436\u0435 \u0442\u0430\u043c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 <a href=\"https:\/\/github.com\/syntax-tree\/unist-util-visit\" rel=\"noopener noreferrer nofollow\">visit \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 unist-util-visit<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0443\u0437\u043b\u044b \u0434\u0435\u0440\u0435\u0432\u0430 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443.<\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/p>\n<pre><code>export default function retextSentenceSpacing(options) {   return (tree, file) => {   } } <\/code><\/pre>\n<p>options &#8212; \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043d\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a<br \/> tree \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b \u0434\u0435\u0440\u0435\u0432\u0430 \u0432 rehype \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c type root<\/p>\n<p>\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0442\u044b \u0441 \u0441c\u044b\u043b\u043a\u0430\u043c\u0438 a[href], \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 target=&#187;_blank&#187; rel=&#187;noreferrer&#187;<\/p>\n<pre><code>import type { Node } from \"..\/unified.types\"; import { visit, Node as NodeVisitor } from \"unist-util-visit\";  export const rehypeAhref = () => {     return (tree: NodeVisitor) => {         try {             visit(tree, { tagName: \"a\" }, (node: Node) => {                 if(!node?.properties){                     node.properties = {}                 }                 const props = node.properties                 if(props.href[0] !== \"#\"){                     props.target = \"_blank\";                     props.rel = \"noreferrer\";                 }                });         } catch (err) {}     }; }; <\/code><\/pre>\n<p>\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0443<\/p>\n<pre><code>unified()     .use(remarkParse)     .use(remarkRehype)     .use(rehypeAhref)     .use(rehypeStringify)     .processSync(\"[Google](https:\/\/google.ru)\")     .toString() <\/code><\/pre>\n<p>\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c<\/p>\n<pre><code>&lt;a href=\"https:\/\/google.ru\" target=\"_blank\" rel=\"noreferrer\">Google&lt;\/a> <\/code><\/pre>\n<h3>\u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435. \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Markdown, \u043a\u043e\u0434 markdown \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f Markdown \u0432 HTML, \u043a\u043e\u0434 HTML \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 html \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/markdown-to-html\" rel=\"noopener noreferrer nofollow\">Github \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/markdown-to-html-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">online demo<\/a><\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/de8\/307\/353\/de83073531cac82c4dbdd2fed9009602.png\" width=\"1841\" height=\"767\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de8\/307\/353\/de83073531cac82c4dbdd2fed9009602.png\"\/><figcaption><\/figcaption><\/figure>\n<h4>\u0421\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/h4>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactjs.org\/\" rel=\"noopener noreferrer nofollow\">React<\/a> &#8212; \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Frontend-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer nofollow\">NextJS<\/a> &#8212; \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f React, \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432 <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/pages\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u0432 \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 NextJS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c api \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, NextJS \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f React. \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0432\u044b\u0431\u043e\u0440 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0431\u044b\u043b \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/vercel.com\/about\" rel=\"noopener noreferrer nofollow\">Vercel<\/a> &#8212; \u043f\u043b\u043e\u0449\u0430\u0434\u043a\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/simplemde.com\/\" rel=\"noopener noreferrer nofollow\">SimpleMDE<\/a> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 markdown. \u0412 \u044d\u0442\u043e\u043c \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043b\u044f React \u043f\u0430\u043a\u0435\u0442 react-simplemde-editor. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 unified, \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 rehype \u0438 remark \u0414\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/wooorm\/refractor\" rel=\"noopener noreferrer nofollow\">refractor<\/a> + <a href=\"https:\/\/prismjs.com\/\" rel=\"noopener noreferrer nofollow\">prismjs<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 unified \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043a React, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0440\u0435\u0434\u0435 NodeJS \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c js, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e React \u0442\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f NextJS \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 a[href] \u0430\u0442\u0440\u0438\u0431\u0443\u0442  target=&#187;_blank&#187; \u0438 rel=&#187;noreferrer&#187; \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0435 \u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u043d\u0430 id \u044d\u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <a href=\"https:\/\/github.com\/denisso\/markdown-to-html\/blob\/main\/lib\/plugins\/rehypeAhref.ts\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 github<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 PismJS \u0438 refractor, \u044d\u0442\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/github.com\/mapbox\/rehype-prism\" rel=\"noopener noreferrer nofollow\">rehype-prismjs<\/a>. <a href=\"https:\/\/github.com\/denisso\/markdown-to-html\/blob\/main\/lib\/plugins\/rehypePrismCustom.ts\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 github<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 \u0441 \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u043e\u043a \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 <a href=\"https:\/\/github.com\/denisso\/markdown-to-html\/blob\/main\/lib\/plugins\/rehypeCodeBlock.ts\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 github<\/a><\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f AST HTML \u0432 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h4>\n<p>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d rehype-sanitize \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0435 AST html \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443<\/p>\n<pre><code>&lt;button className=\"codecopy\" onClick={handlerCopy} ref={refBtnCopy} > {textBthCopy} &lt;\/button> <\/code><\/pre>\n<p>\u0432 <a href=\"https:\/\/www.markdownguide.org\/extended-syntax\/#fenced-code-blocks\" rel=\"noopener noreferrer nofollow\">Fenced Code Block<\/a> \u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 rehype-react \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434,  \u043a\u0430\u043a JSX \u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 button \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 props ref \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c Unhandled Runtime Error<\/p>\n<blockquote>\n<p>Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here:\u00a0<a href=\"http:\/\/reactjs.org\/link\/strict-mode-string-ref\" rel=\"noopener noreferrer nofollow\">reactjs.org\/link\/strict-mode-string-ref<\/a><\/p>\n<\/blockquote>\n<p>\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b rehype-sanitize \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 html \u0442\u0435\u0433\u0438 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u041f\u043b\u0430\u0433\u0438\u043d rehype-sanitize \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442 \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0443\u044e \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b &lt; \u043d\u0430 escape \u0441\u0438\u043c\u0432\u043e\u043b html &amp;lt, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<pre><code>&lt;p>&amp;lt;button className=\"codecopy\" onClick={handlerCopy} ref={refBtnCopy}&lt;\/p> <\/code><\/pre>\n<p>\u043f\u043e\u0442\u0435\u0440\u044f\u043b\u0438 \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438, \u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043c \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b, \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/github.com\/rehypejs\/rehype-react\" rel=\"noopener noreferrer nofollow\">rehype-react<\/a> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 html \u0432 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412 \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Copy. <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d46\/adb\/069\/d46adb0697874820f81e5dd13840fc9a.jpeg\" width=\"449\" height=\"267\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d46\/adb\/069\/d46adb0697874820f81e5dd13840fc9a.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React<\/p>\n<pre><code>const CodeSection = ({     className,     children, }: JSX.IntrinsicElements[\"section\"]) => {     const refCodeBlock = React.useRef&lt;HTMLElement | null>(null);     const refCodeBox = React.useRef&lt;HTMLElement | null>(null);     const refBtnCopy = React.useRef&lt;HTMLButtonElement | null>(null);     const [copyBtn, setCopyBtn] = React.useState(false);     const [textBthCopy, setTextBtnCopy] = React.useState(\"Copy\");     const handlerCopy = () => {         const range = document.createRange();         range.selectNodeContents(refCodeBox.current as Node);         const buffer = range.valueOf().toString();         navigator.clipboard             .writeText(buffer)             .then(() => {                 setTextBtnCopy(\"Copied\");                 refBtnCopy.current?.classList.add(\"copied\");                 setTimeout(() => {                     refBtnCopy.current?.classList.remove(\"copied\");                     setTextBtnCopy(\"Copy\");                 }, 2000);             })             .catch(() => {                 setTextBtnCopy(\"Copy error\");                 refBtnCopy.current?.classList.add(\"error\");                 setTimeout(() => {                     refBtnCopy.current?.classList.remove(\"error\");                     setTextBtnCopy(\"Copy\");                 }, 2000);             });     };     return (         &lt;section             className={className}             ref={(node: HTMLElement) => {                 if (node &amp;&amp; refCodeBlock.current === null) {                     refCodeBlock.current = node;                     refCodeBox.current = node.querySelector(\".codebox\");                     if (refCodeBox.current) {                         setCopyBtn(true);                     }                 }             }}         >             {copyBtn &amp;&amp; (                 &lt;button                     className=\"codecopy\"                     onClick={handlerCopy}                     ref={refBtnCopy}                 >                     {textBthCopy}                 &lt;\/button>             )}              {children}         &lt;\/section>     ); }; <\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<pre><code>.use(rehypeReact, {     createElement: React.createElement,     Fragment: React.Fragment,     components: {         section: CodeSection,     }, }) <\/code><\/pre>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0438\u0437\u043b\u043e\u0436\u0438\u043b \u0441\u0432\u043e\u0439 \u043e\u043f\u044b\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Unified \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c markdown \u0438 html, \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u041f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Unified \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043e\u043c \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.  \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0432\u0430\u0448\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 \u0438 \u043a\u0440\u0438\u0442\u0438\u043a\u0430. \u0421\u043f\u0430\u0441\u0438\u0431\u043e.<\/p>\n<blockquote>\n<p><a href=\"https:\/\/mrdramm.netlify.app\/posts\/biblioteka-unified-dlya-preobrazovanii-markdown-v-html\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u043c\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435<\/a>, \u044f \u043e\u0442\u043a\u0440\u044b\u0442 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/707004\/\"> https:\/\/habr.com\/ru\/articles\/707004\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3><\/h3>\n<h3><\/h3>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Unified \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Markdown \u0438 HTML \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React. Unified \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e, \u0438 \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u043d\u043e \u0434\u0430\u0436\u0435  \u0431\u0435\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0443\u0442\u0438\u043b\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 javascript. \u0412\u0441\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u043e.<br \/> \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0438 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<h3>\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Unified<\/h3>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 React \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 HTML\/Markdown \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-react\" rel=\"noopener noreferrer nofollow\">rehype-react<\/a> &#8212;  \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark-react\" rel=\"noopener noreferrer nofollow\">remark-react<\/a> &#8212; \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 Markdown<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445  \u043c\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React <a href=\"https:\/\/github.com\/remarkjs\/react-markdown\" rel=\"noopener noreferrer nofollow\">react-markdown<\/a> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, react-markdown \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Unified \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b rehype-react + remark-react.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/unifiedjs\/unified\" rel=\"noopener noreferrer nofollow\">Unified<\/a>.<br \/> \u041e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430  \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e  <a href=\"https:\/\/habr.com\/ru\/post\/672266\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u044f Markdown \u043f\u0430\u0440\u0441\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u043b<\/a> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Unified \u0442\u043e\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e.<\/p>\n<h3>\u0422\u0435\u0440\u043c\u0438\u043d\u044b \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/h3>\n<ul>\n<li>\n<p>Markdown &#8212; \u043e\u0431\u043b\u0435\u0433\u0447\u0451\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u0446\u0435\u043b\u044c\u044e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435, \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c, \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u0439 \u0434\u043b\u044f \u043c\u0430\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044f\u0437\u044b\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/www.markdownguide.org\/getting-started\/\" rel=\"noopener noreferrer nofollow\">markdownguide.org<\/a>  \u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Markdown\" rel=\"noopener noreferrer nofollow\">Wiki<\/a><\/p>\n<\/li>\n<li>\n<p>HTML &#8212; \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0433\u0438\u043f\u0435\u0440\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/HTML\" rel=\"noopener noreferrer nofollow\">Wiki<\/a> \u0438 <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" rel=\"noopener noreferrer nofollow\">HTML Living Standard<\/a><\/p>\n<\/li>\n<li>\n<p>AST(Abstract syntax tree) &#8212; \u044d\u0442\u043e \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0442\u0435\u043a\u0441\u0442\u0430, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 javascript. \u0414\u0430\u043b\u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c AST \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438. \u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Abstract_syntax_tree\" rel=\"noopener noreferrer nofollow\">Wiki<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#overview\" rel=\"noopener noreferrer nofollow\">Unified<\/a> &#8212;  \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 (\u0441\u043c\u043e\u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b processor API) \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e AST. \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 AST.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#ecosystems\" rel=\"noopener noreferrer nofollow\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/a> &#8212; \u043a\u0430\u0436\u0434\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: <\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">rehype<\/a> &#8212; HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">remark<\/a> &#8212; markdown<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#processor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \/ Processor<\/a> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 unified(), remark(), rehype() \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 processor(). \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 processor().use(). \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u044f &#8212; \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430. \u042d\u0442\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430: <a href=\"https:\/\/github.com\/syntax-tree\/unist\" rel=\"noopener noreferrer nofollow\">specification syntax tree<\/a><\/p>\n<p>\u041d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/hast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">hast<\/a> &#8212; HTML abstract syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/mdast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">mdast<\/a> &#8212; Markdown abstract syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/nlcst#list-of-utilities\" rel=\"noopener noreferrer nofollow\">nlcst<\/a> &#8212; Natural language syntax tree<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/syntax-tree\/xast#list-of-utilities\" rel=\"noopener noreferrer nofollow\">xast<\/a> &#8212; XML abstract syntax tree<\/p>\n<\/li>\n<\/ul>\n<h4>Node &#8212; \u0443\u0437\u043b\u044b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430<\/h4>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Node \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/github.com\/syntax-tree\/unist#nodes\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><\/p>\n<p>\u0432 \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/p>\n<pre><code>export type Node = Partial&lt;{     type: string; \/\/ for example 'element'     tagName: string; \/\/ for example \"p\"     properties: { [key: string]: any }; \/\/     children: Array&lt;Node>;     value: string;     position: { \/\/ \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430         start: { line: number; column: number; offset: number }; \/\/ { line: 1, column: 1, offset: 0 }         end: { line: number; column: number; offset: number };     }; }>; <\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<ul>\n<li>\n<p><strong>type<\/strong> &#8212; \u0438\u0437 \u043c\u043e\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <\/p>\n<ul>\n<li>\n<p><strong>root<\/strong> &#8212; \u043a\u043e\u0440\u0435\u043d\u044c \u0434\u0435\u0440\u0435\u0432\u0430<\/p>\n<\/li>\n<li>\n<p><strong>text<\/strong> \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><strong>element<\/strong> &#8212; html \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>tagName<\/strong>  \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0442\u0438\u043f\u0430 element, \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>value \u0435\u0441\u0442\u044c<\/strong> \u0442\u043e\u043b\u044c\u043a\u043e \u0443 text<\/p>\n<\/li>\n<li>\n<p><strong>properties<\/strong>  \u0435\u0441\u0442\u044c \u0443 type element \u044d\u0442\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><strong>children<\/strong> \u044d\u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p><strong>position<\/strong> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443\u0437\u043b\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u0434\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c position.end.line &#8212; position.start.line.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 AST<\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f markdown \u0432 html<\/p>\n<pre><code>    result = unified()         .use(remarkParse)         .use(remarkRehype)         .use(parseElements)         .processSync(\"## Netlify\"); <\/code><\/pre>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e<\/p>\n<pre><code>[   {     type: \"element\",     tagName: \"h2\",     properties: {     },     children: [       {         type: \"text\",         value: \"Netlify\",         position: {           start: {             line: 1,             column: 4,             offset: 3,           },           end: {             line: 1,             column: 11,             offset: 10,           },         },       },     ],     position: {       start: {         line: 1,         column: 1,         offset: 0,       },       end: {         line: 1,         column: 11,         offset: 10,       },     },   }, ] <\/code><\/pre>\n<h3>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 unified\u00a0\u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/h3>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified\" rel=\"noopener noreferrer nofollow\">unified<\/a>\u00a0&#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e AST \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. <a href=\"https:\/\/unifiedjs.com\/\" rel=\"noopener noreferrer nofollow\">\u0421\u0430\u0439\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 <a href=\"https:\/\/github.com\/unifiedjs\/unified#overview\" rel=\"noopener noreferrer nofollow\">\u0442\u0440\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0430\u0434\u0438\u0438<\/a>:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 html \u0438\u043b\u0438 markdown \u0432 AST &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Parser<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 AST &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Transformer<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 html \u0438\u043b\u0438 markdown &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d Compiler<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Processor API, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435.<\/p>\n<h4>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 rehype \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html<\/h4>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype<\/a> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html.<br \/> \u041f\u043b\u0430\u0433\u0438\u043d\u044b parser \u0438 compiler:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype-parse<\/a> &#8212; \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 HTML \u0432 AST<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype\/tree\/main\" rel=\"noopener noreferrer nofollow\">rehype-stringify<\/a> &#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 HTML<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-react\" rel=\"noopener noreferrer nofollow\">rehype-react<\/a> &#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST HTML \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b Transformers, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/mapbox\/rehype-prism\" rel=\"noopener noreferrer nofollow\">@mapbox\/rehype-prism<\/a> &#8212; \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c PrismJS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/rehypejs\/rehype-sanitize\" rel=\"noopener noreferrer nofollow\">rehype-sanitize<\/a> &#8212; \u0434\u0435\u043b\u0430\u0435\u0442 AST \u0431\u043e\u043b\u0435\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438, \u0432 \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f html \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b <a href=\"https:\/\/github.com\/rehypejs\/rehype\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">rehype<\/a><\/p>\n<h4>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 remark \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 markdown<\/h4>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark<\/a>\u00a0&#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 markdown.<br \/> \u041f\u043b\u0430\u0433\u0438\u043d\u044b parser \u0438 compiler:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark-parse<\/a> &#8212; \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 markdown \u0432 AST<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark\/tree\/main\" rel=\"noopener noreferrer nofollow\">remark-stringify<\/a>&#8212; \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 AST \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 markdown<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d\u044b Transformers, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/remarkjs\/remark-rehype\" rel=\"noopener noreferrer nofollow\">remark-rehype<\/a> &#8212; \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 AST Markdown \u0432 AST HTML, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f rehype<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b <a href=\"https:\/\/github.com\/remarkjs\/remark\/blob\/main\/doc\/plugins.md\" rel=\"noopener noreferrer nofollow\">remark<\/a><\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/h4>\n<p><a href=\"https:\/\/github.com\/wooorm\" rel=\"noopener noreferrer nofollow\">Titus (wroom)<\/a> &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 <a href=\"https:\/\/github.com\/syntax-tree\/unist\" rel=\"noopener noreferrer nofollow\">unist<\/a>, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Unified \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 remark \u0438 rehype, \u0441\u0434\u0435\u043b\u0430\u043b 4100 \u0432\u043a\u043b\u0430\u0434\u0430 (\u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u0435\u0449\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 <a href=\"https:\/\/github.blog\/2013-01-07-introducing-contributions\/#repositories-contributed-to\" rel=\"noopener noreferrer nofollow\">contribution<\/a>) \u043d\u0430 github \u0437\u0430 2022 \u0433\u043e\u0434, \u043d\u043e \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e \u0447\u0438\u0441\u043b\u043e, \u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u0442 \u0434\u043d\u0435\u0439 \u0431\u0435\u0437 \u0432\u043a\u043b\u0430\u0434\u043e\u0432. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043a\u0430\u043a \u043e\u043d \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043e\u043a. <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>Processor API &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Unified<\/h3>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#processor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0444\u0430\u0437 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 AST \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430:<\/p>\n<ul>\n<li>\n<p>processor() &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440, \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>processor.use(plugin[, options]) &#8212; \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>processor.parse(file) &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c parser, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 AST<\/p>\n<\/li>\n<li>\n<p>processor.stringify(tree[, file]) &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c compiler, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>processor.run(tree[, file][, done]) &#8212; \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 AST \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>processor.runSync(tree[, file]) &#8212; \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 AST \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>processor.process(file[, done]) &#8212; \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST > \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f AST  >  \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>processor.processSync(file) &#8212; \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432: \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 AST > \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f AST  >  \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 AST \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430:<\/p>\n<pre><code>    import {unified} from 'unified'     import remarkParse from 'remark-parse'     import remarkRehype from 'remark-rehype'     import rehypeDocument from 'rehype-document'     import rehypeFormat from 'rehype-format'     import rehypeStringify from 'rehype-stringify'          const file = await unified()       .use(remarkParse)       .use(remarkRehype)       .use(rehypeDocument, {title: '??'})       .use(rehypeFormat)       .use(rehypeStringify)       .process('# Hello world!')          console.log(String(file)) <\/code><\/pre>\n<p>\u0412\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<pre><code># Hello world! <\/code><\/pre>\n<p>\u0412\u044b\u0445\u043e\u0434\u043d\u044b\u0435<\/p>\n<pre><code>&lt;!doctype html> &lt;html lang=\"en\">   &lt;head>     &lt;meta charset=\"utf-8\">     &lt;title>??&lt;\/title>     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">   &lt;\/head>   &lt;body>     &lt;h1>Hello world!&lt;\/h1>   &lt;\/body> &lt;\/html> <\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 use<\/h4>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#example-1\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a><\/p>\n<pre><code>unified()   \/\/ Plugin with options:   .use(pluginA, {x: true, y: true})   \/\/ Passing the same plugin again merges    \/\/ configuration (to `{x: true, y: false, z: true}`):   .use(pluginA, {y: false, z: true})   \/\/ Plugins:   .use([pluginB, pluginC])   \/\/ Two plugins, the second with options:   .use([pluginD, [pluginE, {}]])   \/\/ Preset with plugins and settings:   .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}})   \/\/ Settings only:   .use({settings: {position: false}}) <\/code><\/pre>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 run<\/h4>\n<p><a href=\"https:\/\/github.com\/unifiedjs\/unified#example-4\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a><\/p>\n<pre><code>import {unified} from 'unified' import remarkReferenceLinks from 'remark-reference-links' import {u} from 'unist-builder'  const tree = u('root', [   u('paragraph', [     u('link', {href: 'https:\/\/example.com'}, [u('text', 'Example Domain')])   ]) ]) const changedTree = await unified().use(remarkReferenceLinks).run(tree) <\/code><\/pre>\n<h4>\u041f\u0440<\/h><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-413789","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=413789"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413789\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}