Markdown Code Block Syntax Highlighting and Language Specification: Complete Guide to Enhanced Code Display and Documentation
Advanced Markdown code block syntax highlighting and language specification enable sophisticated technical documentation that provides clear, readable code examples with proper syntax coloring, language-specific formatting, and enhanced readability. By mastering language identifiers, highlighting techniques, and code presentation strategies, technical writers can create comprehensive documentation that serves developers, educators, and technical teams with professional-quality code display and interactive examples.
Why Master Code Block Syntax Highlighting?
Professional code block highlighting provides essential benefits for technical documentation:
- Enhanced Readability: Syntax highlighting improves code comprehension and reduces reading fatigue
- Language Clarity: Explicit language specification eliminates ambiguity about code types and contexts
- Professional Appearance: Proper highlighting creates publication-ready technical documentation
- Educational Value: Color-coded syntax helps learners understand language structure and patterns
- Multi-Language Support: Handle diverse programming languages and markup formats consistently
Foundation Code Block Syntax
Basic Fenced Code Blocks
Understanding core Markdown code block formatting and language specification:
# Basic Code Block Patterns
## Simple Code Block Without Language
```
function basicExample() {
return "No syntax highlighting";
}
```
## JavaScript Code Block
```javascript
function highlightedExample() {
const message = "JavaScript syntax highlighting";
console.log(message);
return message;
}
```
## Python Code Block
```python
def python_example():
"""Python function with proper highlighting"""
message = "Python syntax highlighting"
print(message)
return message
```
## HTML Code Block
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
</head>
<body>
<h1>Syntax Highlighted HTML</h1>
<p>This HTML code is properly highlighted.</p>
</body>
</html>
```
## CSS Code Block
```css
/* CSS with syntax highlighting */
.code-block {
background-color: #f8f8f8;
border: 1px solid #e1e1e8;
border-radius: 4px;
padding: 16px;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
.syntax-highlight {
color: #d73a49;
font-weight: bold;
}
```
## SQL Code Block
```sql
-- SQL query with highlighting
SELECT
users.id,
users.name,
users.email,
COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at >= '2024-01-01'
GROUP BY users.id, users.name, users.email
ORDER BY order_count DESC
LIMIT 10;
```
Advanced Language Specifications
Implementing comprehensive language identification for diverse code types:
# Advanced Language Specifications
## Programming Languages
### Statically Typed Languages
```java
// Java with full syntax highlighting
public class CodeHighlightExample {
private static final String MESSAGE = "Java highlighting";
public static void main(String[] args) {
System.out.println(MESSAGE);
List<String> languages = Arrays.asList("Java", "C++", "C#");
languages.forEach(System.out::println);
}
}
```
```cpp
// C++ code block
#include <iostream>
#include <vector>
#include <algorithm>
class SyntaxExample {
private:
std::vector<std::string> languages;
public:
SyntaxExample() {
languages = {"C++", "Java", "Python"};
}
void displayLanguages() {
std::for_each(languages.begin(), languages.end(),
[](const std::string& lang) {
std::cout << "Language: " << lang << std::endl;
});
}
};
```
```csharp
// C# with proper highlighting
using System;
using System.Collections.Generic;
using System.Linq;
namespace CodeHighlightExample
{
public class Program
{
public static void Main(string[] args)
{
var languages = new List<string> { "C#", "VB.NET", "F#" };
languages.ForEach(lang =>
Console.WriteLine($"Highlighting: {lang}"));
var query = from lang in languages
where lang.Contains("#")
select lang.ToUpper();
foreach (var result in query)
{
Console.WriteLine(result);
}
}
}
}
```
### Dynamically Typed Languages
```ruby
# Ruby code with syntax highlighting
class CodeHighlightDemo
attr_reader :languages
def initialize
@languages = ['Ruby', 'Python', 'JavaScript']
end
def display_languages
@languages.each_with_index do |lang, index|
puts "#{index + 1}. #{lang} has excellent highlighting"
end
end
def filter_languages(&block)
@languages.select(&block)
end
end
demo = CodeHighlightDemo.new
demo.display_languages
```
```php
<?php
// PHP with comprehensive highlighting
namespace CodeExample\Highlighting;
use DateTime;
use Exception;
class SyntaxHighlighter
{
private array $supportedLanguages;
private string $currentTheme;
public function __construct(array $languages = [])
{
$this->supportedLanguages = $languages ?: [
'php', 'javascript', 'python', 'ruby'
];
$this->currentTheme = 'default';
}
public function highlight(string $code, string $language): string
{
if (!in_array($language, $this->supportedLanguages)) {
throw new Exception("Unsupported language: {$language}");
}
// Highlighting logic would go here
return "<pre><code class=\"language-{$language}\">{$code}</code></pre>";
}
public function getSupportedLanguages(): array
{
return $this->supportedLanguages;
}
}
$highlighter = new SyntaxHighlighter();
echo $highlighter->highlight('echo "Hello World!";', 'php');
?>
```
### Functional Languages
```haskell
-- Haskell with syntax highlighting
module CodeHighlighting where
import Data.List (sort, nub)
import Control.Monad (forM_)
-- Type definitions
data Language = Language
{ name :: String
, paradigm :: String
, yearCreated :: Int
} deriving (Show, Eq)
-- Sample languages
languages :: [Language]
languages =
[ Language "Haskell" "Functional" 1990
, Language "Lisp" "Functional" 1958
, Language "Erlang" "Functional" 1986
]
-- Function to filter languages by paradigm
filterByParadigm :: String -> [Language] -> [Language]
filterByParadigm p = filter (\lang -> paradigm lang == p)
-- Function to display languages
displayLanguages :: [Language] -> IO ()
displayLanguages langs = do
putStrLn "Supported Languages:"
forM_ langs $ \lang -> do
putStrLn $ " " ++ name lang ++ " (" ++ show (yearCreated lang) ++ ")"
main :: IO ()
main = do
let functional = filterByParadigm "Functional" languages
displayLanguages functional
```
```lisp
;; Lisp with syntax highlighting
(defpackage :code-highlighting
(:use :cl)
(:export #:highlight-code #:supported-languages))
(in-package :code-highlighting)
;; Define supported languages
(defparameter *supported-languages*
'((lisp "Lisp" "Functional")
(scheme "Scheme" "Functional")
(clojure "Clojure" "Functional")))
;; Function to get language info
(defun get-language-info (lang-symbol)
"Get information about a programming language"
(assoc lang-symbol *supported-languages*))
;; Function to highlight code (simplified)
(defun highlight-code (code language)
"Apply syntax highlighting to code"
(let ((lang-info (get-language-info language)))
(if lang-info
(format nil "<pre><code class=\"~a\">~a</code></pre>"
(second lang-info) code)
(format nil "<pre><code>~a</code></pre>" code))))
;; Example usage
(defun demonstrate-highlighting ()
"Demonstrate code highlighting functionality"
(let ((sample-code "(defun hello-world () (format t \"Hello, World!~%\"))"))
(highlight-code sample-code 'lisp)))
```
Markup and Configuration Languages
Comprehensive Markup Support
Supporting diverse markup languages and configuration formats:
# Markup and Configuration Language Support
## Markup Languages
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- XML with full syntax highlighting -->
<configuration>
<settings>
<database>
<host>localhost</host>
<port>5432</port>
<name>production_db</name>
</database>
<logging level="info">
<file>/var/log/application.log</file>
<max-size>100MB</max-size>
</logging>
</settings>
<features>
<feature name="syntax-highlighting" enabled="true"/>
<feature name="auto-complete" enabled="true"/>
<feature name="error-checking" enabled="false"/>
</features>
</configuration>
```
```yaml
# YAML configuration with highlighting
application:
name: "Code Highlighting Service"
version: "1.0.0"
database:
host: localhost
port: 5432
name: code_examples
credentials:
username: developer
password: !encrypted "AES256:encrypted_password_here"
server:
port: 8080
ssl:
enabled: true
certificate: "/path/to/cert.pem"
private_key: "/path/to/key.pem"
features:
- name: syntax_highlighting
enabled: true
languages:
- javascript
- python
- java
- go
- name: code_execution
enabled: false
sandbox: true
logging:
level: info
outputs:
- type: file
path: "/var/log/app.log"
- type: console
format: json
```
```toml
# TOML configuration highlighting
[application]
name = "Syntax Highlighter"
version = "2.1.0"
description = "Advanced code highlighting service"
[database]
host = "localhost"
port = 5432
name = "highlighting_db"
max_connections = 100
[server]
port = 8080
host = "0.0.0.0"
workers = 4
[server.ssl]
enabled = true
cert_file = "/etc/ssl/certs/app.crt"
key_file = "/etc/ssl/private/app.key"
[[languages]]
name = "JavaScript"
extension = "js"
highlight_engine = "prism"
[[languages]]
name = "Python"
extension = "py"
highlight_engine = "pygments"
[[languages]]
name = "Rust"
extension = "rs"
highlight_engine = "tree-sitter"
[highlighting]
theme = "github"
line_numbers = true
tab_size = 4
```
```json
{
"name": "code-highlighting-config",
"version": "1.0.0",
"description": "JSON configuration for code highlighting",
"engines": {
"prism": {
"version": "1.29.0",
"themes": [
"default",
"dark",
"solarizedlight",
"tomorrow"
],
"languages": {
"javascript": {
"aliases": ["js", "node"],
"extensions": [".js", ".mjs", ".jsx"]
},
"python": {
"aliases": ["py"],
"extensions": [".py", ".pyw", ".pyi"]
},
"typescript": {
"aliases": ["ts"],
"extensions": [".ts", ".tsx"]
}
}
},
"highlight.js": {
"version": "11.9.0",
"auto_detection": true,
"languages": [
"javascript",
"python",
"java",
"cpp",
"html",
"css"
]
}
},
"settings": {
"line_numbers": true,
"tab_size": 2,
"word_wrap": false,
"theme": "github",
"auto_highlight": true
}
}
```
## Shell and Command Languages
```bash
#!/bin/bash
# Bash script with syntax highlighting
set -euo pipefail
# Configuration variables
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
LOG_FILE="${SCRIPT_DIR}/highlighting.log"
SUPPORTED_LANGUAGES=("javascript" "python" "java" "go" "rust")
# Function to log messages
log_message() {
local level="$1"
local message="$2"
echo "[$(date '+%Y-%m-%d %H:%M:%S')] [$level] $message" | tee -a "$LOG_FILE"
}
# Function to check if language is supported
is_language_supported() {
local language="$1"
for supported in "${SUPPORTED_LANGUAGES[@]}"; do
if [[ "$language" == "$supported" ]]; then
return 0
fi
done
return 1
}
# Function to highlight code file
highlight_file() {
local file_path="$1"
local language="$2"
if [[ ! -f "$file_path" ]]; then
log_message "ERROR" "File not found: $file_path"
return 1
fi
if ! is_language_supported "$language"; then
log_message "WARNING" "Language not supported: $language"
return 1
fi
log_message "INFO" "Highlighting $file_path as $language"
# Use pygmentize for highlighting (example)
if command -v pygmentize &> /dev/null; then
pygmentize -l "$language" -f html "$file_path"
else
log_message "ERROR" "pygmentize not found"
return 1
fi
}
# Main execution
main() {
if [[ $# -lt 2 ]]; then
echo "Usage: $0 <file_path> <language>"
echo "Supported languages: ${SUPPORTED_LANGUAGES[*]}"
exit 1
fi
highlight_file "$1" "$2"
}
main "$@"
```
```powershell
# PowerShell with syntax highlighting
[CmdletBinding()]
param(
[Parameter(Mandatory=$true)]
[string]$FilePath,
[Parameter(Mandatory=$true)]
[ValidateSet("JavaScript", "Python", "Java", "CSharp", "PowerShell")]
[string]$Language,
[Parameter(Mandatory=$false)]
[string]$OutputPath = "highlighted_output.html",
[Parameter(Mandatory=$false)]
[switch]$LineNumbers
)
# Configuration
$SupportedLanguages = @{
"JavaScript" = @{ Extension = ".js"; Color = "Blue" }
"Python" = @{ Extension = ".py"; Color = "Green" }
"Java" = @{ Extension = ".java"; Color = "Red" }
"CSharp" = @{ Extension = ".cs"; Color = "Purple" }
"PowerShell" = @{ Extension = ".ps1"; Color = "DarkBlue" }
}
function Write-Log {
param(
[string]$Message,
[ValidateSet("Info", "Warning", "Error")]
[string]$Level = "Info"
)
$timestamp = Get-Date -Format "yyyy-MM-dd HH:mm:ss"
$logEntry = "[$timestamp] [$Level] $Message"
switch ($Level) {
"Info" { Write-Host $logEntry -ForegroundColor Green }
"Warning" { Write-Host $logEntry -ForegroundColor Yellow }
"Error" { Write-Host $logEntry -ForegroundColor Red }
}
}
function Test-FileExists {
param([string]$Path)
if (-not (Test-Path -Path $Path)) {
Write-Log -Message "File not found: $Path" -Level "Error"
throw "File not found: $Path"
}
Write-Log -Message "File found: $Path" -Level "Info"
}
function Get-HighlightedContent {
param(
[string]$FilePath,
[string]$Language
)
$content = Get-Content -Path $FilePath -Raw
$languageInfo = $SupportedLanguages[$Language]
$htmlTemplate = @"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highlighted Code - $Language</title>
<style>
.code-container {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 16px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
color: $($languageInfo.Color);
}
</style>
</head>
<body>
<h1>$Language Code</h1>
<div class="code-container">$content</div>
</body>
</html>
"@
return $htmlTemplate
}
# Main execution
try {
Write-Log -Message "Starting code highlighting process" -Level "Info"
Test-FileExists -Path $FilePath
if (-not $SupportedLanguages.ContainsKey($Language)) {
throw "Unsupported language: $Language"
}
Write-Log -Message "Highlighting $FilePath as $Language" -Level "Info"
$highlightedContent = Get-HighlightedContent -FilePath $FilePath -Language $Language
Set-Content -Path $OutputPath -Value $highlightedContent -Encoding UTF8
Write-Log -Message "Output saved to: $OutputPath" -Level "Info"
Write-Log -Message "Code highlighting completed successfully" -Level "Info"
}
catch {
Write-Log -Message "Error: $($_.Exception.Message)" -Level "Error"
exit 1
}
```
Advanced Highlighting Techniques
Code Block Annotations and Metadata
Implementing enhanced code blocks with additional information:
# Advanced Code Block Features
## Code Blocks with Titles
```javascript title="user-authentication.js"
// User authentication service implementation
class AuthenticationService {
constructor(options = {}) {
this.jwtSecret = options.jwtSecret || process.env.JWT_SECRET;
this.tokenExpiry = options.tokenExpiry || '24h';
this.refreshTokenExpiry = options.refreshTokenExpiry || '30d';
}
async authenticate(credentials) {
const { username, password } = credentials;
try {
// Validate credentials against database
const user = await this.validateCredentials(username, password);
if (!user) {
throw new Error('Invalid credentials');
}
// Generate JWT tokens
const accessToken = this.generateAccessToken(user);
const refreshToken = this.generateRefreshToken(user);
return {
user: this.sanitizeUser(user),
tokens: { accessToken, refreshToken }
};
} catch (error) {
throw new Error(`Authentication failed: ${error.message}`);
}
}
}
```
## Code Blocks with Line Numbers
```python linenums="1" title="data-processor.py"
import pandas as pd
import numpy as np
from typing import Dict, List, Optional
import logging
class DataProcessor:
"""
Advanced data processing class with highlighting support
"""
def __init__(self, config: Dict):
self.config = config
self.logger = logging.getLogger(__name__)
self.processed_data = None
def load_data(self, file_path: str) -> pd.DataFrame:
"""Load data from various file formats"""
try:
if file_path.endswith('.csv'):
data = pd.read_csv(file_path)
elif file_path.endswith('.json'):
data = pd.read_json(file_path)
elif file_path.endswith('.xlsx'):
data = pd.read_excel(file_path)
else:
raise ValueError(f"Unsupported file format: {file_path}")
self.logger.info(f"Successfully loaded {len(data)} records")
return data
except Exception as e:
self.logger.error(f"Failed to load data: {str(e)}")
raise
def process_data(self, data: pd.DataFrame) -> pd.DataFrame:
"""Process data with configured transformations"""
processed = data.copy()
# Apply transformations based on configuration
for transform in self.config.get('transformations', []):
processed = self._apply_transformation(processed, transform)
self.processed_data = processed
return processed
```
## Code Blocks with Highlighted Lines
```java {3,8-10,15} title="DatabaseConnection.java"
public class DatabaseConnection {
private static final String DATABASE_URL = "jdbc:postgresql://localhost:5432/app_db";
private Connection connection; // This line is highlighted
private boolean isConnected = false;
public DatabaseConnection() {
try {
this.connection = DriverManager.getConnection(DATABASE_URL); // Highlighted
this.isConnected = connection != null && !connection.isClosed(); // Highlighted
logger.info("Database connection established successfully"); // Highlighted
} catch (SQLException e) {
logger.error("Failed to establish database connection", e);
this.isConnected = false;
}
setupConnectionPool(); // This line is highlighted
}
private void setupConnectionPool() {
// Connection pool configuration
}
}
```
## Code Blocks with Diff Highlighting
```diff title="api-changes.diff"
class APIResponse {
constructor(data, status = 200) {
this.data = data;
this.status = status;
- this.timestamp = Date.now();
+ this.timestamp = new Date().toISOString();
+ this.version = '2.0';
}
toJSON() {
return {
data: this.data,
status: this.status,
- timestamp: this.timestamp
+ timestamp: this.timestamp,
+ version: this.version,
+ metadata: this.getMetadata()
};
}
+
+ getMetadata() {
+ return {
+ server: process.env.SERVER_NAME,
+ environment: process.env.NODE_ENV
+ };
+ }
}
```
## Multi-Language Code Blocks
```javascript tab="JavaScript"
// JavaScript implementation
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const userData = await response.json();
return userData;
} catch (error) {
console.error('Failed to fetch user data:', error);
throw error;
}
}
// Usage
fetchUserData(123)
.then(user => console.log(user))
.catch(error => console.error(error));
```
```python tab="Python"
import asyncio
import aiohttp
import logging
async def fetch_user_data(user_id: int) -> dict:
"""
Fetch user data from API asynchronously
"""
url = f"/api/users/{user_id}"
try:
async with aiohttp.ClientSession() as session:
async with session.get(url) as response:
if response.status != 200:
raise aiohttp.ClientError(f"HTTP error! status: {response.status}")
user_data = await response.json()
return user_data
except Exception as error:
logging.error(f"Failed to fetch user data: {error}")
raise
# Usage
async def main():
try:
user = await fetch_user_data(123)
print(user)
except Exception as error:
print(f"Error: {error}")
asyncio.run(main())
```
```java tab="Java"
import java.net.http.*;
import java.net.URI;
import java.io.IOException;
import java.util.concurrent.CompletableFuture;
import com.fasterxml.jackson.databind.ObjectMapper;
public class UserDataFetcher {
private final HttpClient httpClient;
private final ObjectMapper objectMapper;
public UserDataFetcher() {
this.httpClient = HttpClient.newHttpClient();
this.objectMapper = new ObjectMapper();
}
public CompletableFuture<User> fetchUserData(int userId) {
String url = "/api/users/" + userId;
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create(url))
.GET()
.build();
return httpClient.sendAsync(request, HttpResponse.BodyHandlers.ofString())
.thenApply(response -> {
if (response.statusCode() != 200) {
throw new RuntimeException("HTTP error! status: " + response.statusCode());
}
try {
return objectMapper.readValue(response.body(), User.class);
} catch (Exception e) {
throw new RuntimeException("Failed to parse user data", e);
}
});
}
// Usage
public static void main(String[] args) {
UserDataFetcher fetcher = new UserDataFetcher();
fetcher.fetchUserData(123)
.thenAccept(user -> System.out.println(user))
.exceptionally(error -> {
System.err.println("Error: " + error.getMessage());
return null;
});
}
}
```
Language-Specific Best Practices
Database Languages and Queries
Comprehensive database language support with proper formatting:
# Database Query Languages
## SQL with Advanced Features
```sql title="complex-analytics-query.sql"
-- Complex analytics query with window functions
WITH user_metrics AS (
SELECT
u.id,
u.username,
u.created_at,
COUNT(p.id) as total_posts,
AVG(p.score) as avg_score,
RANK() OVER (ORDER BY COUNT(p.id) DESC) as post_rank,
ROW_NUMBER() OVER (
PARTITION BY DATE_TRUNC('month', u.created_at)
ORDER BY COUNT(p.id) DESC
) as monthly_rank
FROM users u
LEFT JOIN posts p ON u.id = p.author_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.username, u.created_at
),
engagement_stats AS (
SELECT
um.id,
um.username,
um.total_posts,
um.avg_score,
CASE
WHEN um.total_posts >= 100 THEN 'High'
WHEN um.total_posts >= 50 THEN 'Medium'
ELSE 'Low'
END as engagement_level,
PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY um.avg_score)
OVER () as median_score
FROM user_metrics um
)
SELECT
es.username,
es.total_posts,
ROUND(es.avg_score, 2) as average_score,
es.engagement_level,
ROUND(es.median_score, 2) as median_score,
CASE
WHEN es.avg_score > es.median_score THEN 'Above Average'
ELSE 'Below Average'
END as performance_category
FROM engagement_stats es
WHERE es.total_posts > 10
ORDER BY es.total_posts DESC, es.avg_score DESC;
```
## MongoDB Aggregation Pipeline
```javascript title="mongodb-aggregation.js"
// MongoDB aggregation pipeline with syntax highlighting
db.orders.aggregate([
// Match orders from the last 30 days
{
$match: {
createdAt: {
$gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
},
status: { $in: ["completed", "shipped"] }
}
},
// Lookup user information
{
$lookup: {
from: "users",
localField: "userId",
foreignField: "_id",
as: "user"
}
},
// Unwind user array
{
$unwind: "$user"
},
// Group by user and calculate metrics
{
$group: {
_id: "$userId",
username: { $first: "$user.username" },
email: { $first: "$user.email" },
totalOrders: { $sum: 1 },
totalAmount: { $sum: "$total" },
avgOrderValue: { $avg: "$total" },
categories: { $addToSet: "$category" },
firstOrder: { $min: "$createdAt" },
lastOrder: { $max: "$createdAt" }
}
},
// Add calculated fields
{
$addFields: {
customerTier: {
$switch: {
branches: [
{ case: { $gte: ["$totalAmount", 1000] }, then: "Premium" },
{ case: { $gte: ["$totalAmount", 500] }, then: "Gold" },
{ case: { $gte: ["$totalAmount", 200] }, then: "Silver" }
],
default: "Bronze"
}
},
daysSinceLastOrder: {
$divide: [
{ $subtract: [new Date(), "$lastOrder"] },
1000 * 60 * 60 * 24
]
}
}
},
// Sort by total amount descending
{
$sort: { totalAmount: -1 }
},
// Limit to top 100 customers
{
$limit: 100
},
// Project final fields
{
$project: {
_id: 0,
userId: "$_id",
username: 1,
email: 1,
totalOrders: 1,
totalAmount: { $round: ["$totalAmount", 2] },
avgOrderValue: { $round: ["$avgOrderValue", 2] },
customerTier: 1,
categories: 1,
daysSinceLastOrder: { $round: ["$daysSinceLastOrder", 0] }
}
}
]);
```
## Redis Commands
```redis title="redis-operations.redis"
# Redis operations with syntax highlighting
# Set user session data
HSET user:12345 name "John Doe" email "[email protected]" lastLogin "2024-12-11T10:30:00Z"
EXPIRE user:12345 3600
# Increment page view counter
INCR page:views:homepage
INCR page:views:about
# Add items to user's shopping cart
SADD cart:12345 "product:101" "product:205" "product:387"
# Store recent searches (sliding window)
ZADD recent:searches:12345 1702294200 "syntax highlighting"
ZADD recent:searches:12345 1702294260 "markdown code blocks"
ZADD recent:searches:12345 1702294320 "programming languages"
# Get recent searches (last 10)
ZREVRANGE recent:searches:12345 0 9 WITHSCORES
# Cache database query result
SET cache:user_stats:12345 '{"posts":45,"followers":128,"following":67}' EX 900
# Implement rate limiting (100 requests per hour)
MULTI
INCR rate_limit:api:12345
EXPIRE rate_limit:api:12345 3600
EXEC
# Pub/Sub for real-time notifications
PUBLISH notifications:user:12345 '{"type":"new_message","from":"Jane","message":"Hello!"}'
# Geospatial operations
GEOADD locations:stores -73.9857 40.7484 "store:nyc:001"
GEOADD locations:stores -118.2437 34.0522 "store:la:001"
GEORADIUS locations:stores -73.9857 40.7484 10 mi WITHDIST WITHCOORD
# HyperLogLog for unique visitors
PFADD unique:visitors:2024-12-11 "user:123" "user:456" "user:789"
PFCOUNT unique:visitors:2024-12-11
```
Configuration and Infrastructure Languages
Supporting infrastructure-as-code and configuration languages:
# Infrastructure and Configuration Languages
## Docker Configuration
```dockerfile title="Dockerfile"
# Multi-stage Docker build with syntax highlighting
FROM node:18-alpine AS builder
# Set working directory
WORKDIR /app
# Copy package files
COPY package*.json ./
# Install dependencies
RUN npm ci --only=production && \
npm cache clean --force
# Copy source code
COPY . .
# Build application
RUN npm run build
# Production stage
FROM node:18-alpine AS production
# Create non-root user
RUN addgroup -g 1001 -S nodejs && \
adduser -S nextjs -u 1001
# Set working directory
WORKDIR /app
# Copy built application
COPY --from=builder --chown=nextjs:nodejs /app/build ./build
COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=builder --chown=nextjs:nodejs /app/package*.json ./
# Expose port
EXPOSE 3000
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD curl -f http://localhost:3000/health || exit 1
# Switch to non-root user
USER nextjs
# Set environment
ENV NODE_ENV=production
ENV PORT=3000
# Start application
CMD ["npm", "start"]
```
## Docker Compose
```yaml title="docker-compose.yml"
version: '3.8'
services:
# Web application service
web:
build:
context: .
dockerfile: Dockerfile
target: production
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- DATABASE_URL=postgresql://postgres:password@db:5432/app_db
- REDIS_URL=redis://redis:6379
depends_on:
db:
condition: service_healthy
redis:
condition: service_started
volumes:
- ./logs:/app/logs
networks:
- app-network
restart: unless-stopped
# Database service
db:
image: postgres:15-alpine
environment:
- POSTGRES_DB=app_db
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=password
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
- ./init.sql:/docker-entrypoint-initdb.d/init.sql
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres"]
interval: 10s
timeout: 5s
retries: 5
networks:
- app-network
restart: unless-stopped
# Redis cache service
redis:
image: redis:7-alpine
ports:
- "6379:6379"
command: redis-server --appendonly yes
volumes:
- redis_data:/data
networks:
- app-network
restart: unless-stopped
# Nginx reverse proxy
nginx:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./ssl:/etc/nginx/ssl
- nginx_logs:/var/log/nginx
depends_on:
- web
networks:
- app-network
restart: unless-stopped
# Named volumes
volumes:
postgres_data:
driver: local
redis_data:
driver: local
nginx_logs:
driver: local
# Networks
networks:
app-network:
driver: bridge
```
## Kubernetes Configuration
```yaml title="k8s-deployment.yaml"
# Kubernetes deployment with syntax highlighting
apiVersion: apps/v1
kind: Deployment
metadata:
name: code-highlighter-api
namespace: production
labels:
app: code-highlighter
version: v1.0.0
spec:
replicas: 3
strategy:
type: RollingUpdate
rollingUpdate:
maxUnavailable: 1
maxSurge: 2
selector:
matchLabels:
app: code-highlighter
template:
metadata:
labels:
app: code-highlighter
version: v1.0.0
annotations:
prometheus.io/scrape: "true"
prometheus.io/port: "8080"
prometheus.io/path: "/metrics"
spec:
serviceAccountName: code-highlighter-sa
containers:
- name: api
image: myregistry/code-highlighter:v1.0.0
imagePullPolicy: Always
ports:
- containerPort: 8080
name: http
protocol: TCP
env:
- name: NODE_ENV
value: "production"
- name: DATABASE_URL
valueFrom:
secretKeyRef:
name: database-secret
key: url
- name: REDIS_URL
valueFrom:
configMapKeyRef:
name: cache-config
key: redis-url
resources:
requests:
memory: "256Mi"
cpu: "250m"
limits:
memory: "512Mi"
cpu: "500m"
livenessProbe:
httpGet:
path: /health
port: 8080
initialDelaySeconds: 30
periodSeconds: 10
timeoutSeconds: 5
failureThreshold: 3
readinessProbe:
httpGet:
path: /ready
port: 8080
initialDelaySeconds: 5
periodSeconds: 5
timeoutSeconds: 3
successThreshold: 1
failureThreshold: 3
volumeMounts:
- name: config-volume
mountPath: /app/config
readOnly: true
- name: logs-volume
mountPath: /app/logs
volumes:
- name: config-volume
configMap:
name: app-config
- name: logs-volume
emptyDir: {}
nodeSelector:
kubernetes.io/os: linux
tolerations:
- key: "app"
operator: "Equal"
value: "code-highlighter"
effect: "NoSchedule"
---
apiVersion: v1
kind: Service
metadata:
name: code-highlighter-service
namespace: production
labels:
app: code-highlighter
spec:
type: ClusterIP
ports:
- port: 80
targetPort: 8080
protocol: TCP
name: http
selector:
app: code-highlighter
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: code-highlighter-ingress
namespace: production
annotations:
kubernetes.io/ingress.class: nginx
cert-manager.io/cluster-issuer: letsencrypt-prod
nginx.ingress.kubernetes.io/rate-limit: "100"
spec:
tls:
- hosts:
- api.codehighlighter.com
secretName: tls-secret
rules:
- host: api.codehighlighter.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: code-highlighter-service
port:
number: 80
```
## Terraform Infrastructure
```hcl title="main.tf"
# Terraform configuration with syntax highlighting
terraform {
required_version = ">= 1.0"
required_providers {
aws = {
source = "hashicorp/aws"
version = "~> 5.0"
}
kubernetes = {
source = "hashicorp/kubernetes"
version = "~> 2.0"
}
}
backend "s3" {
bucket = "terraform-state-code-highlighter"
key = "infrastructure/terraform.tfstate"
region = "us-west-2"
encrypt = true
dynamodb_table = "terraform-locks"
}
}
# Configure AWS Provider
provider "aws" {
region = var.aws_region
default_tags {
tags = {
Project = "CodeHighlighter"
Environment = var.environment
ManagedBy = "Terraform"
}
}
}
# Data sources
data "aws_availability_zones" "available" {
state = "available"
}
data "aws_caller_identity" "current" {}
# Variables
variable "aws_region" {
description = "AWS region for resources"
type = string
default = "us-west-2"
}
variable "environment" {
description = "Environment name"
type = string
validation {
condition = contains(["dev", "staging", "prod"], var.environment)
error_message = "Environment must be dev, staging, or prod."
}
}
variable "instance_type" {
description = "EC2 instance type"
type = string
default = "t3.micro"
}
# Local values
locals {
name_prefix = "code-highlighter-${var.environment}"
common_tags = {
Project = "CodeHighlighter"
Environment = var.environment
ManagedBy = "Terraform"
}
azs = slice(data.aws_availability_zones.available.names, 0, 2)
}
# VPC Configuration
resource "aws_vpc" "main" {
cidr_block = "10.0.0.0/16"
enable_dns_hostnames = true
enable_dns_support = true
tags = merge(local.common_tags, {
Name = "${local.name_prefix}-vpc"
})
}
resource "aws_subnet" "public" {
count = length(local.azs)
vpc_id = aws_vpc.main.id
cidr_block = "10.0.${count.index + 1}.0/24"
availability_zone = local.azs[count.index]
map_public_ip_on_launch = true
tags = merge(local.common_tags, {
Name = "${local.name_prefix}-public-${count.index + 1}"
Type = "Public"
})
}
resource "aws_subnet" "private" {
count = length(local.azs)
vpc_id = aws_vpc.main.id
cidr_block = "10.0.${count.index + 10}.0/24"
availability_zone = local.azs[count.index]
tags = merge(local.common_tags, {
Name = "${local.name_prefix}-private-${count.index + 1}"
Type = "Private"
})
}
# Internet Gateway
resource "aws_internet_gateway" "main" {
vpc_id = aws_vpc.main.id
tags = merge(local.common_tags, {
Name = "${local.name_prefix}-igw"
})
}
# EKS Cluster
resource "aws_eks_cluster" "main" {
name = "${local.name_prefix}-cluster"
role_arn = aws_iam_role.eks_cluster.arn
version = "1.28"
vpc_config {
subnet_ids = concat(aws_subnet.public[*].id, aws_subnet.private[*].id)
endpoint_private_access = true
endpoint_public_access = true
public_access_cidrs = ["0.0.0.0/0"]
}
enabled_cluster_log_types = ["api", "audit", "authenticator", "controllerManager", "scheduler"]
depends_on = [
aws_iam_role_policy_attachment.eks_cluster_policy,
aws_iam_role_policy_attachment.eks_service_policy,
]
tags = local.common_tags
}
# Outputs
output "vpc_id" {
description = "VPC ID"
value = aws_vpc.main.id
}
output "cluster_endpoint" {
description = "EKS cluster endpoint"
value = aws_eks_cluster.main.endpoint
sensitive = true
}
output "cluster_name" {
description = "EKS cluster name"
value = aws_eks_cluster.main.name
}
```
Integration with Documentation Systems
Advanced code block syntax highlighting integrates seamlessly with comprehensive documentation workflows. When combined with automated testing and validation systems, syntax highlighting ensures that code examples remain accurate, executable, and properly formatted across large documentation repositories.
For comprehensive content management, highlighting systems work effectively with version control and collaborative editing workflows to track code changes, maintain syntax consistency, and coordinate updates across distributed documentation teams working with multiple programming languages and technical formats.
When building sophisticated documentation platforms, syntax highlighting complements Progressive Web App documentation systems by enabling fast, offline-capable code display, efficient syntax processing, and responsive code presentation that maintains readability across different devices and viewing contexts.
Advanced Implementation Strategies
Custom Syntax Highlighting Systems
Building sophisticated highlighting engines for specialized use cases:
```python title=”custom-highlighter.py”
Custom syntax highlighting engine implementation
import re
import json
from typing import Dict, List, Optional, Tuple
from dataclasses import dataclass
from pathlib import Path
@dataclass
class HighlightRule:
“"”Represents a syntax highlighting rule”””
pattern: str
token_type: str
css_class: str
priority: int = 0
multiline: bool = False
@dataclass
class LanguageDefinition:
“"”Complete language definition for highlighting”””
name: str
extensions: List[str]
rules: List[HighlightRule]
keywords: List[str] = None
operators: List[str] = None
delimiters: List[str] = None
def __post_init__(self):
if self.keywords is None:
self.keywords = []
if self.operators is None:
self.operators = []
if self.delimiters is None:
self.delimiters = []
class SyntaxHighlighter:
“"”Advanced syntax highlighting engine”””
def __init__(self):
self.languages: Dict[str, LanguageDefinition] = {}
self.default_theme = "github"
self.themes: Dict[str, Dict] = {}
# Load built-in language definitions
self._load_builtin_languages()
self._load_builtin_themes()
def _load_builtin_languages(self):
"""Load built-in language definitions"""
# JavaScript language definition
js_rules = [
HighlightRule(r'\b(function|const|let|var|if|else|for|while|class|return)\b',
'keyword', 'hljs-keyword', 10),
HighlightRule(r'\b(true|false|null|undefined)\b',
'literal', 'hljs-literal', 9),
HighlightRule(r'"([^"\\]|\\.)*"',
'string', 'hljs-string', 8),
HighlightRule(r"'([^'\\]|\\.)*'",
'string', 'hljs-string', 8),
HighlightRule(r'`([^`\\]|\\.)*`',
'string', 'hljs-string', 8),
HighlightRule(r'\b\d+\.?\d*\b',
'number', 'hljs-number', 7),
HighlightRule(r'//.*$',
'comment', 'hljs-comment', 6, multiline=False),
HighlightRule(r'/\*[\s\S]*?\*/',
'comment', 'hljs-comment', 6, multiline=True),
HighlightRule(r'\b[A-Z_][A-Z0-9_]*\b',
'constant', 'hljs-constant', 5),
HighlightRule(r'\b[a-zA-Z_][a-zA-Z0-9_]*(?=\s*\()',
'function', 'hljs-function', 4),
]
self.languages['javascript'] = LanguageDefinition(
name='JavaScript',
extensions=['.js', '.jsx', '.mjs'],
rules=js_rules,
keywords=['function', 'const', 'let', 'var', 'if', 'else', 'for', 'while', 'class', 'return'],
operators=['+', '-', '*', '/', '=', '==', '===', '!=', '!==', '<', '>', '<=', '>='],
delimiters=['(', ')', '{', '}', '[', ']', ';', ',']
)
# Python language definition
py_rules = [
HighlightRule(r'\b(def|class|if|elif|else|for|while|try|except|with|import|from|return|yield)\b',
'keyword', 'hljs-keyword', 10),
HighlightRule(r'\b(True|False|None)\b',
'literal', 'hljs-literal', 9),
HighlightRule(r'"""[\s\S]*?"""',
'string', 'hljs-string', 8, multiline=True),
HighlightRule(r"'''[\s\S]*?'''",
'string', 'hljs-string', 8, multiline=True),
HighlightRule(r'"([^"\\]|\\.)*"',
'string', 'hljs-string', 8),
HighlightRule(r"'([^'\\]|\\.)*'",
'string', 'hljs-string', 8),
HighlightRule(r'#.*$',
'comment', 'hljs-comment', 6),
HighlightRule(r'\b\d+\.?\d*\b',
'number', 'hljs-number', 7),
HighlightRule(r'@\w+',
'decorator', 'hljs-decorator', 5),
]
self.languages['python'] = LanguageDefinition(
name='Python',
extensions=['.py', '.pyw', '.pyi'],
rules=py_rules
)
def _load_builtin_themes(self):
"""Load built-in color themes"""
self.themes['github'] = {
'hljs-keyword': {'color': '#d73a49', 'font-weight': 'bold'},
'hljs-string': {'color': '#032f62'},
'hljs-comment': {'color': '#6a737d', 'font-style': 'italic'},
'hljs-number': {'color': '#005cc5'},
'hljs-literal': {'color': '#005cc5'},
'hljs-function': {'color': '#6f42c1'},
'hljs-constant': {'color': '#005cc5'},
'hljs-decorator': {'color': '#d73a49'}
}
self.themes['dark'] = {
'hljs-keyword': {'color': '#ff79c6', 'font-weight': 'bold'},
'hljs-string': {'color': '#f1fa8c'},
'hljs-comment': {'color': '#6272a4', 'font-style': 'italic'},
'hljs-number': {'color': '#bd93f9'},
'hljs-literal': {'color': '#bd93f9'},
'hljs-function': {'color': '#50fa7b'},
'hljs-constant': {'color': '#8be9fd'},
'hljs-decorator': {'color': '#ff79c6'}
}
def register_language(self, lang_def: LanguageDefinition):
"""Register a new language definition"""
self.languages[lang_def.name.lower()] = lang_def
def highlight_code(self, code: str, language: str, theme: str = None) -> str:
"""Highlight code with specified language and theme"""
if language.lower() not in self.languages:
return self._wrap_code(code, 'plain')
lang_def = self.languages[language.lower()]
theme_name = theme or self.default_theme
# Apply syntax rules
highlighted = self._apply_syntax_rules(code, lang_def)
# Generate HTML with theme
html = self._generate_html(highlighted, theme_name)
return html
def _apply_syntax_rules(self, code: str, lang_def: LanguageDefinition) -> List[Tuple[str, str]]:
"""Apply syntax highlighting rules to code"""
tokens = []
position = 0
# Sort rules by priority (highest first)
rules = sorted(lang_def.rules, key=lambda r: r.priority, reverse=True)
while position < len(code):
matched = False
for rule in rules:
flags = re.MULTILINE if rule.multiline else 0
pattern = re.compile(rule.pattern, flags)
match = pattern.match(code, position)
if match:
# Add matched text with token type
matched_text = match.group(0)
tokens.append((matched_text, rule.css_class))
position = match.end()
matched = True
break
if not matched:
# No rule matched, advance one character
tokens.append((code[position], 'plain'))
position += 1
return tokens
def _generate_html(self, tokens: List[Tuple[str, str]], theme: str) -> str:
"""Generate HTML with syntax highlighting"""
theme_styles = self.themes.get(theme, self.themes[self.default_theme])
html_parts = ['<pre><code class="highlighted">']
for text, css_class in tokens:
if css_class == 'plain':
html_parts.append(self._escape_html(text))
else:
style_dict = theme_styles.get(css_class, {})
style_str = '; '.join([f'{k}: {v}' for k, v in style_dict.items()])
html_parts.append(f'<span class="{css_class}" style="{style_str}">')
html_parts.append(self._escape_html(text))
html_parts.append('</span>')
html_parts.append('</code></pre>')
return ''.join(html_parts)
def _wrap_code(self, code: str, css_class: str = 'plain') -> str:
"""Wrap code without highlighting"""
return f'<pre><code class="{css_class}">{self._escape_html(code)}</code></pre>'
def _escape_html(self, text: str) -> str:
"""Escape HTML characters"""
replacements = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}
for char, escaped in replacements.items():
text = text.replace(char, escaped)
return text
def get_supported_languages(self) -> List[str]:
"""Get list of supported languages"""
return list(self.languages.keys())
def get_available_themes(self) -> List[str]:
"""Get list of available themes"""
return list(self.themes.keys())
Usage example
def demonstrate_custom_highlighter():
“"”Demonstrate custom syntax highlighter”””
highlighter = SyntaxHighlighter()
# JavaScript code example
js_code = ''' function calculateSum(numbers) {
// Calculate the sum of an array of numbers
let total = 0;
for (const num of numbers) {
total += num;
}
return total; }
const result = calculateSum([1, 2, 3, 4, 5]);
console.log(“Result:”, result);
‘’‘.strip()
# Highlight with different themes
print("=== GitHub Theme ===")
github_highlighted = highlighter.highlight_code(js_code, 'javascript', 'github')
print(github_highlighted)
print("\n=== Dark Theme ===")
dark_highlighted = highlighter.highlight_code(js_code, 'javascript', 'dark')
print(dark_highlighted)
# Python code example
py_code = ''' @property def calculate_average(self):
"""Calculate average score with error handling"""
if not self.scores:
return None
total = sum(self.scores)
average = total / len(self.scores)
return round(average, 2)
'''.strip()
print("\n=== Python Highlighting ===")
py_highlighted = highlighter.highlight_code(py_code, 'python')
print(py_highlighted)
if name == “main”:
demonstrate_custom_highlighter()
```
Conclusion
Advanced Markdown code block syntax highlighting and language specification represent essential tools for creating professional technical documentation that serves developers, educators, and technical teams with clear, readable code examples. By mastering language identifiers, highlighting techniques, and code presentation strategies, technical writers can build comprehensive documentation that maintains code clarity while supporting diverse programming languages and technical formats.
The key to successful code block implementation lies in understanding language-specific syntax patterns, implementing consistent highlighting standards, and integrating code display with broader documentation workflows that serve both human readers and automated processing systems. Whether you’re building API documentation, educational tutorials, or comprehensive technical guides, the highlighting techniques and language specifications covered in this guide provide the foundation for creating professional, accessible code presentation.
Remember to validate code examples for accuracy and executability, maintain consistent formatting across different programming languages, and implement responsive design patterns that preserve code readability across various devices and viewing contexts. With proper implementation of advanced syntax highlighting systems, your Markdown-based technical documentation can achieve the same level of professional code presentation found in modern development environments while maintaining the simplicity and version-control benefits that make Markdown an ideal choice for collaborative technical writing.