Ace编辑器 - 使用额外主题，自定义主题

Question

Ace编辑器 - 使用额外主题，自定义主题

javascriptthemesace-editor

8

有没有办法自定义Ace编辑器主题或使用一些额外的外部主题？

我没有找到相关信息...希望有方法可以实现。

这里有一个基本演示，用于测试预定义的主题。

- user3746998

3个回答

3

这里有很多主题示例：https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict

例如，这是 monokai 主题的源代码：https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-monokai.js

您可以复制一个主题文件并进行自定义。由于代码仅约有100行，因此不应该难以完成。然后将其包含在 script 标签中或在 node 中使用 require（在 ace 被包含之后）。

- Tyler Liu

2

主题只是一对CSS和JS文件，参见https://github.com/ajaxorg/ace/blob/v1.4.5/lib/ace/theme/textmate.js和https://github.com/ajaxorg/ace/blob/v1.4.5/lib/ace/theme/textmate.css。

- a user

两个链接都失效了。 - Fred Gandt

在新版本中，代码被移动到src文件夹 https://github.com/ajaxorg/ace/blob/master/src/theme/textmate.js - a user

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NVRM · Accepted Answer

在Ace编辑器文档中看到了这个：具有大量预定义主题的主题编辑器：

https://tmtheme-editor.herokuapp.com/#!/editor/theme/1337

从那里，我提取了整个主题名称列表：

编辑：列表已更新，截至2020年初

暗色主题：

