wjlafrance · August 23, 2025 04:25
diff --git a/md2styledhtml.sh b/md2styledhtml.sh
 #!/usr/bin/env bash
 # md2styledhtml.sh
 # Convert Markdown file into HTML that *looks* like Markdown, but with interactive styling.

 if [ $# -lt 1 ]; then
  echo "Usage: $0 input.md"
  exit 1
 fi

 INPUT="$1"
 OUTPUT="${INPUT%.md}.html"

 HTML=$(pandoc "$INPUT" -t html)

 cat > "$OUTPUT" <<EOF
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>$INPUT</title>
  <style>
    body {
      background-color: #ededed;
      width: 100%;
      max-width: 60em;
      font-family: monospace;
    }
    .md-symbol {
      color: #555;
    }
    strong { font-weight: bold; }
    em { font-style: italic; }
    a {
      color: blue;
      text-decoration: underline;
    }
  </style>
 </head>
 <body>
 EOF

 echo "$HTML"  | sed -z -E '
  s|<strong>(.*?)</strong|<span class="md-symbol">**</span><strong>\1</strong><span class="md-symbol">**</span|g;
  s|<em>(.*?)</em|<span class="md-symbol">_</span><em>\1</em><span class="md-symbol">_</span|g;
  s|<a\s+href=\"([^\"]+)\">([^\<]+)</a>|<span class="md-symbol">[</span><a href="\1">\2</a><span class="md-symbol">]</span><span class="md-symbol">(</span>\1<span class="md-symbol">)</span>|g;
  s|<h1([^\>]*)?>([^\<]*?)</h1>|<h1\1><span class="md-symbol">#</span> \2</h1>|g;
  s|<h2([^\>]*)?>([^\<]*?)</h2>|<h2\1><span class="md-symbol">##</span> \2</h2>|g;
  s|<h3([^\>]*)?>([^\<]*?)</h3>|<h3\1><span class="md-symbol">###</span> \2</h3>|g;
  '>> "$OUTPUT"

 cat >> "$OUTPUT" <<EOF
 </body>
 </html>
 EOF

 echo "Wrote $OUTPUT"
	#!/usr/bin/env bash
	# md2styledhtml.sh
	# Convert Markdown file into HTML that looks like Markdown, but with interactive styling.

	if [ $# -lt 1 ]; then
	echo "Usage: $0 input.md"
	exit 1
	fi

	INPUT="$1"
	OUTPUT="${INPUT%.md}.html"

	HTML=$(pandoc "$INPUT" -t html)

	cat > "$OUTPUT" <<EOF
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>$INPUT</title>
	<style>
	body {
	background-color: #ededed;
	width: 100%;
	max-width: 60em;
	font-family: monospace;
	}
	.md-symbol {
	color: #555;
	}
	strong { font-weight: bold; }
	em { font-style: italic; }
	a {
	color: blue;
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	EOF

	echo "$HTML" \| sed -z -E '
	s\|<strong>(.?)</strong\|<span class="md-symbol"></span><strong>\1</strong><span class="md-symbol">*</span\|g;
	s\|<em>(.*?)</em\|<span class="md-symbol">_</span><em>\1</em><span class="md-symbol">_</span\|g;
	s\|<a\s+href=\"([^\"]+)\">([^\<]+)</a>\|<span class="md-symbol">[</span><a href="\1">\2</a><span class="md-symbol">]</span><span class="md-symbol">(</span>\1<span class="md-symbol">)</span>\|g;
	s\|<h1([^\>])?>([^\<]?)</h1>\|<h1\1><span class="md-symbol">#</span> \2</h1>\|g;
	s\|<h2([^\>])?>([^\<]?)</h2>\|<h2\1><span class="md-symbol">##</span> \2</h2>\|g;
	s\|<h3([^\>])?>([^\<]?)</h3>\|<h3\1><span class="md-symbol">###</span> \2</h3>\|g;
	'>> "$OUTPUT"

	cat >> "$OUTPUT" <<EOF
	</body>
	</html>
	EOF

	echo "Wrote $OUTPUT"