About this snippet

A dark editor panel with a sidebar file list, a tab bar and a code area. Clicking either the file in the sidebar or its tab shows that file and highlights both at once.

The highlighting is markup rather than a parser. Every line is a div and every token is a span carrying a class for keyword, string, function or variable. That renders instantly with no library, and it is the right call for a fixed sample you control.

Because the colors are tagged by hand, this is a presentation piece rather than a working editor. Use it to show code on a landing page or in documentation. If the code has to change at runtime, reach for a real highlighter, since tagging every token yourself does not scale past a short sample.

Size
6.5 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
230

Collections

Related snippets

<div class="ide-container">
  
  <div class="ide-sidebar">
    <div class="sidebar-title">EXPLORER</div>
    
    <div class="file-item active" id="file-1">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#eab308" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path><path d="M14 2v6h6"></path></svg>
      <span>script.js</span>
    </div>
    
    <div class="file-item" id="file-2">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path><path d="M14 2v6h6"></path></svg>
      <span>style.css</span>
    </div>
  </div>
  
  <div class="ide-main">
    <div class="ide-tabs">
      <div class="tab active" id="tab-1">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#eab308" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path></svg>
        script.js
      </div>
      <div class="tab" id="tab-2">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path></svg>
        style.css
      </div>
    </div>
    
    <div class="ide-editor">
      <!-- File 1 Code -->
      <div class="code-view active-code" id="code-1">
        <div class="code-line"><span class="line-num">1</span><span class="kw">const</span> <span class="var">initApp</span> <span class="op">=</span> <span class="kw">function</span>() {</div>
        <div class="code-line"><span class="line-num">2</span>  <span class="kw">const</span> <span class="var">target</span> <span class="op">=</span> <span class="obj">document</span>.<span class="func">getElementById</span>(<span class="str">"app"</span>);</div>
        <div class="code-line"><span class="line-num">3</span>  <span class="var">target</span>.<span class="obj">classList</span>.<span class="func">add</span>(<span class="str">"running"</span>);</div>
        <div class="code-line"><span class="line-num">4</span>  </div>
        <div class="code-line"><span class="line-num">5</span>  <span class="obj">console</span>.<span class="func">log</span>(<span class="str">"System initialized flawlessly."</span>);</div>
        <div class="code-line"><span class="line-num">6</span>};</div>
        <div class="code-line"><span class="line-num">7</span></div>
        <div class="code-line"><span class="line-num">8</span><span class="func">initApp</span>();</div>
      </div>
      
      <!-- File 2 Code -->
      <div class="code-view" id="code-2">
        <div class="code-line"><span class="line-num">1</span><span class="var">.running</span> {</div>
        <div class="code-line"><span class="line-num">2</span>  <span class="kw">display</span>: <span class="str">flex</span>;</div>
        <div class="code-line"><span class="line-num">3</span>  <span class="kw">justify-content</span>: <span class="str">center</span>;</div>
        <div class="code-line"><span class="line-num">4</span>  <span class="kw">align-items</span>: <span class="str">center</span>;</div>
        <div class="code-line"><span class="line-num">5</span>  <span class="kw">background-color</span>: <span class="str">#0f172a</span>;</div>
        <div class="code-line"><span class="line-num">6</span>  <span class="kw">animation</span>: <span class="str">fade-in 0.5s ease</span>;</div>
        <div class="code-line"><span class="line-num">7</span>}</div>
      </div>
    </div>
  </div>
  
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.ide-container {
  display: flex;
  width: 100%;
  max-width: 900px;
  height: 500px;
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  border: 1px solid #333333;
}

.ide-sidebar {
  width: 220px;
  background: #181818;
  border-right: 1px solid #2d2d2d;
  padding: 16px 0;
}

.sidebar-title {
  color: #858585;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 20px;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  color: #cccccc;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.file-item:hover {
  background: #2a2d2e;
  color: #ffffff;
}

.file-item.active {
  background: #37373d;
  color: #ffffff;
}

.ide-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
}

.ide-tabs {
  display: flex;
  background: #252526;
  height: 40px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: #2d2d2d;
  color: #969696;
  font-size: 0.9rem;
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
}

.tab.active {
  background: #1e1e1e;
  color: #ffffff;
  border-top: 2px solid #007acc;
}

.ide-editor {
  flex-grow: 1;
  padding: 20px 0;
  overflow-y: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
}

.code-view {
  display: none;
}

.code-view.active-code {
  display: block;
}

.code-line {
  display: flex;
  padding: 0 20px;
}

.code-line:hover {
  background: #282828;
}

.line-num {
  color: #858585;
  width: 30px;
  user-select: none;
  text-align: right;
  margin-right: 20px;
}

/* Beautiful VS Code Style Syntax Colors */
.kw { color: #569cd6; }
.var { color: #4fc1ff; }
.op { color: #d4d4d4; }
.func { color: #dcdcaa; }
.obj { color: #4ec9b0; }
.str { color: #ce9178; }
const file1 = document.getElementById("file-1");
const file2 = document.getElementById("file-2");
const tab1 = document.getElementById("tab-1");
const tab2 = document.getElementById("tab-2");
const code1 = document.getElementById("code-1");
const code2 = document.getElementById("code-2");

function switchToJS() {
  file1.classList.add("active");
  file2.classList.remove("active");
  
  tab1.classList.add("active");
  tab2.classList.remove("active");
  
  code1.classList.add("active-code");
  code2.classList.remove("active-code");
}

function switchToCSS() {
  file2.classList.add("active");
  file1.classList.remove("active");
  
  tab2.classList.add("active");
  tab1.classList.remove("active");
  
  code2.classList.add("active-code");
  code1.classList.remove("active-code");
}

file1.addEventListener("click", switchToJS);
tab1.addEventListener("click", switchToJS);

file2.addEventListener("click", switchToCSS);
tab2.addEventListener("click", switchToCSS);
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save