1337
3024 (Night)
A Touch Of Crayon Easter Egg Edition
A Touch Of Crayon
Aaren The Subtle
Abdal Black Hackers 2
Abdal Black Hackers
Abyss
Agola Dark
Agolagreen
Agolanimbus
All Hallow's Eve
Amber
Amiga (rebel) Dark
Amiga Dark
Amy
Amycable
Anarchist
Anatomy Of Grey
Ant
Antigua
AP-Darcula
Appealr Color Scheme
Apple Ii
Apple Pips (dark)
Arabian Nights
Arstotzka
Ascetic Black
Ascetic
Asphalt
Atari St
Atom Dark
Aurora
Autumn
Axar
Azure
Baara Dark
Baby, The Code Shines Bright
Barcelona (dark)
Base16 3024 Dark
Base16 Apathy Dark
Base16 Ashes Dark
Base16 Atelierdune Dark
Base16 Atelierforest Dark
Base16 Atelierheath Dark
Base16 Atelierlakeside Dark
Base16 Atelierseaside Dark
Base16 Bespin Dark
Base16 Brewer Dark
Base16 Bright Dark
Base16 Chalk Dark
Base16 Codeschool Dark
Base16 Colors Dark
Base16 Default Dark
Base16 Eighties Dark
Base16 Embers Dark
Base16 Emokid Dark
Base16 Flat Dark
Base16 Google Dark
Base16 Grayscale Dark
Base16 Greenscreen Dark
Base16 Harmonic16 Dark
Base16 Isotope Dark
Base16 Londontube Dark
Base16 Marrakesh Dark
Base16 Melon Dark
Base16 Mocha Dark
Base16 Monokai Dark
Base16 Ocean Dark
Base16 Paraiso Dark
Base16 Pastel Paws
Base16 Pop Dark
Base16 Railscasts Dark
Base16 Shapeshifter Dark
Base16 Solarized Dark
Base16 Summerfruit Dark
Base16 Tomorrow Dark
Base16 Twilight Dark
Behave
Belafonte (Night)
Berlin (dark)
Bespin
Birds of Paradise
Black Pearl II
Black Pearl
Blackboard Black
Blackboard
Blue Thunder
Blue Zen
Blue
Blueprint
Blusted
Bold
Bone-a-kite
Boneyfied
Bongzilla
Borland
Boron
Broadcast
Brunette
Bubububububad
Buenos Aires (dark)
Calydon Plain
Calydon
Carbonight Contrast
Carbonight
Cga
Charcoal
Cheerfully Dark
Chicago (dark)
Chocolate
Chouku
Chromodynamics
Chuby Ninja
Ciapre
Ciapreblack (blue Selection)
CiapreBlack
Citizen Kane
Citrus-Power
Close To The Sea
Clouds Midnight
Coal Graal
Cobalt
Cobalt2
Coderunner
Coffee
Commodore 64 Dark
Commodore 64
Copenhagen (dark)
Crayon Pony Fish
Crisp
Cube2Media
Dark Room (Contrast)
Dark Room (Normal)
Dark
Darklime
DarkNeon
DarkPastel
Darkside Contrast
Darkside
Darkula
Deep Blue See
Desert
Devastate
Devastatemini
Dimmed Base16
Dimmed GitLab
Dimmed Monokai
Dimmed Night
Dimmed NoContrast v2
Dimmed NoContrast
Dimmed Phalcon
Dimmed Storm
Django (Smoothy)
Dobdark
Dogs
Donatello
DownedRainbow
Dracula
Drive Dark
Drive
Druid
Dusk
Duuuuude
Earth
Earthsong Contrast
Earthsong
EasyBalls
Ega
EggplantParm
Emacs Strict
Emokid Alt
Emokid Dark
Emokid Midnight
Emokid Pastel
Emokid
Energy
Enlightened
Entheogen
Espresso Libre
Express
Eye Salvation - Dark
Factus 12c
Fade to Grey
Failcoder
fcgrx dark
Fengshui
Finder Light
Finder
Firecode
Fizzy
Flatland
Flatron
FluoroMachine
Focus (dark)
Fox Dark
Freshcut Contrast
Freshcut
Friendship Bracelet
FrontEndDelight
Frontier Contrast
Frontier
Fullhouse
Future Funk (blue Codeception)
Future Funk (blue Monday)
Future Funk (grey Codeception)
Future Funk (grey Tuesday)
GDL dark
ggDark
Ghettocoffeescript
Glacier
GlitterBomb
Gloom Contrast
Gloom
Glowfish Contrast
Glowfish
Goldendragon
Goldfish Contrast
Goldfish
Gray Matter Dark
Green
Grunge Contrast
Grunge
Gruntilda
Gruvbox
Halflife Contrast
Halflife
Hammer
Hamster
Harly
Harper
Hero Dark Eighties
Hero Dark
Heroku
Hitoshi
Homebrew
Hong Kong (dark)
Hopscotch
HyperSpace
Hyrule Contrast
Hyrule
Iceberg Contrast
Iceberg
IR_Black
Iridis Black
Iridis Blue
Iridis Dark Blue
Iridis Grey
Ironman
Ironman2suitcase
itg.flat.dark
Juicy Contrast
Juicy
Jupiter
Keen Contrast
Keen
Kellys (dark)
Kimbie (dark)
Kiwi
Kochia Hill
Kronuz
krTheme
Larapaste
Laravel Contrast
Laravel
Lavender Contrast
Lavender
Legacy
Lifted
LightLook
Limelight
Lioshi
Lodestone
Lollypop unicorn
London (dark)
Lowlight
Lucario
Lyte Dark
Lyte Monokai
Lyte Solarized
Lyte
Made of Code
Madrid (dark)
Mandarin Peacock
Markdowneditor Dark
Mars
Material Behave
Material Brogrammer
Material Cobalt
Material Dark
Material Flatland
Material Glacier
Material Monokai
Material Oceanic Next
Material One Dark
Material Seti
Material Solarized Dark
Material Spaceblack Oceanic
Material Spaceblack
Material Spacegray Eighties
Material Spacegray Mocha
Material Spacegray
Material Stereokai
Material Theme Darker
Material Theme
Material Toy Chest
Material Twilight
Material Vim Blackboard
Material Zenburn
Mbo
Mellow Contrast
Mellow
Merbivore Soft
Merbivore
Mercury
Milotic
Minimal
Mintchoc
Minty Night
Mirodark High Contrast
Mirodark
Mirrr
Monarch
Monocyanide Colorscheme Black
Monocyanide Colorscheme Constrasted Light
Monocyanide Colorscheme Constrasted Semi
Monocyanide Colorscheme Constrasted
Monocyanide Colorscheme
Monokai Blueberry
Monokai Dxl
Monokai Extended Bright
Monokai Extended Mod
Monokai Neue
Monokai SD
Monokai Spacegray Eighties
Monokai Spacegray
Monokai
Monokaigray
Monomacs
Monsters Inc
Moon
Morrowmind
Moscow (dark)
Mreq Dark
Msx Dark
Mud Contrast
Mud
Multilanger Dark
Multilanger Dark_inverted
Multilanger Deep_purple
Multilanger Dull_blue
Mustang Obsidian
Mustang
Mystic
Neon
Neptune
Neutron
New Moon
New Moon
New York (dark)
Nightwalker
Nintendo Entertainment System
Nocturnal
NodeJS
Oasis
Oblivion Soda Dark
Oblivion
Obsidian
Oceanic - Eighties
Oceanic Next
Oceanic
Oceanic_next
Once Upon A Time
One Dark
One Half Dark
Orange
Orchid Theme
Orgmode
Otakon
Para%c3%adso Black
Parai%cc%81so Black
Paraíso (Dark)
Paris (dark)
Pastel Paws Graphene
Pastel Paws Nightberry
Pastel Paws Spacegray
Pastel Paws Vintage
Pastel Paws
Pastel
Pastels on Dark
Patriot Contrast
Patriot
Peacock Contrast
Peacock
Peacocks In Space
Peel
Perv Orange Moonlight
Perv Orange
Phix Dark
Piggy
PKsTheme
PlasticCodeWrap
Playroombedtime
Playroompastbedtime
Pluto
Poe
PolyKai
Popfizz
Postap
Potpourri Contrast
Potpourri
Preap Markdown
Preap
Predawn Gf Markdown
Predawn Markdown
Predawn Monokai
Predawn Twilight
Predawn
Primer Dark
ProcessWire
Puiji
Pulsar
Pumpkin
Putty
Quiet Night
Rails Envy
Railsbase16 3024 Dark
Railsbase16 Atelierdune Dark
Railsbase16 Atelierforest Dark
Railsbase16 Atelierheath Dark
Railsbase16 Atelierlakeside Dark
Railsbase16 Atelierseaside Dark
Railsbase16 Chalk Dark
Railsbase16 Default Dark
Railsbase16 Eighties Dark
Railsbase16 Greenscreen Dark
Railsbase16 Mocha Dark
Railsbase16 Monokai Dark
Railsbase16 Ocean Dark
Railsbase16 Railscasts Dark
Railsbase16 Shapeshifter Dark
Railsbase16 Solarized Dark
Railsbase16 Tomorrow Dark
Railsbase16 Twilight Dark
Railscasts Extended
RailsCasts
Rainbow (dark)
Rainbow
RDark
Red Planet
Resesif Boned
Resesif
Revelation Contrast
Revelation
Riscos Dark
RubyBlue
Rubyblue
Sa%cc%83o Paulo (dark)
Sail
Sakura
Samuel's Decent
Saturation
Saturn
Seahorse
SecureCloud
Seoul (dark)
Sepiarize Dark
Seti
Shipwreck
Shrek
SidewalkChalk
SingingStars
Skittles
Slate
SleeplessMind
Slime Contrast
Slime
Snappy Contrast
Snappy
Solarflare Contrast
Solarflare
Solarized (dark)
Solarized Darcula
Solarized Flat
Sourlick Contrast
Sourlick
Spaceblack Alt
Spaceblack Monokai
Spaceblack
SpaceCadet
Spectacular
Spectral
Spirit
Splunk
Stark Contrast
Stark
Stereokai
Summer Sun
Summerfruitdark
Sun
Sunburst
Sunnyvale Theme Dark
Super
Superman
Swyphs II
Sydney (dark)
Tea
Tech 49
Teito University
Text Ex Machina
Today
Tokyo (dark)
Tomorrow Night Bright
Tomorrow-Night
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tonic
Toxin
Toy Machine
Tribal
Tron Contrast
Tron
Tubsted
Tubster
Tumblr Editor
Turbografx
Turnip Contrast
Turnip
Twilight
Twilightcyanide Colorscheme Black
Twilightcyanide Colorscheme Constrasted Light
Twilightcyanide Colorscheme Constrasted Semi
Twilightcyanide Colorscheme Constrasted
Twilightcyanide Colorscheme
Tyrann Alex
Tyrann Blue
Tyrann
Upstream Sunburst
Upstream Vibrant
Upstream
Uranus
Venom
Venus
Vibrant Fin
Vibrant Ink
Vibrant Tango
Visual Studio Dark
VS_001
Warpos
WebExPert
White
Wild Cherry
Wildlife - Night
Wombat
X3 Alpha
Yule
Zacks Contrast
Zacks
Zenburn
Zenburnesque
Zeus Sublime Text Darker
Zeus Sublime Text
Zurich (dark)
Zx Spectrum

