codemirror主题效果概览 | 易学教程

codemirror是目前最流行的在线编辑器插件，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。

本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。

1. 3024-day

在这里插入图片描述

2. 3024-night

在这里插入图片描述

3. abcdef

在这里插入图片描述

4. ambiance-mobile

在这里插入图片描述

5. ambiance

在这里插入图片描述

6. ayu-dark

在这里插入图片描述

7. ayu-mirage

在这里插入图片描述

8. base16-dark

在这里插入图片描述

9. base16-light

在这里插入图片描述

10. bespin

在这里插入图片描述

11. blackboard

在这里插入图片描述

12. cobalt

在这里插入图片描述

13. colorforth

在这里插入图片描述

14. darcula

在这里插入图片描述

15. dracula

在这里插入图片描述

16. duotone-dark

在这里插入图片描述

17. duotone-light

在这里插入图片描述

18. eclipse

在这里插入图片描述

19. elegant

在这里插入图片描述

20. erlang-dark

在这里插入图片描述

21. gruvbox-dark

在这里插入图片描述

22. hopscotch

在这里插入图片描述

23. icecoder

在这里插入图片描述

24. idea

在这里插入图片描述

25. isotope

在这里插入图片描述

26. lesser-dark

在这里插入图片描述

27. liquibyte

在这里插入图片描述

28. lucario

在这里插入图片描述

29. material-darker

在这里插入图片描述

30. material-ocean

在这里插入图片描述

31. material-palenight

在这里插入图片描述

32. material

在这里插入图片描述

33. mbo

在这里插入图片描述

34. mdn-like

在这里插入图片描述

35. midnight

在这里插入图片描述

36. monokai

在这里插入图片描述

37. moxer

在这里插入图片描述

38. neat

在这里插入图片描述

39. neo

在这里插入图片描述

40. night

在这里插入图片描述

41. nord

在这里插入图片描述

42. oceanic-next

在这里插入图片描述

43. panda-syntax

在这里插入图片描述

44. paraiso-dark

在这里插入图片描述

45. paraiso-light

在这里插入图片描述

46. pastel-on-dark

在这里插入图片描述

47. railscats

在这里插入图片描述

48. rubyblue

在这里插入图片描述

49. seti

在这里插入图片描述

50. shadowfox

在这里插入图片描述

51. solarized

在这里插入图片描述

52. ssms

在这里插入图片描述

53. the-matrix

在这里插入图片描述

54. tomorrow-night-bright

在这里插入图片描述

55. tomorrow-night-eighties

在这里插入图片描述

56. ttcn

在这里插入图片描述

57. twilight

在这里插入图片描述

58. vibrant-ink

在这里插入图片描述

59. xq-dark

在这里插入图片描述

60. xq-light

在这里插入图片描述

61. yeti

在这里插入图片描述

62. yonce

在这里插入图片描述

63. zenburm

在这里插入图片描述

来源：oschina

链接：https://my.oschina.net/u/4353184/blog/4296869

标签

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!