From 34ba805d6d55c62a33288cc254e3c4739d76b463 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 26 Mar 2024 15:01:05 +0800 Subject: [PATCH] doc(theme): update document. --- themes/abcdef/README.md | 14 +++++++++++ themes/abyss/README.md | 14 +++++++++++ themes/all/README.md | 36 +++++++++++++++------------- themes/androidstudio/README.md | 13 ++++++++++ themes/andromeda/README.md | 13 ++++++++++ themes/atomone/README.md | 13 ++++++++++ themes/aura/README.md | 13 ++++++++++ themes/basic/README.md | 13 ++++++++++ themes/bbedit/README.md | 13 ++++++++++ themes/bespin/README.md | 13 ++++++++++ themes/console/README.md | 13 ++++++++++ themes/copilot/README.md | 13 ++++++++++ themes/darcula/README.md | 13 ++++++++++ themes/dracula/README.md | 13 ++++++++++ themes/duotone/README.md | 13 ++++++++++ themes/eclipse/README.md | 13 ++++++++++ themes/github/README.md | 13 ++++++++++ themes/gruvbox/README.md | 13 ++++++++++ themes/kimbie/README.md | 13 ++++++++++ themes/material/README.md | 13 ++++++++++ themes/monokai-dimmed/README.md | 13 ++++++++++ themes/monokai/README.md | 13 ++++++++++ themes/noctis-lilac/README.md | 13 ++++++++++ themes/nord/README.md | 13 ++++++++++ themes/okaidia/README.md | 13 ++++++++++ themes/quietlight/README.md | 13 ++++++++++ themes/red/README.md | 13 ++++++++++ themes/solarized/README.md | 13 ++++++++++ themes/sublime/README.md | 13 ++++++++++ themes/tokyo-night-day/README.md | 13 ++++++++++ themes/tokyo-night-storm/README.md | 13 ++++++++++ themes/tokyo-night/README.md | 13 ++++++++++ themes/tomorrow-night-blue/README.md | 13 ++++++++++ themes/vscode/README.md | 13 ++++++++++ themes/white/README.md | 13 ++++++++++ themes/xcode/README.md | 13 ++++++++++ 36 files changed, 476 insertions(+), 17 deletions(-) diff --git a/themes/abcdef/README.md b/themes/abcdef/README.md index 8d508cfa5..41854bd9e 100644 --- a/themes/abcdef/README.md +++ b/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'; diff --git a/themes/abyss/README.md b/themes/abyss/README.md index dc9a5e3d4..8112c074b 100644 --- a/themes/abyss/README.md +++ b/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'; diff --git a/themes/all/README.md b/themes/all/README.md index 94080191b..869b3d469 100644 --- a/themes/all/README.md +++ b/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 diff --git a/themes/androidstudio/README.md b/themes/androidstudio/README.md index 022afc4c3..4ba5d62ec 100644 --- a/themes/androidstudio/README.md +++ b/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'; diff --git a/themes/andromeda/README.md b/themes/andromeda/README.md index 047d5f879..8c57b6b03 100644 --- a/themes/andromeda/README.md +++ b/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'; diff --git a/themes/atomone/README.md b/themes/atomone/README.md index 60660c5ef..0233ec9b9 100644 --- a/themes/atomone/README.md +++ b/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'; diff --git a/themes/aura/README.md b/themes/aura/README.md index c10718a8d..fc8b5358a 100644 --- a/themes/aura/README.md +++ b/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'; diff --git a/themes/basic/README.md b/themes/basic/README.md index 40751f712..82a41edf2 100644 --- a/themes/basic/README.md +++ b/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 diff --git a/themes/bbedit/README.md b/themes/bbedit/README.md index bfb561864..9f195a6dd 100644 --- a/themes/bbedit/README.md +++ b/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'; diff --git a/themes/bespin/README.md b/themes/bespin/README.md index 05fbe8bf4..adfdf0fbf 100644 --- a/themes/bespin/README.md +++ b/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'; diff --git a/themes/console/README.md b/themes/console/README.md index 0e1e0964a..2c1c5fc71 100644 --- a/themes/console/README.md +++ b/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 diff --git a/themes/copilot/README.md b/themes/copilot/README.md index a392b0e4d..68075f57a 100644 --- a/themes/copilot/README.md +++ b/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'; diff --git a/themes/darcula/README.md b/themes/darcula/README.md index 6d1ce0354..0d90b9877 100644 --- a/themes/darcula/README.md +++ b/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'; diff --git a/themes/dracula/README.md b/themes/dracula/README.md index e1f2572f8..9cba54a93 100644 --- a/themes/dracula/README.md +++ b/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'; diff --git a/themes/duotone/README.md b/themes/duotone/README.md index f45e28fb8..e57acf824 100644 --- a/themes/duotone/README.md +++ b/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'; diff --git a/themes/eclipse/README.md b/themes/eclipse/README.md index 45a06243b..2a563b28c 100644 --- a/themes/eclipse/README.md +++ b/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'; diff --git a/themes/github/README.md b/themes/github/README.md index 860648fae..c78a50bdf 100644 --- a/themes/github/README.md +++ b/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'; diff --git a/themes/gruvbox/README.md b/themes/gruvbox/README.md index 2a89c66dd..c5ee21828 100644 --- a/themes/gruvbox/README.md +++ b/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'; diff --git a/themes/kimbie/README.md b/themes/kimbie/README.md index f22debe3c..6de14d420 100644 --- a/themes/kimbie/README.md +++ b/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'; diff --git a/themes/material/README.md b/themes/material/README.md index ff881142b..d41317324 100644 --- a/themes/material/README.md +++ b/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'; diff --git a/themes/monokai-dimmed/README.md b/themes/monokai-dimmed/README.md index c02a9b2e9..a7d9a8921 100644 --- a/themes/monokai-dimmed/README.md +++ b/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'; diff --git a/themes/monokai/README.md b/themes/monokai/README.md index 56d72493e..eda2cb523 100644 --- a/themes/monokai/README.md +++ b/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'; diff --git a/themes/noctis-lilac/README.md b/themes/noctis-lilac/README.md index 8f0ab3479..d163e9b19 100644 --- a/themes/noctis-lilac/README.md +++ b/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'; diff --git a/themes/nord/README.md b/themes/nord/README.md index fdb96e50b..fe30e3d5f 100644 --- a/themes/nord/README.md +++ b/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'; diff --git a/themes/okaidia/README.md b/themes/okaidia/README.md index 1c5b35b0d..e1f7d4d46 100644 --- a/themes/okaidia/README.md +++ b/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'; diff --git a/themes/quietlight/README.md b/themes/quietlight/README.md index 576e02d19..320551039 100644 --- a/themes/quietlight/README.md +++ b/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'; diff --git a/themes/red/README.md b/themes/red/README.md index 637d7273e..de01fa1d5 100644 --- a/themes/red/README.md +++ b/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'; diff --git a/themes/solarized/README.md b/themes/solarized/README.md index 4dbe1ed21..8c10da658 100644 --- a/themes/solarized/README.md +++ b/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 diff --git a/themes/sublime/README.md b/themes/sublime/README.md index 4f178142d..e066e3eb2 100644 --- a/themes/sublime/README.md +++ b/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'; diff --git a/themes/tokyo-night-day/README.md b/themes/tokyo-night-day/README.md index 424b6e91f..3790e3c06 100644 --- a/themes/tokyo-night-day/README.md +++ b/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'; diff --git a/themes/tokyo-night-storm/README.md b/themes/tokyo-night-storm/README.md index a9ab00700..008fd11cb 100644 --- a/themes/tokyo-night-storm/README.md +++ b/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'; diff --git a/themes/tokyo-night/README.md b/themes/tokyo-night/README.md index 1757bcab0..361dfcbb7 100644 --- a/themes/tokyo-night/README.md +++ b/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'; diff --git a/themes/tomorrow-night-blue/README.md b/themes/tomorrow-night-blue/README.md index d24d78060..214a0748c 100644 --- a/themes/tomorrow-night-blue/README.md +++ b/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'; diff --git a/themes/vscode/README.md b/themes/vscode/README.md index 2ffe973e5..267cf49f0 100644 --- a/themes/vscode/README.md +++ b/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'; diff --git a/themes/white/README.md b/themes/white/README.md index 72297f126..4f0d63615 100644 --- a/themes/white/README.md +++ b/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 diff --git a/themes/xcode/README.md b/themes/xcode/README.md index 6506c7120..909d71d51 100644 --- a/themes/xcode/README.md +++ b/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';