灯光:

3024 (Day)
Agolalight
Agolawhite
Amiga (rebel) Light
Amiga Light
Anatomy Of Grey Light
Angular-io-Code
Apple Pips (light)
Ascetic White
Barcelona
Base16 3024 Light
Base16 Apathy Light
Base16 Ashes Light
Base16 Atelierdune Light
Base16 Atelierforest Light
Base16 Atelierheath Light
Base16 Atelierlakeside Light
Base16 Atelierseaside Light
Base16 Bespin Light
Base16 Brewer Light
Base16 Bright Light
Base16 Chalk Light
Base16 Codeschool Light
Base16 Colors Light
Base16 Default Light
Base16 Eighties Light
Base16 Embers Light
Base16 Emokid Light
Base16 Flat Light
Base16 Google Light
Base16 Grayscale Light
Base16 Greenscreen Light
Base16 Harmonic16 Light
Base16 Isotope Light
Base16 Londontube Light
Base16 Marrakesh Light
Base16 Melon Light
Base16 Mocha Light
Base16 Monokai Light
Base16 Ocean Light
Base16 Paraiso Light
Base16 Pop Light
Base16 Railscasts Light
Base16 Shapeshifter Light
Base16 Solarized Light
Base16 Summerfruit Light
Base16 Tomorrow Light
Base16 Twilight Light
BBEdit
Belafonte (Day)
Berlin
Boxuk
Buenos Aires
Calydon Light
Candy Brights
Candy Land
Chanfle
Cheerfully Light
Cherry Blossom
Chicago
Citizen Bane
Classic Modified
Clouds
Coda
Coffee Flavor
Commodore 64 Light
Copenhagen
Creamy
CSSEdit
Davinci
Dawn
Demain
Dimmed Fluid
Dimmed
Dreamweaver
Earthsong Light
Eclipse
EditPlus
Eiffel
Emokid Light
Espresso Tutti
Espresso
Eye Salvation - Light
Fantasy Script
Fluidvision
Focus (light)
Fox Light
Freckle
GDL light
Github
GitHub
Gray Matter Light
Grey
Happy happy joy joy 2
Hong Kong
Humane
IDLE
Inspiredgithub
iPlastic
IR_White
Justbeforedawn
Katzenmilch
Kellys (light)
Kimbie (light)
KWrite
LAZY
Light Orgmode
Light
LightRays
Lima
Limon
Little Kachun
London
Lyte Light
Lyte Solarized Light
Mac Classic
Made by phunky
Madrid
MagicWB (Amiga)
Markdowneditor Focus
Markdowneditor Yellow
Markdowneditor
Material Light
Material Primer Light
Material Solarized Light
Material Spacegray Light
Material Theme Lighter
Mint
Moscow
Mreq Light
Msx Light
Mustang Bianco
Nemodreaming
Nette
New York
Notebook
Notepad-Plus-Plus
One Half Light
Orbit Prograde
Paraíso (Light)
Paris
Pastie
Phoebe
PhpStorm
Playroom
Primer Light
Primer Light2
Prospettiva
Railsbase16 3024 Light
Railsbase16 Atelierdune Light
Railsbase16 Atelierforest Light
Railsbase16 Atelierheath Light
Railsbase16 Atelierlakeside Light
Railsbase16 Atelierseaside Light
Railsbase16 Chalk Light
Railsbase16 Default Light
Railsbase16 Eighties Light
Railsbase16 Greenscreen Light
Railsbase16 Mocha Light
Railsbase16 Monokai Light
Railsbase16 Ocean Light
Railsbase16 Railscasts Light
Railsbase16 Shapeshifter Light
Railsbase16 Solarized Light
Railsbase16 Tomorrow Light
Railsbase16 Twilight Light
Rainbow (light)
Raybo
RealGithub
Riscos Light
RSE
Sa%cc%83o Paulo
Schema Ghibli
Seoul
Sepiarize Alternative
Sepiarize Colourful White Bg
Sepiarize Colourful
Sepiarize
Slush & Poppies
Smoothy
Snappy Light
Solarized (light)
Spearmint
Spring
Summerfruit
Sunnyvale Theme
Sydney
Syntaxhighlighterreloaded
Tango
TangoGedit
Tokyo
Tomorrow
Toulousse Lautrec
Turn Of The Century
Tyrann Kim
Userscape
Visual Studio Bold
Visual Studio Light
Wildlife - Day
YellowStone
Yeti
Zeus Sublime Text Lighter
Zurich

