Markdown demo

Markdown Feature Demo

This page demonstrates syntax highlighting, tables, blockquotes, and code blocks in Jekyll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. When working with hardware description languages, you’ll frequently encounter constructs like always_ff and always_comb blocks, while in software development, functions like malloc() and free() are fundamental to memory management. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The std::vector container in C++ provides dynamic array functionality, similar to Python’s list type or the ArrayList in Java. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes

This is a simple blockquote. It can contain bold text, italic text, and even inline code.

Blockquote with heading

Blockquotes can contain multiple paragraphs and other markdown elements. When debugging hardware designs, you might use $display() statements in Verilog or assert macros in SystemVerilog for verification purposes.

• List item one
• List item two

Typography and Text Readability

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. In programming, concepts like dependency injection and inversion of control are fundamental design patterns that promote loose coupling. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. When implementing concurrent systems, understanding primitives like mutex, semaphore, and condition_variable becomes essential. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. In version control systems like Git, commands such as git rebase -i and git cherry-pick allow for sophisticated history manipulation, while git bisect helps identify problematic commits through binary search. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. The strcmp() function in C returns zero for equal strings, while Python’s == operator provides more intuitive boolean comparisons. Ut aliquam sollicitudin leo. Cras iaculis ultricies nulla. Donec quis dui at dolor tempor interdum.

Tables

Simple Table

Language	Type	First Appeared
SystemVerilog	HDL	2002
C++	Compiled	1985
Python	Interpreted	1991
Matlab	Numerical	1984
Bash	Shell	1989

Alignment Table

Left Aligned	Center Aligned	Right Aligned
Left	Center	Right
Text	Text	Text
More	Data	Here

Code Syntax Highlighting

The following sections demonstrate syntax highlighting across multiple programming languages. Each example showcases realistic code patterns you might encounter in production environments. Notice how keywords like function, class, and module are highlighted differently depending on the language context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In software development, understanding the difference between pass-by-value and pass-by-reference is crucial, especially when working with languages like C++ where both & references and * pointers provide different semantics. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1. SystemVerilog

module counter #(
    parameter WIDTH = 8
) (
    input  logic             clk,
    input  logic             rst_n,
    input  logic             enable,
    output logic [WIDTH-1:0] count
);

    always_ff @(posedge clk or negedge rst_n) begin
        if (!rst_n)
            count <= '0;
        else if (enable)
            count <= count + 1'b1;
    end

    // Assertion for overflow detection
    property no_overflow;
        @(posedge clk) disable iff (!rst_n)
        enable |-> count != '1;
    endproperty

    assert property (no_overflow);

endmodule

2. C++

#include <iostream>
#include <vector>
#include <algorithm>

template<typename T>
class CircularBuffer {
private:
    std::vector<T> buffer;
    size_t head, tail, capacity;
    bool full;

public:
    CircularBuffer(size_t size) : buffer(size), head(0), tail(0), 
                                   capacity(size), full(false) {}

    void push(const T& item) {
        buffer[head] = item;
        if (full) {
            tail = (tail + 1) % capacity;
        }
        head = (head + 1) % capacity;
        full = head == tail;
    }

    T pop() {
        if (empty()) {
            throw std::runtime_error("Buffer is empty");
        }
        auto val = buffer[tail];
        full = false;
        tail = (tail + 1) % capacity;
        return val;
    }

    bool empty() const { return (!full && (head == tail)); }
};

