https://github.com/saber2pr/react-code

a code text component for react!
https://github.com/saber2pr/react-code

code react typescript

Last synced: 2 days 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 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-08T05:41:59.000Z (over 5 years ago)
• Last Synced: 2024-12-23T00:37:18.701Z (13 days 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

[![npm](https://img.shields.io/npm/v/@saber2pr/react-code.svg?color=blue)](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!