doc(theme): update document.

Author: jaywcjlove

themes/abcdef/README.md

@@ -17,7 +17,21 @@
 npm install @uiw/codemirror-theme-abcdef --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { abcdef } from '@uiw/codemirror-theme-abcdef';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [abcdef, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
+import CodeMirror from '@uiw/react-codemirror';
 import { tags as t } from '@lezer/highlight';
 import { abcdef, abcdefInit } from '@uiw/codemirror-theme-abcdef';
 

themes/abyss/README.md

@@ -19,7 +19,21 @@ Abyss theme for cm6, generated from [vscode themes](https://github.com/microsoft
 npm install @uiw/codemirror-theme-abyss --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { abyss } from '@uiw/codemirror-theme-abyss';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [abyss, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
+import CodeMirror from '@uiw/react-codemirror';
 import { abyss, abyssInit } from '@uiw/codemirror-theme-abyss';
 
 <CodeMirror theme={abyss} />

themes/all/README.md

@@ -21,6 +21,25 @@ import * as themes from '@uiw/codemirror-themes-all';
 
 ## Usage
 
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { abcdef } from '@uiw/codemirror-themes-all';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [abcdef, javascript({ jsx: true })],
+});
+
+const view = new EditorView({
+  parent: document.querySelector('#editor'),
+  state,
+});
+```
+
+Using in React:
+
 ```jsx
 import CodeMirror from '@uiw/react-codemirror';
 import { abcdef } from '@uiw/codemirror-themes-all';
@@ -42,23 +61,6 @@ function App() {
 export default App;
 ```
 
-```js
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-import { javascript } from '@codemirror/lang-javascript';
-import { abcdef } from '@uiw/codemirror-themes-all';
-
-const state = EditorState.create({
-  doc: 'my source code',
-  extensions: [abcdef, javascript({ jsx: true })],
-});
-
-const view = new EditorView({
-  parent: document.querySelector('#editor'),
-  state,
-});
-```
-
 ## API
 
 ```ts

themes/androidstudio/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-androidstudio --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [androidstudio, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { androidstudio, androidstudioInit } from '@uiw/codemirror-theme-androidstudio';

themes/andromeda/README.md

@@ -19,6 +19,19 @@ Andromeda theme for cm6, generated from [vscode themes](https://github.com/Elive
 npm install @uiw/codemirror-theme-andromeda --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { andromeda } from '@uiw/codemirror-theme-andromeda';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [andromeda, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { andromeda, andromedaInit } from '@uiw/codemirror-theme-andromeda';
 

themes/atomone/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-atomone --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { atomone } from '@uiw/codemirror-theme-atomone';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [atomone, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { atomone, atomoneInit } from '@uiw/codemirror-theme-atomone';

themes/aura/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-aura --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { aura } from '@uiw/codemirror-theme-aura';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [aura, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { aura, auraInit } from '@uiw/codemirror-theme-aura';

themes/basic/README.md

@@ -21,6 +21,19 @@
 npm install @uiw/codemirror-theme-basic --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [basicDark, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { basicLight, basicLightInit, basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic';
 // Or

themes/bbedit/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-bbedit --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { bbedit } from '@uiw/codemirror-theme-bbedit';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [bbedit, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { bbedit, bbeditInit } from '@uiw/codemirror-theme-bbedit';

themes/bespin/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-bespin --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { bespin } from '@uiw/codemirror-theme-bespin';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [bespin, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { bespin, bespinInit } from '@uiw/codemirror-theme-bespin';

themes/console/README.md

@@ -25,6 +25,19 @@ One of the usages for react-codemirror is a logger component, but there is no th
 npm install @uiw/codemirror-theme-console --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [consoleDark],
+});
+```
+
+Using in React:
+
 ```jsx
 import { consoleLight, consoleLightInit, consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console';
 // Or

themes/copilot/README.md

@@ -19,6 +19,19 @@ Copilot theme for cm6, generated from [copilot-theme](https://github.com/benjami
 npm install @uiw/codemirror-theme-copilot --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [copilot, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { copilot, copilotInit } from '@uiw/codemirror-theme-copilot';
 

themes/darcula/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-darcula --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { darcula } from '@uiw/codemirror-theme-darcula';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [darcula, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { darcula, darculaInit } from '@uiw/codemirror-theme-darcula';

themes/dracula/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-dracula --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { dracula } from '@uiw/codemirror-theme-dracula';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [dracula, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { tags as t } from '@lezer/highlight';
 import { dracula, draculaInit } from '@uiw/codemirror-theme-dracula';

themes/duotone/README.md

@@ -21,6 +21,19 @@
 npm install @uiw/codemirror-theme-duotone --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [duotoneDark, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { duotoneLight, duotoneLightInit, duotoneDark, duotoneDarkInit } from '@uiw/codemirror-theme-duotone';
 

themes/eclipse/README.md

@@ -17,6 +17,19 @@
 npm install @uiw/codemirror-theme-eclipse --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { eclipse } from '@uiw/codemirror-theme-eclipse';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [eclipse, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { defaultSettingsEclipse } from '@uiw/codemirror-theme-eclipse';
 import { eclipse, eclipseInit } from '@uiw/codemirror-theme-eclipse';

themes/github/README.md

@@ -21,6 +21,19 @@
 npm install @uiw/codemirror-theme-github --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [githubDark, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { githubLight, githubLightInit, githubDark, githubDarkInit } from '@uiw/codemirror-theme-github';
 

themes/gruvbox/README.md

@@ -23,6 +23,19 @@ This package implements the [gruvbox](https://github.com/morhetz/gruvbox) light
 npm install @uiw/codemirror-theme-gruvbox-dark --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [gruvboxDark, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { gruvboxDark, gruvboxDarkInit, gruvboxLight, gruvboxLightInit } from '@uiw/codemirror-theme-nord';