@uiw/react-codemirror 4.9.3 → 4.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,7 +23,8 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
|
|
|
23
23
|
⚛️ Support the features of React Hook(requires React 16.8+).
|
|
24
24
|
📚 Use Typescript to write, better code hints.
|
|
25
25
|
🌐 The bundled version supports use directly in the browser [#267](https://github.com/uiwjs/react-codemirror/issues/267#issuecomment-1041227592).
|
|
26
|
-
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
|
|
26
|
+
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
|
|
27
|
+
🎨 Support [theme](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula) customization, provide theme [editor](https://uiwjs.github.io/react-codemirror/#/theme/editor).
|
|
27
28
|
|
|
28
29
|
## Install
|
|
29
30
|
|
|
@@ -75,13 +76,7 @@ func main() {
|
|
|
75
76
|
}`;
|
|
76
77
|
|
|
77
78
|
export default function App() {
|
|
78
|
-
return (
|
|
79
|
-
<CodeMirror
|
|
80
|
-
value={goLang}
|
|
81
|
-
height="200px"
|
|
82
|
-
extensions={[StreamLanguage.define(go)]}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
79
|
+
return <CodeMirror value={goLang} height="200px" extensions={[StreamLanguage.define(go)]} />;
|
|
85
80
|
}
|
|
86
81
|
```
|
|
87
82
|
|
|
@@ -168,6 +163,27 @@ export default function App() {
|
|
|
168
163
|
}
|
|
169
164
|
```
|
|
170
165
|
|
|
166
|
+
## Using Theme
|
|
167
|
+
|
|
168
|
+
We have created a [`theme editor`](https://uiwjs.github.io/react-codemirror/#/theme/editor) where you can define your own theme. We have also defined [some themes](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) ourselves, which can be installed and used directly. Below is a usage example:
|
|
169
|
+
|
|
170
|
+
```jsx
|
|
171
|
+
import CodeMirror from '@uiw/react-codemirror';
|
|
172
|
+
import { javascript } from '@codemirror/lang-javascript';
|
|
173
|
+
import { okaidia } from '@uiw/codemirror-theme-okaidia';
|
|
174
|
+
|
|
175
|
+
export default function App() {
|
|
176
|
+
return (
|
|
177
|
+
<CodeMirror
|
|
178
|
+
value="console.log('hello world!');"
|
|
179
|
+
height="200px"
|
|
180
|
+
theme={okaidia}
|
|
181
|
+
extensions={[javascript({ jsx: true })]}
|
|
182
|
+
/>
|
|
183
|
+
);
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
171
187
|
## Using custom theme
|
|
172
188
|
|
|
173
189
|
```jsx
|
|
@@ -177,7 +193,7 @@ import { javascript } from '@codemirror/lang-javascript';
|
|
|
177
193
|
import { tags as t } from '@lezer/highlight';
|
|
178
194
|
|
|
179
195
|
const myTheme = createTheme({
|
|
180
|
-
|
|
196
|
+
theme: 'light',
|
|
181
197
|
settings: {
|
|
182
198
|
background: '#ffffff',
|
|
183
199
|
foreground: '#75baff',
|