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

themes/kimbie/README.md

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

themes/material/README.md

@@ -23,6 +23,19 @@ This package implements the [Material](https://material.io/tools/color/) Dark th
 npm install @uiw/codemirror-theme-material --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { material } from '@uiw/codemirror-theme-material';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [material, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { materialDark, materialDarkInit, materialLight, materialLightInit } from '@uiw/codemirror-theme-material';
 

themes/monokai-dimmed/README.md

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

themes/monokai/README.md

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

themes/noctis-lilac/README.md

@@ -19,6 +19,19 @@ This package implements the noctis-lilac for the CodeMirror code editor.
 npm install @uiw/codemirror-theme-noctis-lilac --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [noctisLilac, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { noctisLilac, noctisLilacInit } from '@uiw/codemirror-theme-noctis-lilac';
 

themes/nord/README.md

@@ -19,6 +19,19 @@ This package implements the [nord theme](https://www.nordtheme.com/) for the Cod
 npm install @uiw/codemirror-theme-nord --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { nord } from '@uiw/codemirror-theme-nord';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [nord, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { nord, nordInit } from '@uiw/codemirror-theme-nord';
 

themes/okaidia/README.md

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

themes/quietlight/README.md

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

themes/red/README.md

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

themes/solarized/README.md

@@ -23,6 +23,19 @@ This package implements the [Solarized](https://ethanschoonover.com/solarized/)
 npm install @uiw/codemirror-theme-solarized --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [solarizedLight, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { solarizedLight, solarizedLightInit, solarizedDark, solarizedDarkInit } from '@uiw/codemirror-theme-solarized';
 // Or

themes/sublime/README.md

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

themes/tokyo-night-day/README.md

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

themes/tokyo-night-storm/README.md

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

themes/tokyo-night/README.md

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

themes/tomorrow-night-blue/README.md

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

themes/vscode/README.md

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

themes/white/README.md

@@ -23,6 +23,19 @@ White theme for cm6, generated from [white-theme](https://github.com/xthezealot/
 npm install @uiw/codemirror-theme-white --save
 ```
 
+```js
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { whiteDark, whiteDarkInit } from '@uiw/codemirror-theme-white/dark';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [whiteDark, javascript({ jsx: true })],
+});
+```
+
+Using in React:
+
 ```jsx
 import { whiteLight, whiteLightInit, whiteDark, whiteDarkInit } from '@uiw/codemirror-theme-white';
 // Or

themes/xcode/README.md

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