typeyourcode.js

"use esnext";

const code = `extract : (a -> Bool) -> List a -> Maybe (a, List a)
extract _ [] = Nothing
extract p (x::xs) with (p x)
    | True  = Just (x, xs)
    | False = do
        (y, xs') <- extract p xs
        pure (y, x::xs')`;

function groupBy(a, f){
	let g = [], last = null, ans = []
	for(let x of a){
		let r = f(x)
		if(r == last){
			g.push(x)
		} else {
			if(g.length) ans.push({group:g, tag:last});
			g = [x];
		}
		last = r;
	}
	if(g.length) return ans.concat([{group:g, tag:last}]); else return ans;
}

function measureToken(token){
	return token.length
}
function escapeH(token){
	return token.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function typesetLine(row){
	return groupBy(row, c => c === ' ')
		.map(({group:cg}) => cg.join(''))
		.map(token => `<td colspan="${measureToken(token)}">${escapeH(token)}</td>`)
		.join('');
}
function typeset(code){
	return groupBy(code.split('\n'), line => line.match(/^[ \t]*/)[0])
		.map(({group:g, tag:i}) => `<table style="margin-left:${i.length/2}em">` + g.map(r => `<tr>${typesetLine(r.trim())}</tr>`)
		           .join('') + "</table>")
		.join('')
}

document.body.innerHTML = typeset(code);