Build a Simple VS Code Theme Code Text Editor With Line Numbers in Browser Using Javascript Full Project For Beginners

Build a Simple VS Code Theme Code Text Editor With Line Numbers in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a simple vscode theme code text editor with line numbers in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>VSCode Theme Code Editor in Browser</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Gutter Line Numbers Experiment</h1>
<h2>[Unfinished pen, There is bug, can you discover it :) ?]</h2>
<div class="editor">
    <div class="gutter"><span>1</span></div><textarea rows="5"></textarea>
</div>
    </body>
    <script src="script.js"></script>
</html>

 

 

And now make a style.css file and copy paste the below code

 

style.css

 

body {
    min-height: 100vh;
    background: linear-gradient(150deg, #de7aff, #62a9b9);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    font-family: "Open Sans", sans-serif;
}

body h1, body h2 {
    color: #1a1930;
    margin: 0.3rem;
}

.editor {
    margin-top: 2rem;
    display: flex;
    flex-flow: row wrap;
    min-width: 60vw;
    min-height: 500px;
    max-height: 700px;
    background: grey;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.editor .gutter {
    background: #11101f;
    color: grey;
    display: flex;
    flex-flow: column wrap;
    padding: 1rem;
}

.editor .gutter span {
    padding: 0.5rem;
    color: #62a9b9;
}

.editor textarea {
    background: #1a1930;
    flex: 1;
    border: 0;
    color: white;
    padding: 1rem;
    line-height: 2.2;
    overflow: hidden;
}

.editor textarea:focus {
    outline: none;
}

 

See also  Javascript Project to Build Responsive HTML5 Image Comparison Slider in Browser Full Project For Beginners

 

And now make a script.js  file and copy paste the following code

 

script.js

 

/**
 * TODO:
 *
 * (1) Create a whole row on the editor to represent the line
 * rather than adding gutter numbers (to fix text overflow problem).
*/
const input = document.querySelector('textarea');
const gutter = document.querySelector('.gutter');
let val = input.value;
let numOfLines = 1;

function update(e) {
    val = input.value;
    
    let lineBreaks = val.match(/\n/gi) || [];
    let numOfSpans = gutter.childElementCount;
    numOfLines = lineBreaks.length ? lineBreaks.length + 1 : 1;
    
    gutter.innerHTML = ""
    for(var i = 0; i < numOfLines; i++) {
        console.log('creating no', i)
        var el = document.createElement('span');
        el.innerHTML = i+1;
        gutter.appendChild(el); 
    }
}

input.addEventListener('input', update);

 

 

And now if you open index.html file inside the browser you will see the below screenshot

 

 

 

Live Demo

 

 

VS Code Code Editor

Leave a Reply