Markdown & Code Showcase

This post has no real content. It exists to poke every part of the Markdown pipeline at once — headings from ## down to #####, fenced code in a handful of different languages (so rouge has to pick a different lexer each time), inline code like this, and a table at the very end.

Gif

Image

FizzBuzz, six ways

The classic. Same tiny program, six languages, mostly so the code blocks below actually look different from each other instead of being six near-identical snippets.

Bash

bash

#!/usr/bin/env bash
for i in $(seq 1 20); do
  if (( i % 15 == 0 )); then
    echo "FizzBuzz"
  elif (( i % 3 == 0 )); then
    echo "Fizz"
  elif (( i % 5 == 0 )); then
    echo "Buzz"
  else
    echo "$i"
  fi
done

Ruby

ruby

(1..20).each do |i|
  output = ""
  output << "Fizz" if i % 3 == 0
  output << "Buzz" if i % 5 == 0
  puts output.empty? ? i : output
end

Python

python

for i in range(1, 21):
    output = ""
    if i % 3 == 0:
        output += "Fizz"
    if i % 5 == 0:
        output += "Buzz"
    print(output or i)

JavaScript

javascript

for (let i = 1; i <= 20; i++) {
  let output = "";
  if (i % 3 === 0) output += "Fizz";
  if (i % 5 === 0) output += "Buzz";
  console.log(output || i);
}

Rust

rust

fn main() {
    for i in 1..=20 {
        let mut output = String::new();
        if i % 3 == 0 { output.push_str("Fizz"); }
        if i % 5 == 0 { output.push_str("Buzz"); }
        println!("{}", if output.is_empty() { i.to_string() } else { output });
    }
}

Go

package main

import "fmt"

func main() {
    for i := 1; i <= 20; i++ {
        output := ""
        if i%3 == 0 {
            output += "Fizz"
        }
        if i%5 == 0 {
            output += "Buzz"
        }
        if output == "" {
            fmt.Println(i)
        } else {
            fmt.Println(output)
        }
    }
}

Heading depth check

This section exists purely to check that ###, ####, and ##### all render at visibly different sizes and all show up correctly indented in the table of contents.

A level-3 heading

Some ordinary paragraph text under a level-3 heading, containing an inline code reference to Post#display_rendered_content just to mix prose and code in the same sentence.

A level-4 heading

Slightly deeper. Still readable, still supposed to indent further than the ### above it in the right-column TOC.

A level-5 heading

The deepest level this renderer's TOC tracks at all (MarkdownRenderer::TOC_LEVELS = (2..5)) — anything nested past this, if it existed, wouldn't show up in the sidebar.

A closer look: querying and config

Rounding out the language variety with a few formats that aren't really "programming languages" in the FizzBuzz sense, but still get their own rouge lexer.

SQL: a recursive CTE

sql

WITH RECURSIVE post_tree AS (
  SELECT id, title, parent_id, 0 AS depth
  FROM posts
  WHERE parent_id IS NULL

  UNION ALL

  SELECT p.id, p.title, p.parent_id, pt.depth + 1
  FROM posts p
  JOIN post_tree pt ON p.parent_id = pt.id
)
SELECT * FROM post_tree ORDER BY depth, title;

YAML: a docker-compose-style snippet

yaml

services:
  web:
    build: .
    environment:
      RAILS_ENV: production
      DOMAIN: xyzleo.com
    depends_on:
      db:
        condition: service_healthy
  db:
    image: postgres@sha256:742f40ea20b9ff2ff31db5458d127452988a2164df9e17441e191f3b72252193

JSON: an API response

json

{
  "post": {
    "title": "Markdown & Code Showcase",
    "slug": "markdown-code-showcase",
    "tags": ["showcase", "markdown", "test"],
    "published": false
  }
}

HTML/CSS: a tiny component

html

<article class="post-card-full">
  <a href="/post/markdown-code-showcase">Markdown & Code Showcase</a>
  <span class="draft-badge">Draft</span>
</article>

css

.post-card-full .draft-badge {
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
}

Wrapping up: a table

Last thing, as requested — a plain GitHub-flavored Markdown table, which only renders because MarkdownRenderer::EXTENSIONS has tables: true turned on.