My favorite example article

Pragmatic Programmer is a book everyone should read at the start of their career. The earlier the better.

Don't be like me and wait until every lesson is a "Oh yeah, learned that the hard way" ... "Hah yes! That was a fun and painful lesson" ... "ooo good one! I remember a project just like that. Fuck that hurt"

Relative image embed

Images live right next to the article in img/ — Vite imports them so you get content-hashed URLs in production:

Remote image embed (still works)

File download link

Relative links to PDFs and other assets are also imported by Vite so the file ships correctly:

Download example notes (PDF)

quotes

this is a quote that looks like a quote

giphy integration

embeds

youtube

codesandbox

twitter

bluesky

code samples

this is just some code without a lang

The code highlighting works server-side without any client-side JavaScript or flash of unstyled content.

export const wrapPageElement = ({ element, props }) => (
    <Layout {...props}>{element}</Layout>
);

def sum_eq_n?(arr, n)
  return true if arr.empty? && n == 0
  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
end

Sometimes you need code that is inline which means you can have it as part of a paragraph. You even get inline highlighting for when you gotta const foo = () => 'boop' in your text, even with langs like def python(a, b):

Cheers,
~Swizec