Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonguo/react-code-view
A flexible playground for rendering Markdown and live editing React components.
https://github.com/simonguo/react-code-view
codeeditor markdown markdown-loader markdown-viewer playground react webpack
Last synced: 6 days ago
JSON representation
A flexible playground for rendering Markdown and live editing React components.
- Host: GitHub
- URL: https://github.com/simonguo/react-code-view
- Owner: simonguo
- License: mit
- Created: 2017-11-27T02:25:18.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T10:29:46.000Z (9 months ago)
- Last Synced: 2024-12-29T08:11:39.366Z (13 days ago)
- Topics: codeeditor, markdown, markdown-loader, markdown-viewer, playground, react, webpack
- Language: TypeScript
- Homepage: https://simonguo.github.io/react-code-view/
- Size: 22.2 MB
- Stars: 188
- Watchers: 5
- Forks: 31
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - react-code-view
README
# React Code View
**React Code View** can render source code in markdown documents. And brings you the ability to render React components with editable source code and live preview.
## Install
```
npm install react-code-view
```
### Configure Webpack
```js
// webpack.config.js
export default {
module: {
rules: [
{
test: /\.md$/,
loader: 'react-code-view/webpack-md-loader'
}
]
}
};
```
#### Options
```js
{
"parseLanguages": [
// Supported languages for highlight.js
// default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript"
// See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
],
"htmlOptions": {
// HTML Loader options
// See https://github.com/webpack-contrib/html-loader#options
},
"markedOptions": {
// Pass options to marked
// See https://marked.js.org/using_advanced#options
}
}
```
**webpack.config.js**
```js
export default {
module: {
rules: [
{
test: /\.md$/,
use:[
loader: 'react-code-view/webpack-md-loader',
options:{
parseLanguages: ['typescript','rust']
}
]
}
]
}
};
```
## Usage
```js
import CodeView from 'react-code-view';
import { Button } from 'rsuite';
import 'react-code-view/styles/react-code-view.css';
return (
{require('./example.md')}
);
```
The source code is written in markdown, refer to [example.md](https://raw.githubusercontent.com/simonguo/react-code-view/main/docs/example.md)
> Note: The code to be rendered must be placed between `` and ``
## Props
### ``
| Name | Type | Default value | Description |
| ----------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
| afterCompile | (code: string) => string | | Executed after compiling the code |
| beforeCompile | (code: string) => string | | Executed before compiling the code |
| children | any | | The code to be rendered is executed. Usually imported via markdown-loader |
| compileOptions | object | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms |
| dependencies | object | | Dependent objects required by the executed code |
| editable | boolean | false | Renders a code editor that can modify the source code |
| editor | object | | Editor properties |
| onChange | (code?: string) => void | | Callback triggered after code change |
| onCloseEditor | () => void | | Callback triggered when the editor is closed |
| onOpenEditor | () => void | | Callback triggered when the editor is opened |
| renderExtraFooter | () => ReactNode | | Customize the rendering footer |
| renderToolbar | (buttons: ReactNode) => ReactNode | | Customize the rendering toolbar |
| sourceCode | string | | The code to be rendered is executed |
| theme | 'light' , 'dark' | 'light' | Code editor theme, applied to CodeMirror |