I built it with Codemirror
Tags: codemirror
Published: 2017-08-02 15:58:39

---
title: I built it with Codemirror
published: true
description: A simple code editor using codemirror
tags: codemirror
cover_image: https://thepracticaldev.s3.amazonaws.com/i/71fccrmhchy1ld8v3rtk.png
---

## My Web App SnipCode

It's a code saving and sharing platform. My first challenge was to get the code editor with good syntax coloring, not a simple text editor. So I started searching what other [guys](https://codemirror.net/doc/realworld.html)(codepen, github, etc) use for their code editor and after some hustle, I got the name codemirror here

 ![codemirror found](https://thepracticaldev.s3.amazonaws.com/i/apukqmjqlua69thczt5p.png) 

while inspecting [github](https://www.github.com) using chrome dev tools.

## Codemirror web IDE 

It is a javascript based tool with many APIs to customize the web based IDE for you. But first to do all that we have to [download](http://codemirror.net/codemirror.zip) it.
To create an instance of this in a text area of HTML

```html
<textarea id="demotext" class="code-input">/* your code here */</textarea>
```
we have to call the codemirror constructor

```javascript
var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
        lineNumbers: true,
        matchBrackets: true
    });
```

And voila....

![codemirror](https://thepracticaldev.s3.amazonaws.com/i/95os983olbp0e40y813r.jpg)

obviously, the buttons and all design are just CSS.

We can set options as I have already done here for line numbers to be shown and to match the brackets while writing code in my code editor.

Wait what about the syntax coloring I was talking about. Well, there's are various modes available in codemirror. We just need to import those from mode folder. Like here I imported Python mode

```html
<script src="/mode/python/python.js"></script>
```
Now we have to set mode for our editor by calling the setOption method with mode.

```javascript
editor.setOption("mode", language);
```
Here's a [gist](https://gist.github.com/sroy8091/31a2c0d2b1971c685b7bc9f49fd2d919) in GitHub about the code sample of implementation of codemirror with different modes. There are various other [add-ons](https://codemirror.net/doc/manual.html) with features like text suggestion which can be added in codemirror.

Thus using this awesome tool I created the first screen of my web app [SnipCode](http://app.snipcode.hasura.me) for editing and posting a new snip.

*Here is the index of all the post regarding this series of snipcode developemnt*

[Part I: App Idea](https://dev.to/sroy8091/app-idea-for-hasura-internship)
[Part II: App prototype](https://dev.to/sroy8091/app-prototype)
[Part III: Local Development](https://dev.to/sroy8091/hasura-local-development)
[Part IV: G for Git](https://dev.to/sroy8091/g-for-git)
[Part V: Data Modeling](https://dev.to/sroy8091/its-modeling-time)
[Part VI: Data & Auth APIs](https://dev.to/sroy8091/postman-a-major-tool-for-developers)
[Part VII: Basic Functionalities](https://dev.to/sroy8091/i-love-cookies-expressjscookies)
[Part VIII: App Screen 1](https://dev.to/sroy8091/i-built-it-with-codemirror)
[Part IX: App Screen 2](https://dev.to/sroy8091/app-screen-2)
[Part X: App Screen 3](https://dev.to/sroy8091/search-page-using-postgres-full-text-search-feature)
[Part XI: User Reviews](https://dev.to/sroy8091/improvements-in-my-web-app)
[Part X: Final Submission](https://dev.to/sroy8091/final-app-submission)


|Liked my post?|
|---------------|
|  [![](https://thepracticaldev.s3.amazonaws.com/i/lsfkqfysa58u59627uy6.png)](https://ko-fi.com/A0A5WBC1)|