int main() {
    CircularBuffer<int> cb(5);
    for (int i = 0; i < 10; ++i) {
        cb.push(i);
    }
    return 0;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Template metaprogramming in C++ allows compile-time computations using constructs like typename and decltype, while modern features like auto type deduction and constexpr have made the language more approachable. Mauris accumsan nulla vel diam, sed fringilla turpis dolor non lectus.

3. MATLAB

function [eigenvalues, eigenvectors] = power_method(A, num_iterations)
    % Power Method for finding dominant eigenvalue
    % Input: A - square matrix, num_iterations - number of iterations
    % Output: dominant eigenvalue and corresponding eigenvector
    
    [n, ~] = size(A);
    b_k = rand(n, 1);  % Random initial vector
    b_k = b_k / norm(b_k);  % Normalize
    
    for k = 1:num_iterations
        % Calculate matrix-by-vector product Ab
        b_k1 = A * b_k;
        
        % Calculate norm
        b_k1_norm = norm(b_k1);
        
        % Re-normalize the vector
        b_k = b_k1 / b_k1_norm;
    end
    
    eigenvalues = b_k' * A * b_k;
    eigenvectors = b_k;
    
    % Plot convergence
    figure;
    plot(1:num_iterations, eigenvalues, 'LineWidth', 2);
    xlabel('Iteration');
    ylabel('Eigenvalue Estimate');
    title('Power Method Convergence');
    grid on;
end

4. Bash

#!/bin/bash

# Script to backup and compress log files
LOG_DIR="/var/log/myapp"
BACKUP_DIR="/backup/logs"
DATE=$(date +%Y%m%d_%H%M%S)
RETENTION_DAYS=30

# Function to check if directory exists
check_directory() {
    if [ ! -d "$1" ]; then
        echo "Error: Directory $1 does not exist"
        exit 1
    fi
}

# Function to compress and backup logs
backup_logs() {
    local source_dir=$1
    local dest_dir=$2
    local timestamp=$3
    
    echo "Starting backup at $(date)"
    
    # Create backup directory if it doesn't exist
    mkdir -p "$dest_dir"
    
    # Find and compress log files older than 1 day
    find "$source_dir" -name "*.log" -type f -mtime +1 | while read -r logfile; do
        filename=$(basename "$logfile")
        tar -czf "${dest_dir}/${filename%.log}_${timestamp}.tar.gz" "$logfile"
        echo "Backed up: $filename"
    done
    
    # Remove old backups
    find "$dest_dir" -name "*.tar.gz" -type f -mtime +$RETENTION_DAYS -delete
    
    echo "Backup completed at $(date)"
}

# Main execution
check_directory "$LOG_DIR"
backup_logs "$LOG_DIR" "$BACKUP_DIR" "$DATE"

Shell scripting relies heavily on utilities like grep, sed, and awk for text processing. The find command with its -exec flag provides powerful file system traversal capabilities. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

5. Python

import numpy as np
from typing import List, Tuple
from dataclasses import dataclass

@dataclass
class NeuralLayer:
    weights: np.ndarray
    biases: np.ndarray
    activation: str = 'relu'
    
    def forward(self, x: np.ndarray) -> np.ndarray:
        """Forward pass through the layer"""
        z = np.dot(x, self.weights) + self.biases
        
        if self.activation == 'relu':
            return np.maximum(0, z)
        elif self.activation == 'sigmoid':
            return 1 / (1 + np.exp(-z))
        elif self.activation == 'tanh':
            return np.tanh(z)
        else:
            return z

class SimpleNeuralNetwork:
    def __init__(self, layer_sizes: List[int]):
        self.layers = []
        for i in range(len(layer_sizes) - 1):
            weights = np.random.randn(layer_sizes[i], layer_sizes[i+1]) * 0.01
            biases = np.zeros((1, layer_sizes[i+1]))
            activation = 'relu' if i < len(layer_sizes) - 2 else 'sigmoid'
            self.layers.append(NeuralLayer(weights, biases, activation))
    
    def predict(self, X: np.ndarray) -> np.ndarray:
        """Forward propagation through all layers"""
        activation = X
        for layer in self.layers:
            activation = layer.forward(activation)
        return activation

# Example usage
if __name__ == "__main__":
    nn = SimpleNeuralNetwork([784, 128, 64, 10])
    X = np.random.randn(1, 784)
    output = nn.predict(X)
    print(f"Output shape: {output.shape}")

Python’s rich ecosystem includes powerful libraries for scientific computing. The numpy.ndarray type provides efficient multi-dimensional arrays, while decorators like @property and @classmethod enable elegant object-oriented designs. Lorem ipsum dolor sit amet, with type hints using List[int] and Dict[str, Any] improving code clarity. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

6. JavaScript

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
        return () => this.off(event, listener);
    }

    off(event, listenerToRemove) {
        if (!this.events[event]) return;
        
        this.events[event] = this.events[event].filter(
            listener => listener !== listenerToRemove
        );
    }

    emit(event, ...args) {
        if (!this.events[event]) return;
        
        this.events[event].forEach(listener => {
            listener(...args);
        });
    }

    once(event, listener) {
        const onceWrapper = (...args) => {
            listener(...args);
            this.off(event, onceWrapper);
        };
        this.on(event, onceWrapper);
    }
}