我根据@theprogrammer的查询，制作了一个动态导入代码片段。它从cdn加载ace编辑器，定义路径以远程方式工作，并从cdn加载主题。监听器让用户在主题列表中进行选择。

请查看可从cdnjs获得的主题列表：https://cdnjs.com/libraries/ace。

如果我没记错的话，如果您在本地工作，只需使用主题名称，它将被导入（并写入）您的路径中。

(async () => {
    let opt;
    ["tomorrow_night","solarized_dark","kuroir","github","dracula","katzenmilch","merbivore","nord_dark"].forEach(function(e){
        opt += `<option value="${e}">${e}</option>`
    })
    await import('https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js').catch((error) => console.log('Loading failed' + error))
    document.body.appendChild(Object.assign(document.createElement("select"), {id: "themes", innerHTML: opt}))
    document.body.appendChild(Object.assign(document.createElement("div"), {id: "target", style: "width:100%;height:100vh;border:1px black solid"}))
    let editor = await ace.edit('target')
    ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/')
    editor.setOptions({
        value: '\n\n\n\n\n\n\n\n\n\n\n\n',
        theme: 'ace/theme/tomorrow_night',
        mode: 'ace/mode/javascript'
    })
    themes.addEventListener('change', function(e){
      editor.setOptions({
        theme: 'ace/theme/' + e.target.value
      })
    })
})()

有些人可能会喜欢这个现场版本（！）：

/*-- Live editor ---*/
(async()=>{await import("https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"),document.body.appendChild(Object.assign(document.createElement("div"),{id:"target",style:"width:100vw;height:100vh"}));document.body.appendChild(Object.assign(document.createElement("div"),{id:"console",style:"width:100vw;height:20vh;position:fixed;bottom:0;left:0;background:black;color:chartreuse;z-index:4;padding:1rem"}));let c=document.querySelector('code'),v=c.textContent;c.style.display='none';document.body.style.margin=0;let e=await ace.edit("target");ace.config.set("basePath","https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/"),e.setOptions({value:"/*-- Press any key to run --*/"+v,theme:"ace/theme/tomorrow_night",mode:"ace/mode/javascript"});document.body.addEventListener('keydown', (v)=>{document.getElementById("console").textContent=eval(e.getSession().getValue())})})()

<code>

Date.now() 
</code>