{"id":20349770,"url":"https://github.com/yozorajs/yozora-react","last_synced_at":"2025-04-12T01:32:20.166Z","repository":{"id":57169923,"uuid":"310304728","full_name":"yozorajs/yozora-react","owner":"yozorajs","description":"Render Yozora AST into react components","archived":false,"fork":false,"pushed_at":"2025-03-26T04:26:03.000Z","size":12959,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T21:44:41.963Z","etag":null,"topics":["markdown-ast","markdown-ast-renderer","markdown-react","yozora"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yozorajs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-05T13:17:12.000Z","updated_at":"2025-03-26T04:26:06.000Z","dependencies_parsed_at":"2024-06-21T04:20:25.807Z","dependency_job_id":"ecc48d83-882e-45ef-a34a-0375a71f2928","html_url":"https://github.com/yozorajs/yozora-react","commit_stats":{"total_commits":708,"total_committers":2,"mean_commits":354.0,"dds":0.1426553672316384,"last_synced_commit":"99ef476aec74fea15e17c7d90eac08c372066951"},"previous_names":["guanghechen/yozora-react"],"tags_count":387,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yozorajs%2Fyozora-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yozorajs%2Fyozora-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yozorajs%2Fyozora-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yozorajs%2Fyozora-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yozorajs","download_url":"https://codeload.github.com/yozorajs/yozora-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248504214,"owners_count":21115134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown-ast","markdown-ast-renderer","markdown-react","yozora"],"created_at":"2024-11-14T22:27:21.334Z","updated_at":"2025-04-12T01:32:20.132Z","avatar_url":"https://github.com/yozorajs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cheader\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u003ca href=\"https://github.com/yozorajs/yozora-react#readme\"\u003eYozora React\u003c/a\u003e\n  \u003c/h1\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"#license\"\u003e\n      \u003cimg\n        alt=\"License\"\n        src=\"https://img.shields.io/github/license/guanghechen/yozora-react\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/yozorajs/yozora-react/search?l=typescript\"\u003e\n      \u003cimg\n        alt=\"Github Top Language\"\n        src=\"https://img.shields.io/github/languages/top/guanghechen/yozora-react\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/nodejs/node\"\u003e\n      \u003cimg\n        alt=\"Node.js Version\"\n        src=\"https://img.shields.io/node/v/@yozora/react-blockquote\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/yozorajs/yozora-react/actions/workflows/ci.yml\"\u003e\n      \u003cimg\n        alt=\"CI Workflow\"\n        src=\"https://github.com/yozorajs/yozora-react/actions/workflows/ci.yml/badge.svg\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/facebook/react\"\u003e\n      \u003cimg\n        alt=\"React version\"\n        src=\"https://img.shields.io/npm/dependency-version/@yozora/react-blockquote/peer/react\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/facebook/jest\"\u003e\n      \u003cimg\n        alt=\"Tested with Jest\"\n        src=\"https://img.shields.io/badge/tested_with-jest-9c465e.svg\"\n      /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n      \u003cimg\n        alt=\"Code Style: prettier\"\n        src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\n      /\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/header\u003e\n\nA monorepo contains react components render [Yozora AST Nodes][yozora/admonition]. See\nhttps://yozora.guanghechen.com for details.\n\nUse [@yozora/react-markdown][] to render the [@yozora/ast][yozora/ast].\n\nhttps://user-images.githubusercontent.com/42513619/129205123-6a1983c4-6a86-4c80-83d6-02bdbf70edbf.mp4\n\n## Usage\n\nSee [@yozora/react-markdown][]\n\n- npm\n\n  ```bash\n  npm install --save @yozora/react-markdown\n  ```\n\n- yarn\n\n  ```bash\n  yarn add @yozora/react-markdown\n  ```\n\n```tsx\nimport loadable from '@loadable/component'\nimport { calcDefinitionMap, calcFootnoteDefinitionMap } from '@yozora/ast-util'\nimport { Theme, ThemeProvider } from '@yozora/core-react-theme'\nimport YozoraParser from '@yozora/parser'\nimport { MathJaxProvider, Markdown, MarkdownProvider } from '@yozora/react-markdown'\n\nconst ImageViewer = loadable(() =\u003e import('react-viewer'))\n\nconst parser = new YozoraParser()\nconst ast = parser.parse(`source markdown contents`, { shouldReservePosition: true })\nconst definitionMap = calcDefinitionMap(ast)\nconst footnoteDefinitionMap = calcFootnoteDefinitionMap(ast)\n\n\u003cMathJaxProvider\u003e\n  \u003cThemeProvider theme={Theme.LIGHT}\u003e\n    \u003cMarkdownProvider\n      definitionMap={definitionMap}\n      footnoteDefinitionMap={footnoteDefinitionMap}\n      ImageViewer={ImageViewer}\n    \u003e\n      \u003cMarkdown ast={ast} /\u003e\n    \u003c/MarkdownProvider\u003e\n  \u003c/ThemeProvider\u003e\n\u003c/MathJaxProvider\u003e\n```\n\n## Overview\n\n## Core\n\n|          Package Name           | Description                                             |\n| :-----------------------------: | :------------------------------------------------------ |\n| [@yozora/core-react-renderer][] | Provider `NodesRenderer` and simple markdown renderers. |\n|  [@yozora/core-react-theme][]   | Provider markdown theme context.                        |\n\n### Markdown components\n\n|         Package Name         | Token Name                      |\n| :--------------------------: | :------------------------------ |\n| [@yozora/react-admonition][] | [admonition][yozora/admonition] |\n|    [@yozora/react-code][]    | [code][yozora/code]             |\n\n### Other components\n\n|               Package Name               | Description                                                                    |\n| :--------------------------------------: | :----------------------------------------------------------------------------- |\n|      [@yozora/react-code-editor][]       | A simple code editor.                                                          |\n|       [@yozora/react-code-embed][]       | A simple code editor online.                                                   |\n|    [@yozora/react-code-highlighter][]    | Highlight codes.                                                               |\n|      [@yozora/react-code-literal][]      | Render literal code block.                                                     |\n|       [@yozora/react-code-live][]        | A live code editor, be similar to [react-live][].                              |\n|   [@yozora/react-code-renderer-jsx][]    | React component for rendering jsx directly in browser.                         |\n| [@yozora/react-code-renderer-graphviz][] | React component for rendering graphviz (dot) directly in browser.              |\n|        [@yozora/react-markdown][]        | React component for rendering markdown content with above Markdown Components. |\n|        [@yozora/react-mathjax][]         | Render formula with mathjax in react.                                          |\n\n[react-live]: https://github.com/FormidableLabs/react-live\n\n\u003c!-- yozora component links --\u003e\n\n[@yozora/core-react-renderer]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/core-react-renderer#readme\n[@yozora/core-react-theme]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/core-react-theme#readme\n[@yozora/react-admonition]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-admonition#readme\n[@yozora/react-code]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code#readme\n[@yozora/react-code-editor]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-editor#readme\n[@yozora/react-code-embed]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-embed#readme\n[@yozora/react-code-highlighter]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-highlighter#readme\n[@yozora/react-code-literal]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-literal#readme\n[@yozora/react-code-live]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-live#readme\n[@yozora/react-code-renderer-jsx]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-renderer-jsx#readme\n[@yozora/react-code-renderer-graphviz]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-code-renderer-graphviz#readme\n[@yozora/react-markdown]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-markdown#readme\n[@yozora/react-mathjax]:\n  https://github.com/yozorajs/yozora-react/tree/release-2.x.x/packages/react-mathjax#readme\n[yozora/ast]: https://www.npmjs.com/package/@yozora/ast\n[yozora/admonition]: https://www.npmjs.com/package/@yozora/ast#admonition\n[yozora/blockquote]: https://www.npmjs.com/package/@yozora/ast#blockquote\n[yozora/break]: https://www.npmjs.com/package/@yozora/ast#break\n[yozora/code]: https://www.npmjs.com/package/@yozora/ast#code\n[yozora/delete]: https://www.npmjs.com/package/@yozora/ast#delete\n[yozora/emphasis]: https://www.npmjs.com/package/@yozora/ast#emphasis\n[yozora/footnote-definition]: https://www.npmjs.com/package/@yozora/ast#footnotedefinition\n[yozora/footnote-reference]: https://www.npmjs.com/package/@yozora/ast#footnotereference\n[yozora/heading]: https://www.npmjs.com/package/@yozora/ast#heading\n[yozora/html]: https://www.npmjs.com/package/@yozora/ast#html\n[yozora/image]: https://www.npmjs.com/package/@yozora/ast#image\n[yozora/image-reference]: https://www.npmjs.com/package/@yozora/ast#imagereference\n[yozora/inline-code]: https://www.npmjs.com/package/@yozora/ast#inlinecode\n[yozora/inline-math]: https://www.npmjs.com/package/@yozora/ast#inlinemath\n[yozora/link]: https://www.npmjs.com/package/@yozora/ast#link\n[yozora/link-reference]: https://www.npmjs.com/package/@yozora/ast#linkreference\n[yozora/definition]: https://www.npmjs.com/package/@yozora/ast#definition\n[yozora/list]: https://www.npmjs.com/package/@yozora/ast#list\n[yozora/list-item]: https://www.npmjs.com/package/@yozora/ast#listitem\n[yozora/math]: https://www.npmjs.com/package/@yozora/ast#math\n[yozora/paragraph]: https://www.npmjs.com/package/@yozora/ast#paragraph\n[yozora/setext-heading]: https://www.npmjs.com/package/@yozora/ast#setextheading\n[yozora/table]: https://www.npmjs.com/package/@yozora/ast#table\n[yozora/table-cell]: https://www.npmjs.com/package/@yozora/ast#tablecell\n[yozora/table-row]: https://www.npmjs.com/package/@yozora/ast#tablerow\n[yozora/text]: https://www.npmjs.com/package/@yozora/ast#text\n[yozora/thematic-break]: https://www.npmjs.com/package/@yozora/ast#thematicbreak\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyozorajs%2Fyozora-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyozorajs%2Fyozora-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyozorajs%2Fyozora-react/lists"}