Code Syntax Highlighting Guide

✅ Setup Complete!

Your site now has beautiful GitHub Dark-themed syntax highlighting with copy buttons.

How to Use

1. Basic Code Blocks

Use triple backticks with a language identifier:

```python def hello_world(): print(“Hello, World!”) ```

2. Supported Languages

The most common languages:

python - Python
javascript or js - JavaScript
typescript or ts - TypeScript
bash or shell - Shell/Bash scripts
sql - SQL
yaml or yml - YAML
json - JSON
html - HTML
css - CSS
ruby - Ruby
java - Java
cpp or c++ - C++
go - Go
rust - Rust
php - PHP

3. Inline Code

Use single backticks for inline code: `variable_name` or `function()`

Features

✨ Dark Theme: GitHub-inspired dark background with syntax colors 🎨 Color Coding:

Keywords in red (#ff7b72)
Strings in blue (#a5d6ff)
Functions in purple (#d2a8ff)
Classes in orange (#f0883e)
Comments in gray (#8b949e)
Numbers in blue (#79c0ff)

📋 Copy Button: Hover over code blocks to see the copy button 📱 Responsive: Works great on mobile devices 🔄 Smooth Scrolling: Horizontal scroll for long lines

Examples

Python Example

```python class DataAnalyzer: def init(self, data): self.data = data

def analyze(self):
    """Analyze the data and return insights"""
    results = {
        'mean': self.data.mean(),
        'median': self.data.median(),
        'std': self.data.std()
    }
    return results \`\`\`

JavaScript Example

```javascript const fetchData = async (url) => { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error(‘Error fetching data:’, error); throw error; } }; ```

Bash Example

```bash #!/bin/bash

Deploy script

echo “Starting deployment…”

git pull origin main bundle install bundle exec jekyll build

echo “Deployment complete!” ```

Customization

Change Theme Colors

Edit assets/css/syntax-highlight.css:

Background: .highlight { background: #0d1117; }
Keywords: .highlight .k { color: #ff7b72; }
Strings: .highlight .s { color: #a5d6ff; }
Functions: .highlight .nf { color: #d2a8ff; }

Alternative Themes

If you want a different theme:

Light Theme: Change background to #ffffff and adjust colors
Monokai: Use warmer colors (yellows, oranges, greens)
Dracula: Purple-heavy color scheme
Nord: Cool blue/gray palette

Troubleshooting

Code not highlighting?

Make sure you’re using triple backticks (```)
Specify the language: ```python not just ```
Restart Jekyll server after config changes
Clear browser cache

Copy button not showing?

Check that code-copy.js is loaded
Open browser console for errors
Make sure code block has .highlight class

Colors look wrong?

Check that syntax-highlight.css is loaded
Verify no CSS conflicts in browser inspector
Make sure Rouge is configured in _config.yml

Files Added

_config.yml - Rouge configuration
assets/css/syntax-highlight.css - Styling
assets/js/code-copy.js - Copy button functionality
_layouts/default.html - Included CSS and JS