{"id":16384756,"url":"https://github.com/saber2pr/react-code","last_synced_at":"2026-05-17T02:02:49.582Z","repository":{"id":57139232,"uuid":"179451126","full_name":"Saber2pr/react-code","owner":"Saber2pr","description":"a code text component for react!","archived":false,"fork":false,"pushed_at":"2019-04-08T05:41:59.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T02:22:49.236Z","etag":null,"topics":["code","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Saber2pr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-04T08:04:55.000Z","updated_at":"2019-06-23T06:53:50.000Z","dependencies_parsed_at":"2022-09-04T18:12:36.701Z","dependency_job_id":null,"html_url":"https://github.com/Saber2pr/react-code","commit_stats":null,"previous_names":["saber2pr/saber-react-code"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saber2pr%2Freact-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saber2pr%2Freact-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saber2pr%2Freact-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saber2pr%2Freact-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Saber2pr","download_url":"https://codeload.github.com/Saber2pr/react-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240118329,"owners_count":19750471,"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":["code","react","typescript"],"created_at":"2024-10-11T04:12:17.583Z","updated_at":"2026-05-15T00:30:23.707Z","avatar_url":"https://github.com/Saber2pr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @saber2pr/react-code\n\n[![npm](https://img.shields.io/npm/v/@saber2pr/react-code.svg?color=blue)](https://www.npmjs.com/package/@saber2pr/react-code)\n\n\u003e a code text component for react!\n\n```bash\n# from npm\nnpm install @saber2pr/react-code\n\n# from github\ngit clone https://github.com/Saber2pr/saber-react-code.git\n```\n\n```tsx\nconst code = `\n下面是代码\n\\`\\`\\`ts\n/**\n * 全局作用域\n */\ndeclare global {\n  /**\n   * windaow接口\n   */\n  interface Window {\n    test:string // 添加属性\n  }\n}\n\\`\\`\\`\n上面是代码`\n\nconst App = () =\u003e {\n  const [state, setState] = useState(code)\n  return (\n    \u003c\u003e\n      \u003cCode\u003e{state}\u003c/Code\u003e\n      \u003cEditable onSave={setState}\u003e{state}\u003c/Editable\u003e\n    \u003c/\u003e\n  )\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\n# \\\u003cCode\\/\\\u003e\n\n代码块使用\\`\\`\\`ts 开始，\\`\\`\\`结束\n\n```tsx\n\u003cCode\u003e{/* 含有代码的文本 */}\u003c/Code\u003e\n```\n\n属性：\n\n1. start 代码块开始标记，默认为 \\`\\`\\`ts\n2. end 代码块结束标记，默认为 \\`\\`\\`\n3. keywords 关键字，可自定义 color\n\n# \\\u003cEditable\\/\\\u003e\n\n可编辑的含代码文本域\n\n```tsx\n\u003cEditable\u003e{/* 含有代码的文本 */}\u003c/Editable\u003e\n```\n\n属性：\n\n1. width\n2. height\n3. onSave 保存事件回调\n4. status 初始化状态 'edit' 或者 'view'\n\n# 自定义关键字\n\n使用或扩展已经定义的关键字\n\n```tsx\nexport type ColorWord = {\n  word: string\n  color: string\n}\n\nexport type KeyWords = ColorWord[]\n\n// 本项目已经定义的关键字\nimport { KEYWORDS } from '@saber2pr/react-code'\n\n// 可以在已有基础上扩展\nconst MyKeywords = [\n  ...KEYWORDS,\n  {\n    word: 'hello',\n    color: '#bb75b2'\n  }\n]\n\n\u003cCode keywords={MyKeywords}\u003e{/* 含有代码的文本 */}\u003c/Code\u003e\n```\n\n---\n\n# Errors\n\n[Errors](https://github.com/Saber2pr/saber-react-code/blob/master/docs/error.md#errors)\n\n---\n\n## start\n\n```bash\nnpm install\n```\n\n```bash\nnpm start\n\nnpm run dev\n\n```\n\n\u003e Author: saber2pr\n\n---\n\n## develope and test\n\n\u003e you should write ts in /src\n\n\u003e you should make test in /src/test\n\n\u003e export your core in /src/index.ts!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaber2pr%2Freact-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaber2pr%2Freact-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaber2pr%2Freact-code/lists"}