Link to this headingStatic Site Generator Test File

This file contains various code fence examples to test your static site generator’s capability to handle different syntaxes.

Link to this headingTable of Contents

  1. Strudel
  2. Shaders
  3. ASCII Tables
  4. SMILES
  5. PlantUML
  6. Vega
  7. LaTeX
  8. Mermaid
  9. Regular Markdown Elements

Link to this headingStrudel

Strudel is used for live coding in the browser:

Link to this headingShaders

GLSL shader example:

// Fragment shader precision mediump float; uniform float time; uniform vec2 resolution; void main() { vec2 uv = gl_FragCoord.xy / resolution.xy; vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0, 2, 4)); gl_FragColor = vec4(col, 1.0); }
// Vertex shader attribute vec4 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position = projectionMatrix * modelViewMatrix * position; }

Link to this headingASCII Tables

Example ASCII tables:

Column 1Column 2Column 3
Row 1, C1Row 1, C2Row 1, C3
Row 2, C1Row 2, C2Row 2, C3
MultilineRow 3, C2Row 3, C3

Another style:

Column 1Column 2Column 3
Row 1, C1Row 1, C2Row 1, C3
Row 2, C1Row 2, C2Row 2, C3
Row 3, C1Row 3, C2Row 3, C3

Link to this headingSMILES

Chemical structure examples using SMILES notation:

Link to this headingPlantUML

Class diagram example:

@startuml class Animal { +name: String +age: int +makeSound(): void } class Dog { +breed: String +wagTail(): void } class Cat { +furColor: String +purr(): void } Animal <|-- Dog Animal <|-- Cat @enduml

Sequence diagram example:

@startuml actor User participant "Web Page" as Web participant "Backend API" as API database "Database" as DB User -> Web: Fill form Web -> API: Submit data API -> DB: Store data DB --> API: Confirm storage API --> Web: Return success Web --> User: Show confirmation @enduml

Link to this headingVega

A simple bar chart using Vega:

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "A simple bar chart", "data": { "values": [ {"category": "A", "value": 28}, {"category": "B", "value": 55}, {"category": "C", "value": 43}, {"category": "D", "value": 91}, {"category": "E", "value": 81}, {"category": "F", "value": 53} ] }, "mark": "bar", "encoding": { "x": {"field": "category", "type": "nominal"}, "y": {"field": "value", "type": "quantitative"} } }

A line chart example:

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "Stock price over time", "data": { "values": [ {"date": "Jan 1", "price": 205}, {"date": "Jan 15", "price": 215}, {"date": "Feb 1", "price": 185}, {"date": "Feb 15", "price": 240}, {"date": "Mar 1", "price": 255}, {"date": "Mar 15", "price": 230} ] }, "mark": "line", "encoding": { "x": {"field": "date", "type": "nominal"}, "y": {"field": "price", "type": "quantitative"} } }

Link to this headingLaTeX

LaTeX equation examples:

Inline equation: $E = mc^2$

Block equation:

$$ \frac{d}{dx}\left( \int_{a}^{x} f(t) , dt \right) = f(x) $$

Complex equation:

$$ \begin{align} \nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align} $$

Matrix example:

$$ \begin{pmatrix} a & b & c \ d & e & f \ g & h & i \end{pmatrix} $$

Link to this headingMermaid

Flowchart example:

flowchart TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D --> B

Gantt chart example:

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2023-01-01, 30d Another task :after a1, 20d section Another Task in sec :2023-01-12, 12d another task :24d

Entity Relationship diagram:

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Link to this headingText Formatting

Regular text with bold, italic, and strikethrough.

Combined bold and italic formatting.

Link to this headingLists

Ordered list:

  1. First item
  2. Second item
  3. Third item
  4. Indented item
  5. Another indented item
    1. Lets keep going
    2. Lets keep going again

Unordered list:

  • Item
  • Another item
  • Yet another item
    • Nested item
      • Even More Nested
        • And one more for good measure
    • Another nested item
      • Even More Nested
        • And one more for good measure

Link to Google

Alt text for image

Link to this headingBlockquotes

This is a blockquote

It can span multiple lines

Link to this headingHorizontal Rule

Link to this headingCode

Inline code formatting.

// Code block with syntax highlighting function greet(name) { console.log(`Hello, ${name}!`); } greet('World');

Link to this headingTables2

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Link to this headingTask Lists

  • Completed task
  • Incomplete task
  • Another incomplete task

Link to this headingFootnotes

Here’s a sentence with a footnote.1

Link to this headingDefinition Lists

Term 1
Definition 1
Term 2
Definition 2a
Definition 2b

Link to this headingEmoji

😄 ❤️ 👍 🚀

Link to this headingComments

This concludes the test file with all the requested syntax elements.

Link to this headingNotes

  1. This is the footnote content. ↩