Make the stylish editor with CodeMirror.

I have been making a markdown editor called Boostnote using Codemirror.
Enable you to switch theme in Editor and Codeblock in Markdown Preview, I write how to make this feature in this article.

Feature

• Switching the theme at editor and code-block in markdow preview of Boostnote
• Users can choose their favorite theme.

How to make

①Installing the codemirror.

Since we mainly use React when making Boostnote, install the package using npm.
npm install codemirror --save

②Check the contents of the installed codemirror package.
cd node_modules/codemirror/theme

Many kinds of themes are automatically installed.

They are the same as those here. https://github.com/codemirror/CodeMirror/tree/master/theme

③Introducing the installed themes!
1.default

2.3024-day

3.3024-night

4.abcdef

5.ambiance-mobile

6.ambiance

7.base16-dark

8.base16-light

9.bespin

10.blackboard

11.cobalt

12.colorforth

13.dracula

14.duotone-dark

15.duotone-light

16.eclipse

17.elegant

18.erlang-dark

19.hopscotch

20.icecoder

21.isotope

22.lesser-dark

23.liquibyte

24.material

25.mbo
!25](https://cdn-images-1.medium.com/max/1600/1*O-UBKKw--7t_EhRMXG8p-g.png)

26.mdn-like

27.midnight

28.monokai

29.neat

30.neo

31.night

32.panda-syntax

33.paraiso-dark

34.paraiso-light

35.pastel-on-dark

36.railscasts

37.rubyblue

38.seti

39.solarized dark

1. solarized light

41.the-matrix

42.tomorrow-night-bright

43.tomorrow-night-eighties

44.ttcn

45.twilight

46.vibrant-ink

47.xq-dark

48.xq-light

49.yeti

50.zenburn

That's all ;)

CodeMirror docs is here.

Enjoy CodeMirror and Boostnote!

---

Comments

[edA‑qa mort‑ora‑y]

Thank you for using a proportional font. Down with monospace!

[Max Cerrina]

Why don't you like monospace? Genuinely curious.

[edA‑qa mort‑ora‑y]

Proportional fonts have better aesthetics as they better match the way letters evolved and how we see them in day-to-day life. They occupy the "right" amount of space instead of being crammed into, or stretched into a fixed cell: compare "m" to "n". I can read proportional text faster, with less eye strain.

Now with Unicode, and wide spread prevalence of international characters, and emoji, the issues with monospaced have become more pronounced.

Oh, and yeah, monospace leads to people doing stupid formatting in their source code.

[Mathias Riis Sorensen]

I didn't find my favorite theme, which is the standard theme for Xcode. Any change that you guys know how to implement it? Or a way to make custom themes?