This post demonstrates the newly enabled rendering capabilities on the site: mathematical equations, syntax-highlighted code blocks, and Mermaid diagrams, all authored in standard Markdown.

1. Mathematical Equations (KaTeX)

LaTeX math expressions are rendered using KaTeX. Both inline and display equations are supported with standard $ and $$ delimiters.

Inline Equations

You can include inline math directly within sentences. For example:

  • Euler’s identity: $e^{i\pi} + 1 = 0$
  • Mass-energy equivalence: $E = mc^2$
  • The Nernst equation for an electrode potential: $E = E^\circ - \frac{RT}{zF} \ln Q$

Display Equations

For standalone equations, wrap the LaTeX expression in double dollar signs $$ ... $$:

The Cottrell equation describes the transient current response for a planar electrode during a potential step:

$$ i(t) = \frac{n F A D_O^{1/2} C_O^*}{\sqrt{\pi t}} $$

The Butler-Volmer equation for electrochemical kinetics:

$$ j = j_0 \left[ \exp\left( \frac{\alpha_a z F \eta}{R T} \right) - \exp\left( -\frac{\alpha_c z F \eta}{R T} \right) \right] $$

Multi-Line Equations

Multi-line aligned systems of equations using environments like \begin{aligned} ... \end{aligned}:

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

2. Syntax-Highlighted Code Blocks

Code blocks use Hugo’s built-in Chroma engine configured with the Dracula theme. Blocks include responsive horizontal scrolling and a hoverable Copy button.

Python Example

Here is a Python script modeling a Cottrell diffusion current:

import numpy as np
import matplotlib.pyplot as plt

def cottrell_current(t, n=1, F=96485, A=0.07, D=1e-5, C=1e-6):
    """
    Calculate Cottrell current for planar diffusion.
    
    Parameters:
        t: Time array in seconds
        n: Number of electrons transferred
        F: Faraday constant (C/mol)
        A: Electrode area (cm^2)
        D: Diffusion coefficient (cm^2/s)
        C: Bulk concentration (mol/cm^3)
    """
    return (n * F * A * np.sqrt(D) * C) / np.sqrt(np.pi * t)

# Time domain from 0.01 to 5 seconds
time = np.linspace(0.01, 5.0, 500)
current = cottrell_current(time)

print(f"Current at t = 1.0s: {cottrell_current(1.0) * 1e6:.2f} µA")

Inline Code

Inline code snippets like numpy.linspace(), const a = 10;, or pip install softpotato are styled with a distinct background and purple accent matching the theme.

3. Mermaid Diagrams

Mermaid diagrams are written directly inside standard markdown code fences with the mermaid language identifier.

Flowchart Example: Simulation Workflow

flowchart TD
    A([Start Experiment]) --> B[Define Parameters: D, C, E0, scan_rate]
    B --> C{Select Simulation Model}
    C -->|Planar Diffusion| D[1D Finite Difference Grid]
    C -->|Convection| E[Hydrodynamic / RDE Model]
    D --> F[Run Time-Stepping Solver]
    E --> F
    F --> G[Extract Voltammogram / Current Trace]
    G --> H([Plot & Export Results])

Sequence Diagram Example: Electrochemical Process

sequenceDiagram
    autonumber
    participant Bulk as Bulk Solution
    participant Diff as Diffusion Layer
    participant Surf as Electrode Surface
    participant Pot as Potentiostat

    Pot->>Surf: Apply Potential Step (E)
    Bulk->>Diff: Mass Transport (Diffusion)
    Diff->>Surf: Reactant Species Arrive
    Surf->>Surf: Electron Transfer Reaction (O + e⁻ ⇄ R)
    Surf-->>Pot: Current Measurement (i)
    Surf->>Diff: Product Diffuses Away

Summary

With these capabilities:

  • Math: Written cleanly using standard LaTeX notation.
  • Code: Accurately highlighted with language tags and instant copy-to-clipboard.
  • Diagrams: Rendered directly from text without needing external image exports.