💻 Code Block Styling Guide

Code blocks є specialized containers для displaying programming code, command-line instructions, JSON data, або technical configurations. Proper code block styling improves readability через monospace fonts, syntax highlighting, line numbers, та copy functionality. Для mushroom cultivation guides, code blocks present grow-automation scripts, sensor configurations, або data logging code. Цей guide охоплює syntax highlighting techniques, dark/light themes, copy-to-clipboard buttons, line numbering, та responsive behavior.

🎨 Code Block Styles

Style 1: Dark Theme з Header та Copy Button

Python
1import RPi.GPIO as GPIO 2import time 3 4# Configure humidity sensor для fruiting chamber 5def monitor_humidity(): 6 GPIO.setmode(GPIO.BCM) 7 sensor_pin = 4 8 9 while True: 10 humidity = read_sensor(sensor_pin) 11 if humidity < 90 : 12 activate_humidifier() 13 time.sleep(300) # Check every 5 minutes

Style 2: Light Theme (Simple)

// JavaScript: Calculate psilocybin dosage by body weight function calculateDosage(bodyWeightKg, intensity) { const baselineDose = 0.3; // mg psilocybin per kg const intensityMultiplier = { 'light': 0.5, 'medium': 1.0, 'strong': 1.5 }; return bodyWeightKg * baselineDose * intensityMultiplier[intensity]; } // Example usage const dose = calculateDosage(70, 'medium'); console.log(`Recommended dose: ${dose.toFixed(1)}mg`);

Style 3: Terminal/Command Line

$ python3 cultivation_monitor.py Starting automated grow environment monitoring... Temperature: 76°F Humidity: 92% CO2 Level: 450 ppm ✓ All parameters within optimal range [2026-01-25 08:45:12] Misting cycle activated [2026-01-25 09:00:15] Fan cycle: Fresh air exchange complete $ cat grow_log.csv timestamp,temp_f,humidity,co2_ppm,status 2026-01-25 08:00:00,76,92,450,optimal 2026-01-25 08:30:00,77,89,480,misting

💻 CSS Implementation

1. Basic Code Block:

/* Inline code */
code {
  background: #2d3748;
  color: #4ecdc4;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: 'Fira Code', 'Monaco', monospace;
  font-size: 0.9em;
}

/* Block code */
pre {
  background: #2d3748;
  color: #e2e8f0;
  padding: 25px;
  border-radius: 10px;
  overflow-x: auto;
  font-family: 'Fira Code', monospace;
  font-size: 0.95em;
  line-height: 1.7;
  margin: 30px 0;
}

/* Enable horizontal scrolling */
pre code {
  display: block;
  white-space: pre; /* Preserve formatting */
  word-wrap: normal;
}

2. Copy Button з JavaScript:

/* HTML */
<div class="code-block">
  <button class="copy-btn" onclick="copyCode(this)">Copy</button>
  <pre><code>...code here...</code></pre>
</div>

/* CSS */
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #4ecdc4;
  color: #1a202c;
  border: none;
  padding: 6px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
}

/* JavaScript */
function copyCode(button) {
  const codeBlock = button.nextElementSibling;
  const code = codeBlock.textContent;
  
  navigator.clipboard.writeText(code).then(() => {
    button.textContent = 'Copied!';
    setTimeout(() => button.textContent = 'Copy', 2000);
  });
}

3. Line Numbers:

/* HTML */
<pre><code>
<span class="line"><span class="ln">1</span>def hello():</span>
<span class="line"><span class="ln">2</span>    print("Hello")</span>
</code></pre>

/* CSS */
.line {
  display: block;
}

.ln {
  display: inline-block;
  width: 35px;
  text-align: right;
  margin-right: 15px;
  color: #4a5568;
  user-select: none; /* Can't copy line numbers */
}

4. Syntax Highlighting (Manual):

/* Define color classes */
.keyword { color: #c586c0; }     /* Purple: if, def, class */
.string { color: #ce9178; }      /* Orange: "text" */
.comment { color: #6a9955; }     /* Green: # comments */
.function { color: #dcdcaa; }    /* Yellow: function names */
.number { color: #b5cea8; }      /* Light green: 123 */
.variable { color: #9cdcfe; }    /* Light blue: variables */

/* HTML Usage */
<span class="keyword">def</span> <span class="function">calculate</span>():
    <span class="variable">result</span> = <span class="number">42</span>

📚 Recommended Libraries

1. Prism.js (Recommended)

✅ Lightweight, automatic syntax highlighting

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-python">
def hello_world():
    print("Hello!")
</code></pre>

2. Highlight.js

✅ Automatic language detection, many themes

<link rel="stylesheet" href="highlight.min.css">
<script src="highlight.min.js"></script>
<script>hljs.highlightAll();</script>

3. Monaco Editor

✅ Full VS Code editor embedded (advanced)

✅ Code Block Checklist

Implementation Checklist:

  • ☐ Monospace font (Fira Code, Monaco, Courier)
  • ☐ Semantic HTML (<pre><code>)
  • ☐ Horizontal scroll для long lines
  • ☐ Language indicator visible
  • ☐ Copy button functional
  • ☐ Line numbers (optional)
  • ☐ Syntax highlighting applied
  • ☐ Adequate padding (20-25px)
  • ☐ Border-radius (8-12px) для visual polish
  • ☐ Sufficient color contrast
  • ☐ Mobile: Font size adjusted (smaller okay)
  • ☐ Tab key inserts spaces, not tabs