// Usage example
const emitter = new EventEmitter();
const unsubscribe = emitter.on('data', (data) => {
    console.log('Received:', data);
});

emitter.emit('data', { value: 42 });
unsubscribe();

Modern JavaScript has evolved significantly with ES6+ features. Arrow functions using => syntax provide concise callbacks, while async/await makes asynchronous code more readable than traditional Promise.then() chains. The spread operator ... and destructuring assignments have become idiomatic patterns. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

7. Java

import java.util.*;
import java.util.concurrent.*;

public class ThreadSafeCache<K, V> {
    private final ConcurrentHashMap<K, CacheEntry<V>> cache;
    private final long ttlMillis;
    private final ScheduledExecutorService cleanupExecutor;

    private static class CacheEntry<V> {
        final V value;
        final long expiryTime;

        CacheEntry(V value, long ttlMillis) {
            this.value = value;
            this.expiryTime = System.currentTimeMillis() + ttlMillis;
        }

        boolean isExpired() {
            return System.currentTimeMillis() > expiryTime;
        }
    }

    public ThreadSafeCache(long ttlMillis, long cleanupIntervalMillis) {
        this.cache = new ConcurrentHashMap<>();
        this.ttlMillis = ttlMillis;
        this.cleanupExecutor = Executors.newSingleThreadScheduledExecutor();
        
        // Schedule periodic cleanup
        cleanupExecutor.scheduleAtFixedRate(
            this::cleanup,
            cleanupIntervalMillis,
            cleanupIntervalMillis,
            TimeUnit.MILLISECONDS
        );
    }

    public void put(K key, V value) {
        cache.put(key, new CacheEntry<>(value, ttlMillis));
    }

    public Optional<V> get(K key) {
        CacheEntry<V> entry = cache.get(key);
        if (entry == null || entry.isExpired()) {
            cache.remove(key);
            return Optional.empty();
        }
        return Optional.of(entry.value);
    }

    private void cleanup() {
        cache.entrySet().removeIf(entry -> entry.getValue().isExpired());
    }

    public void shutdown() {
        cleanupExecutor.shutdown();
    }
}

8. Ruby

module Cacheable
  def self.included(base)
    base.extend(ClassMethods)
  end

  module ClassMethods
    def cache_method(method_name, ttl: 3600)
      original_method = instance_method(method_name)
      
      define_method(method_name) do |*args, **kwargs|
        cache_key = "#{method_name}_#{args}_#{kwargs}"
        
        if @cache && @cache[cache_key] && 
           Time.now - @cache[cache_key][:timestamp] < ttl
          return @cache[cache_key][:value]
        end
        
        result = original_method.bind(self).call(*args, **kwargs)
        
        @cache ||= {}
        @cache[cache_key] = {
          value: result,
          timestamp: Time.now
        }
        
        result
      end
    end
  end
end

class APIClient
  include Cacheable
  
  def initialize(base_url)
    @base_url = base_url
    @cache = {}
  end
  
  def fetch_user(user_id)
    # Simulate API call
    sleep(0.1)
    { id: user_id, name: "User #{user_id}" }
  end
  
  cache_method :fetch_user, ttl: 300
end

# Usage
client = APIClient.new("https://api.example.com")
user = client.fetch_user(123)  # Makes actual call
cached_user = client.fetch_user(123)  # Returns cached result

9. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Card Component</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <article class="card" data-category="technology">
            <header class="card__header">
                <img src="image.jpg" alt="Card image" class="card__image">
                <span class="card__badge">Featured</span>
            </header>
            
            <div class="card__body">
                <h2 class="card__title">
                    <a href="#" class="card__link">Article Title</a>
                </h2>
                <p class="card__description">
                    This is a description of the card content. It provides
                    a brief overview of what the article is about.
                </p>
                
                <ul class="card__tags">
                    <li class="tag">JavaScript</li>
                    <li class="tag">Web Development</li>
                    <li class="tag">Tutorial</li>
                </ul>
            </div>
            
            <footer class="card__footer">
                <time datetime="2024-11-22" class="card__date">
                    November 22, 2024
                </time>
                <span class="card__author">By John Doe</span>
            </footer>
        </article>
    </div>
</body>
</html>

Semantic HTML5 elements like <article>, <section>, and <nav> provide meaningful structure to web pages. Accessibility attributes such as aria-label and role ensure content is usable by assistive technologies. The data-* attributes allow custom data storage directly in HTML elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

