代码编辑器 CodeMirror
一个使用 CodeMirror 创建代码编辑器的元素。
支持超过 140 种语言的语法高亮、30 余种主题、行号显示、代码折叠、（有限的）自动补全等功能。
支持的语言
支持的语言列表可查看 @codemirror/language-data 包。
译者也推荐您参阅 nicegui/elements/codemirror.py 的 SUPPORTED_LANGUAGES 容器：
python
SUPPORTED_LANGUAGES = Literal[
'Angular Template',
'APL',
'ASN.1',
'Asterisk',
'Brainfuck',
'C',
'C#',
'C++',
'Clojure',
'ClojureScript',
'Closure Stylesheets (GSS)',
'CMake',
'Cobol',
'CoffeeScript',
'Common Lisp',
'CQL',
'Crystal',
'CSS',
'Cypher',
'Cython',
'D',
'Dart',
'diff',
'Dockerfile',
'DTD',
'Dylan',
'EBNF',
'ECL',
'edn',
'Eiffel',
'Elm',
'Erlang',
'Esper',
'F#',
'Factor',
'FCL',
'Forth',
'Fortran',
'Gas',
'Gherkin',
'Go',
'Groovy',
'Haskell',
'Haxe',
'HTML',
'HTTP',
'HXML',
'IDL',
'Java',
'JavaScript',
'Jinja2',
'JSON',
'JSON-LD',
'JSX',
'Julia',
'Kotlin',
'LaTeX',
'LESS',
'Liquid',
'LiveScript',
'Lua',
'MariaDB SQL',
'Markdown',
'Mathematica',
'Mbox',
'mIRC',
'Modelica',
'MS SQL',
'MscGen',
'MsGenny',
'MUMPS',
'MySQL',
'Nginx',
'NSIS',
'NTriples',
'Objective-C',
'Objective-C++',
'OCaml',
'Octave',
'Oz',
'Pascal',
'Perl',
'PGP',
'PHP',
'Pig',
'PLSQL',
'PostgreSQL',
'PowerShell',
'Properties files',
'ProtoBuf',
'Pug',
'Puppet',
'Python',
'Q',
'R',
'RPM Changes',
'RPM Spec',
'Ruby',
'Rust',
'SAS',
'Sass',
'Scala',
'Scheme',
'SCSS',
'Shell',
'Sieve',
'Smalltalk',
'SML',
'Solr',
'SPARQL',
'Spreadsheet',
'SQL',
'SQLite',
'Squirrel',
'sTeX',
'Stylus',
'Swift',
'SystemVerilog',
'Tcl',
'Textile',
'TiddlyWiki',
'Tiki wiki',
'TOML',
'Troff',
'TSX',
'TTCN',
'TTCN_CFG',
'Turtle',
'TypeScript',
'VB.NET',
'VBScript',
'Velocity',
'Verilog',
'VHDL',
'Vue',
'Web IDL',
'WebAssembly',
'XML',
'XQuery',
'Xù',
'Yacas',
'YAML',
'Z80',
]支持的主题
主题列表可查看 @uiw/codemirror-themes-all 包。
同样的，译者也推荐您参阅 nicegui/elements/codemirror.py 的 SUPPORTED_THEMES 容器：
python
SUPPORTED_THEMES = Literal[
'abcdef',
'abcdefDarkStyle',
'abyss',
'abyssDarkStyle',
'androidstudio',
'androidstudioDarkStyle',
'andromeda',
'andromedaDarkStyle',
'atomone',
'atomoneDarkStyle',
'aura',
'auraDarkStyle',
'basicDark',
'basicDarkStyle',
'basicLight',
'basicLightStyle',
'bbedit',
'bbeditLightStyle',
'bespin',
'bespinDarkStyle',
'consoleDark',
'consoleLight',
'copilot',
'copilotDarkStyle',
'darcula',
'darculaDarkStyle',
'douToneLightStyle',
'dracula',
'draculaDarkStyle',
'duotoneDark',
'duotoneDarkStyle',
'duotoneLight',
'eclipse',
'eclipseLightStyle',
'githubDark',
'githubDarkStyle',
'githubLight',
'githubLightStyle',
'gruvboxDark',
'gruvboxDarkStyle',
'gruvboxLight',
'kimbie',
'kimbieDarkStyle',
'material',
'materialDark',
'materialDarkStyle',
'materialLight',
'materialLightStyle',
'monokai',
'monokaiDarkStyle',
'monokaiDimmed',
'monokaiDimmedDarkStyle',
'noctisLilac',
'noctisLilacLightStyle',
'nord',
'nordDarkStyle',
'okaidia',
'okaidiaDarkStyle',
'oneDark',
'quietlight',
'quietlightStyle',
'red',
'redDarkStyle',
'solarizedDark',
'solarizedDarkStyle',
'solarizedLight',
'solarizedLightStyle',
'sublime',
'sublimeDarkStyle',
'tokyoNight',
'tokyoNightDay',
'tokyoNightDayStyle',
'tokyoNightStorm',
'tokyoNightStormStyle',
'tokyoNightStyle',
'tomorrowNightBlue',
'tomorrowNightBlueStyle',
'vscodeDark',
'vscodeDarkStyle',
'vscodeLight',
'vscodeLightStyle',
'whiteDark',
'whiteDarkStyle',
'whiteLight',
'whiteLightStyle',
'xcodeDark',
'xcodeDarkStyle',
'xcodeLight',
'xcodeLightStyle',
]| 参数 Param | 说明 Description |
|---|---|
| value | 编辑器的初始值 |
| on_change | 当编辑器中的内容被改变时的回调函数 |
| language | 编辑器的初始语言 (不区分大小写，默认值: None) |
| theme | 编辑器的初始主题 (默认值: "basicLight") |
| indent | 用于缩进的字符串 (必须由相同空白字符组成的任意字符，默认值: " ") |
| line_wrapping | 是否自动换行 (默认值: False) |
| highlight_whitespace | 是否高亮空白字符 (默认值: False) |
python
from nicegui import ui
editor = ui.codemirror('print("开始您的编辑")', language='Python').classes('h-32')
ui.select(editor.supported_languages, label='Language', clearable=True) \
.classes('w-32').bind_value(editor, 'language')
ui.select(editor.supported_themes, label='Theme') \
.classes('w-32').bind_value(editor, 'theme')
ui.run()