# How to make my own code editor **URL:** \ **Category:** General\ **Created:** [April 12, 2020, 12:20am UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727 "2020-04-12T00:20:16Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 12, 2020, 12:20am UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/1 "2020-04-12T00:20:16Z")
So as you should know, there is a night and day theme for freecodecamp. I want to make another theme from scratch and I can get pretty much everything down except for making the code editor. Do you have any tips on how to do that? Thanks. ---
**Author:** ![DanAmbitious](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danambitious/32/122100_2.png) [@DanAmbitious](https://forum.freecodecamp.org/u/DanAmbitious)\ **Post date:** [April 12, 2020, 12:36am UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/2 "2020-04-12T00:36:13Z")
Youtube tutorials can help, and you probably need a lot of JS for it. ---
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 12, 2020, 3:27pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/3 "2020-04-12T15:27:22Z")
Okay. I know that already. Do you know if there’s a way to just embed one or something? ---
**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\ **Post date:** [April 12, 2020, 3:53pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/4 "2020-04-12T15:53:53Z")
Hello there. I do not understand your question, because the _dark_ and _light_ theme have little-to-nothing to do with making a code editor. My tip for starting the process to learn to make a code editor is to complete the [MarkDown Previewer](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer) project, as it involves the kind of pre-processing you would find in a text editor. Hope this helps. ---
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 12, 2020, 3:55pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/5 "2020-04-12T15:55:07Z")
I meant that I would like to practice my skills on making another theme of freecodecamp challenge layouts from scratch. I just don’t know how to make a code editor like the one that appears in the challenges. ---
**Author:** ![DanAmbitious](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danambitious/32/122100_2.png) [@DanAmbitious](https://forum.freecodecamp.org/u/DanAmbitious)\ **Post date:** [April 12, 2020, 5:16pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/6 "2020-04-12T17:16:13Z")
So you’re interested in making a theme for the code editor, but you need the source code of the FFC code editor so you can add the CSS there to make the theme, right? ---
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 13, 2020, 12:29pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/7 "2020-04-13T12:29:08Z")
Yes. Exactly. I’ve tried inspecting all of it but I can’t seem to be able to find out how it was done. ---
**Author:** ![DanAmbitious](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danambitious/32/122100_2.png) [@DanAmbitious](https://forum.freecodecamp.org/u/DanAmbitious)\ **Post date:** [April 13, 2020, 3:59pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/8 "2020-04-13T15:59:46Z")
You could ask an official. ---
**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\ **Post date:** [April 13, 2020, 4:27pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/9 "2020-04-13T16:27:18Z")
Hello there. If you are that interested, here is the main component: [https://github.com/freeCodeCamp/freeCodeCamp/blob/master/client/src/templates/Challenges/classic/Editor.js](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/client/src/templates/Challenges/classic/Editor.js) You can follow the imports to see the general requirements. Hope this helps ---
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 13, 2020, 4:57pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/10 "2020-04-13T16:57:39Z")
So I use jsdelivr to take that code as a library and apply it to my code? ---
**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\ **Post date:** [April 13, 2020, 5:05pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/11 "2020-04-13T17:05:27Z")
I am not sure how that would work. I welcome you to try, but from what I can see, you would need to do a whole bunch of refactoring to just use that component. Without knowing your intended outcome, setup, and workspace, there is not much more we can do to help. ---
**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\ **Post date:** [April 13, 2020, 5:13pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/12 "2020-04-13T17:13:15Z")
Thank you for helping. I will try to make it. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 6:58pm UTC](https://forum.freecodecamp.org/t/how-to-make-my-own-code-editor/371727/13 "2021-06-01T18:58:45Z")
Closed on June 1, 2021, 6:58pm UTC