I built it with Codemirror

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(codepen, github, etc) use for their code editor and after some hustle, I got the name codemirror here

while inspecting github 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 it.
To create an instance of this in a text area of HTML

<textarea id="demotext" class="code-input">/* your code here */</textarea>

we have to call the codemirror constructor

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

And voila....

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

<script src="/mode/python/python.js"></script>

Now we have to set mode for our editor by calling the setOption method with mode.

editor.setOption("mode", language);

Here's a gist in GitHub about the code sample of implementation of codemirror with different modes. There are various other add-ons 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 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
Part II: App prototype
Part III: Local Development
Part IV: G for Git
Part V: Data Modeling
Part VI: Data & Auth APIs
Part VII: Basic Functionalities
Part VIII: App Screen 1
Part IX: App Screen 2
Part X: App Screen 3
Part XI: User Reviews
Part X: Final Submission

Liked my post?