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';