How to build a code editor using codemirror

[ayodele96]

[API]How to build a code editor using codemirror.

Proposed article introduction

If you aim to build a web tutorial site like w3schools and want their internal code editor feature, this is a tutorial for you.

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code and comes with several language modes and addons that implement more advanced editing functionality. With their unique API, we can create features such as document format, quick comment and autocompletion which sites like w3schools lack.

Key takeaways

• We will guide you on creating HTML, Javascript, CSS compatible code editors.
• HTML code format feature.
• Autocompletion feature.
• Readjustable split-screen(between code editor and display) using split.js.

  Article quality

  Through the implementation of our code format feature and auto-completion feature, our article is meant to stand out. The use of split.js for our adjustable screen also adds swagger that's not seen among this type of project.

  References

• Code-mirror.

  Templates to use as guides

  N/A

[hectorkambow]

Good afternoon and thank you for submitting your article for publishing. Your article has been entered into our queue and should be reviewed (and published pending any changes) as soon as a peer reviewer is finished with the ones in the queue before it. 🚀 Thank you.

[hectorkambow]

@ayodele96

We're really looking for unique/original content, and based on the content provided, it seems that information that you intend to cover is already readily available through the documentation or via many other blog sites.

Could you please expand upon how your content will differ from what is already available through other websites and documentation? We lean towards content that offers an original viewpoint/approach around programming-centric topics.

[ayodele96]

I added extra features such as code format, code autocomplete feature, quick comment and uncomment. Re adjustable split screen between code editor and iframe display using split.js

[ahmadmardeni1]

Sounds like a helpful topic - let's please be sure it adds value beyond what is in any official docs and/or what is covered in other blog sites. (the articles should go beyond a basic explanation - and it is always best to reference any EngEd article and build upon it). @ayodele96

Please be attentive to grammar/readability and make sure that you put your article through a thorough editing review prior to submitting it for final approval. (There are some great free tools that we reference in EngEd resources.) ANY ARTICLE SUBMITTED WITH GLARING ERRORS WILL BE IMMEDIATELY CLOSED.

Please be sure to double-check that it does not overlap with any existing EngEd articles, articles on other blog sites, or any incoming EngEd topic suggestions (if you haven't already) to avoid any potential article closure, please reference any relevant EngEd articles in yours. - Approved