Code Block Component

A comprehensive code block component with syntax highlighting, copy functionality, and customizable styling.

Basic Code Block

JavaScript Examplejavascript

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

With Line Numbers

Python Fibonaccipython

1def fibonacci(n):
2    """Generate Fibonacci sequence up to n terms."""
3    if n <= 0:
4        return []
5    elif n == 1:
6        return [0]
7    elif n == 2:
8        return [0, 1]
9    
10    fib_sequence = [0, 1]
11    for i in range(2, n):
12        fib_sequence.append(fib_sequence[i-1] + fib_sequence[i-2])
13    
14    return fib_sequence
15
16# Example usage
17result = fibonacci(10)
18print(f"First 10 Fibonacci numbers: {result}")

Minimal Style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Block Example</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to Code Blocks</h1>
        <p>This is a demonstration of the code block component.</p>
    </div>
</body>
</html>

Elevated Style

CSS Stylingcss

.code-block {
    background: #1a1a1a;
    color: #f8f8f2;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Fira Code', monospace;
    overflow-x: auto;
}

.syntax-highlight {
    color: #ff79c6; /* Pink for keywords */
}

.string-literal {
    color: #f1fa8c; /* Yellow for strings */
}

.comment {
    color: #6272a4; /* Blue for comments */
}

Custom Syntax Highlighting

Using the HighlightedCode component for custom syntax highlighting:

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

Different Themes

VS Code Dark Plus (Default)

VS Code Dark Plus Themejavascript

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

One Dark Theme

One Dark Themejavascript

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

GitHub Colors (Light Theme)

GitHub Colors Themejavascript

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

Interactive Features

Copy functionality with custom callback:

Interactive Examplejavascript

// Type some code ->
console.log("0008 iIlL1 g9qCGQ ~-+=>");
// â é ù ï ø Ç Ã Ē Æ œ

function updateGutters(cm) {
  var gutters = cm.display.gutters;
  var __specs = cm.options.gutters;
  
  removeChildren(gutters);
  
  for (var i = 0; i < specs.length; ++i) {
    var gutterClass = __specs[i];
    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
    
    if (gutterClass == "CodeMirror-linenumbers") {
      cm.display.lineGutter = gElt;
      gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
    }
  }
  
  gutters.style.display = i ? "" : "none";
  updateGutterSpace(cm);
  
  return false;
}

Different Sizes

Small

javascript

const message = "Hello World";

Medium (Default)

javascript

const message = "Hello World";

Large

javascript

const message = "Hello World";

Manual Line Construction

Building code blocks line by line for maximum control:

1function greet(name) {

2 // Return a greeting

3 return `Hello, jhghj!`;