Package Exports

@saber2pr/react-code

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@saber2pr/react-code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@saber2pr/react-code

a code text component for react!

# from npm
npm install @saber2pr/react-code

# from github
git clone https://github.com/Saber2pr/saber-react-code.git

const code = `
下面是代码
\`\`\`ts
/**
 * 全局作用域
 */
declare global {
  /**
   * windaow接口
   */
  interface Window {
    test:string // 添加属性
  }
}
\`\`\`
上面是代码`

const App = () => {
  const [state, setState] = useState(code)
  return (
    <>
      <Code>{state}</Code>
      <Editable onSave={setState}>{state}</Editable>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<Code/>

代码块使用```ts 开始，```结束

<Code>{/* 含有代码的文本 */}</Code>

属性：

start 代码块开始标记，默认为 ```ts
end 代码块结束标记，默认为 ```
keywords 关键字，可自定义 color

<Editable/>

可编辑的含代码文本域

<Editable>{/* 含有代码的文本 */}</Editable>

属性：

width
height
onSave 保存事件回调
status 初始化状态 'edit' 或者 'view'

自定义关键字

使用或扩展已经定义的关键字

export type ColorWord = {
  word: string
  color: string
}

export type KeyWords = ColorWord[]

// 本项目已经定义的关键字
import { KEYWORDS } from '@saber2pr/react-code'

// 可以在已有基础上扩展
const MyKeywords = [
  ...KEYWORDS,
  {
    word: 'hello',
    color: '#bb75b2'
  }
]

<Code keywords={MyKeywords}>{/* 含有代码的文本 */}</Code>

Errors

start

npm install

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!