10. CSS

/* Modern CSS with Custom Properties and Grid */
:root {
    --primary-color: #3b82f6;
    --secondary-color: #8b5cf6;
    --text-color: #1f2937;
    --bg-color: #f9fafb;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
    --border-radius: 0.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--transition-speed),
                box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card__header {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed);
}

.card:hover .card__image {
    transform: scale(1.05);
}

.card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

11. SQL

-- Complex query with CTEs, window functions, and aggregations
WITH monthly_sales AS (
    SELECT 
        DATE_TRUNC('month', order_date) AS month,
        product_id,
        SUM(quantity * unit_price) AS total_sales,
        COUNT(DISTINCT order_id) AS order_count
    FROM orders
    WHERE order_date >= CURRENT_DATE - INTERVAL '12 months'
    GROUP BY DATE_TRUNC('month', order_date), product_id
),
ranked_products AS (
    SELECT 
        ms.*,
        p.product_name,
        p.category,
        RANK() OVER (
            PARTITION BY ms.month 
            ORDER BY ms.total_sales DESC
        ) AS sales_rank,
        AVG(ms.total_sales) OVER (
            PARTITION BY ms.product_id
        ) AS avg_monthly_sales
    FROM monthly_sales ms
    JOIN products p ON ms.product_id = p.product_id
)
SELECT 
    month,
    product_name,
    category,
    total_sales,
    order_count,
    sales_rank,
    ROUND(total_sales / avg_monthly_sales * 100, 2) AS performance_index
FROM ranked_products
WHERE sales_rank <= 10
ORDER BY month DESC, sales_rank ASC;

Code block without syntax highliting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut risus vel neque sagittis 
pellentesque. Pellentesque bibendum nisl tellus, nec luctus nibh sollicitudin non.
Donec quis sollicitudin velit. Curabitur ante ante, vulputate sed metus at, cursus eleifend urna. 
Curabitur dapibus molestie bibendum. Ut eget pharetra nisi. Sed a viverra diam. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Pellentesque ac lacus in magna ornare pretium a sit amet 
urna. Nunc et arcu commodo, semper diam eget, imperdiet velit. Aliquam eros dui, pharetra et
vulputate non, rutrum id lectus. Proin sed varius nunc. Vestibulum erat ante, varius vitae nisl 
a, consequat facilisis augue. Nam quis ex nec dolor tempor dapibus. Ut ac pulvinar est.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

Inline Code

You can also use inline code within paragraphs. For example, the printf() function in C, or the always_ff block in SystemVerilog. Lorem ipsum dolor sit amet, when discussing memory management you might reference malloc() and calloc() for allocation, or memcpy() for copying data between buffers.

In web development, CSS selectors like .class-name and #id-selector target elements, while pseudo-classes such as :hover and :nth-child() provide dynamic styling. JavaScript methods like addEventListener() and querySelector() form the basis of DOM manipulation. Vestibulum ante ipsum primis in faucibus.

Hardware designers frequently work with operators: the reduction OR | operator in Verilog, bitwise shifts using << and >>, and the concatenation operator {} for building wider signals. The non-blocking assignment <= differs fundamentally from the blocking assignment = in terms of simulation semantics.

Database queries utilize functions like COUNT(), AVG(), and GROUP_CONCAT(), while clauses such as WHERE, HAVING, and ORDER BY structure the query logic. The JOIN operations (INNER JOIN, LEFT JOIN, RIGHT JOIN) combine data from multiple tables. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mixed Content Example

Here’s a paragraph that contains bold text, italic text, and a link to Jekyll.

And here’s a blockquote that references some code:

def hello_world():
    print("Hello, World!")

---

Conclusion

This demo file showcases all the major markdown features supported by Jekyll, including syntax highlighting for multiple programming languages, tables with different alignments, blockquotes with nested content, and inline code formatting.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Testing your Jekyll theme’s typography involves checking how monospace fonts render inline within body text, ensuring proper contrast and readability. Configuration options in _config.yml control site-wide behavior, while front matter variables like layout, title, and categories customize individual pages. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The combination of Markdown’s simplicity with Jekyll’s power provides an excellent platform for technical writing. Whether documenting API endpoints with GET /api/users/{id} notation, explaining command-line tools like bundle exec jekyll serve, or discussing programming concepts, the syntax highlighting and formatting capabilities ensure your content remains both readable and professional.