https://github.com/saber2pr/react-code
a code text component for react!
https://github.com/saber2pr/react-code
code react typescript
Last synced: 11 months ago
JSON representation
a code text component for react!
- Host: GitHub
- URL: https://github.com/saber2pr/react-code
- Owner: Saber2pr
- Created: 2019-04-04T08:04:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T05:41:59.000Z (almost 7 years ago)
- Last Synced: 2025-01-23T02:22:49.236Z (about 1 year ago)
- Topics: code, react, typescript
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @saber2pr/react-code
[](https://www.npmjs.com/package/@saber2pr/react-code)
> a code text component for react!
```bash
# from npm
npm install @saber2pr/react-code
# from github
git clone https://github.com/Saber2pr/saber-react-code.git
```
```tsx
const code = `
下面是代码
\`\`\`ts
/**
* 全局作用域
*/
declare global {
/**
* windaow接口
*/
interface Window {
test:string // 添加属性
}
}
\`\`\`
上面是代码`
const App = () => {
const [state, setState] = useState(code)
return (
<>
{state}
{state}
>
)
}
ReactDOM.render(, document.getElementById('root'))
```
# \
代码块使用\`\`\`ts 开始，\`\`\`结束
```tsx
{/* 含有代码的文本 */}
```
属性：
1. start 代码块开始标记，默认为 \`\`\`ts
2. end 代码块结束标记，默认为 \`\`\`
3. keywords 关键字，可自定义 color
# \
可编辑的含代码文本域
```tsx
{/* 含有代码的文本 */}
```
属性：
1. width
2. height
3. onSave 保存事件回调
4. status 初始化状态 'edit' 或者 'view'
# 自定义关键字
使用或扩展已经定义的关键字
```tsx
export type ColorWord = {
word: string
color: string
}
export type KeyWords = ColorWord[]
// 本项目已经定义的关键字
import { KEYWORDS } from '@saber2pr/react-code'
// 可以在已有基础上扩展
const MyKeywords = [
...KEYWORDS,
{
word: 'hello',
color: '#bb75b2'
}
]
{/* 含有代码的文本 */}
```
---
# Errors
[Errors](https://github.com/Saber2pr/saber-react-code/blob/master/docs/error.md#errors)
---
## start
```bash
npm install
```
```bash
npm start
npm run dev
```
> Author: saber2pr
---
## develope and test
> you should write ts in /src
> you should make test in /src/test
> export your core in /src/index.ts!