Make the stylish editor with CodeMirror.
Tags: javascript, productivity, beginners, react
Published: 2017-12-08 10:26:28

---
title: Make the stylish editor with CodeMirror.
published: true
description: 
tags: javascript,productivity,beginners,react
---

I have been making a markdown editor called [Boostnote](https://github.com/BoostIO/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.

![image-gif](https://thepracticaldev.s3.amazonaws.com/i/cshkx1chcbm25rskcghe.gif)

## 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
![1](https://cdn-images-1.medium.com/max/1600/1*VJ3TYrUGqs58R-OqgcTg8g.png)

2.3024-day
![2](https://cdn-images-1.medium.com/max/1600/1*5sqholNW_D7arEQpE57Nbw.png)

3.3024-night
![3](https://cdn-images-1.medium.com/max/1600/1*NtbqsLnywkoHusq4g6z02A.png)

4.abcdef
![4](https://cdn-images-1.medium.com/max/1600/1*AcycwSf3UGbNhSqDC2hLAQ.png)

5.ambiance-mobile
![5](https://cdn-images-1.medium.com/max/1600/1*J-cduD9dbkAKseP7fp4wXw.png)

6.ambiance
![6](https://cdn-images-1.medium.com/max/1600/1*Kq70sJHfGJURPHVhEYKK5w.png)

7.base16-dark
![7](https://cdn-images-1.medium.com/max/1600/1*vctjGY8uaJ3-akHV9VLHAg.png)

8.base16-light
![8](https://cdn-images-1.medium.com/max/1600/1*DPIcCB4-GGYrktRuamJBzg.png)

9.bespin
![9](https://cdn-images-1.medium.com/max/1600/1*Jbn7ZhzWH8rBfm-EE6a7Fw.png)

10.blackboard
![10](https://cdn-images-1.medium.com/max/1600/1*tRFpOcfZoyfARE2cbcwuPQ.png)

11.cobalt
![11](https://cdn-images-1.medium.com/max/1600/1*8sf9R7Vx690yBegSiALpHg.png)

12.colorforth
![12](https://cdn-images-1.medium.com/max/1600/1*A6xpEtcYjk5I5ZcRJlI1hQ.png)

13.dracula
![13](https://cdn-images-1.medium.com/max/1600/1*Yu5Nh61_iztVLrNcqv_f6A.png)

14.duotone-dark
![14](https://cdn-images-1.medium.com/max/1600/1*aOIPXJ5D3KOJR2wjc_ooYw.png)

15.duotone-light
![15](https://cdn-images-1.medium.com/max/1600/1*Sv3mj1Ln3rUvhd5uiR6cSw.png)

16.eclipse
![16](https://cdn-images-1.medium.com/max/1600/1*MHHnqXrWDEwKgFUKEdkgiw.png)

17.elegant
![17](https://cdn-images-1.medium.com/max/1600/1*wOZKwk5mrdnCsfo7smRckQ.png)

18.erlang-dark
![18](https://cdn-images-1.medium.com/max/1600/1*3JduF6Xd9_gfcjuGOcFPlA.png)

19.hopscotch
![19](https://cdn-images-1.medium.com/max/1600/1*wbQ0XZ-7qFadn8fjkruUqg.png)

20.icecoder
![20](https://cdn-images-1.medium.com/max/1600/1*tfSE85EdvZa1qTzDQ0ONAg.png)

21.isotope
![21](https://cdn-images-1.medium.com/max/1600/1*7qRCWrMmJF_oincElQtkTQ.png)

22.lesser-dark
![22](https://cdn-images-1.medium.com/max/1600/1*9kA9AazYa0DBfCXoGFAEuA.png)

23.liquibyte
![23](https://cdn-images-1.medium.com/max/1600/1*n4OkjRWjdWYmpIt8v-zjeg.png)

24.material
![24](https://cdn-images-1.medium.com/max/1600/1*Wcz57YBkbNv1yVvDYH_BKg.png)

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

26.mdn-like
![26](https://cdn-images-1.medium.com/max/1600/1*XQN9HS0y5fmFJAWpqqdULQ.png)

27.midnight
![27](https://cdn-images-1.medium.com/max/1600/1*JaP_zk1Dc4UTX8BMu1EukA.png)

28.monokai
![28](https://cdn-images-1.medium.com/max/1600/1*atjLqJJQVfW0Gi_gLku8SA.png)

29.neat
![29](https://cdn-images-1.medium.com/max/1600/1*YwTD32wXxqtXS2iQUZBGuQ.png)

30.neo
![30](https://cdn-images-1.medium.com/max/1600/1*fBdx9j5Mr89ju7-J3vQoNQ.png)

31.night
![31](https://cdn-images-1.medium.com/max/1600/1*V5bQYJCnllNhdMVwWVq1nA.png)

32.panda-syntax
![32](https://cdn-images-1.medium.com/max/1600/1*dnv7bHpXSL1LzF-i-XekvQ.png)

33.paraiso-dark
![33](https://cdn-images-1.medium.com/max/1600/1*rhUgARD5H0yXzpbCibDpng.png)

34.paraiso-light
![34](https://cdn-images-1.medium.com/max/1600/1*c_QZVOLz-jddT4ggvtieRA.png)

35.pastel-on-dark
![35](https://cdn-images-1.medium.com/max/1600/1*xoHSaV5osj252Rr2a1NRZA.png)

36.railscasts
![36](https://cdn-images-1.medium.com/max/1600/1*pQr2EssZEBdZHtUsZdUw8A.png)

37.rubyblue
![37](https://cdn-images-1.medium.com/max/1600/1*lMJVtElvHVroqJylKd82Fw.png)

38.seti
![38](https://cdn-images-1.medium.com/max/1600/1*Opywh8SxoCOyB9mwop8BFQ.png)

39.solarized dark
![39](https://cdn-images-1.medium.com/max/1600/1*Zbe9zQADaGSPsGpOgQ8uYg.png)

40. solarized light
![40](https://cdn-images-1.medium.com/max/1600/1*djq71mCNL1bDjZrwiNBcJA.png)

41.the-matrix
![41](https://cdn-images-1.medium.com/max/1600/1*p-N8GC_pg6W1kO5TKwz6jA.png)

42.tomorrow-night-bright
![42](https://cdn-images-1.medium.com/max/1600/1*nQZhCel6WnTqzU3MemdAAw.png)

43.tomorrow-night-eighties
![43](https://cdn-images-1.medium.com/max/1600/1*DRsqtqP8svVhgkBrHIRgsg.png)

44.ttcn
![44](https://cdn-images-1.medium.com/max/1600/1*zDZLWkjRkLyJ3mEQdeyyMw.png)

45.twilight
![45](https://cdn-images-1.medium.com/max/1600/1*rIZkuakixo6XhKFPJNF86g.png)

46.vibrant-ink
![46](https://cdn-images-1.medium.com/max/1600/1*XKESiYLaBLiJZZH3Fcq32Q.png)

47.xq-dark
![47](https://cdn-images-1.medium.com/max/1600/1*J7PD7iT84crWffjEB1NoPw.png)

48.xq-light
![48](https://cdn-images-1.medium.com/max/1600/1*MsLu4hcp6UZGN2-Z8OT6ng.png)

49.yeti
![49](https://cdn-images-1.medium.com/max/1600/1*zCiIfRyHcr8gSYxGEdHeHg.png)

50.zenburn
![50](https://cdn-images-1.medium.com/max/1600/1*9fxsr9mXgUnm02iIfdmf5w.png)

That's all ;)

CodeMirror docs is [here](https://codemirror.net/doc/manual.html).

Enjoy CodeMirror and [Boostnote](https://boostnote.io/)!

---