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
- 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!
Top comments (4)
Thank you for using a proportional font. Down with monospace!
Why don't you like monospace? Genuinely curious.
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.
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?