Better-delimited styling of code fragments in article text

Non-fenced code fragments (using backticks in Markdown) will now be
formatted with a background color, padding, and a border.  I was
avoiding this for some time, but most of my writing also didn't have a
whole lot of code in it.  That's changing with the article I'm writing
now, and it really is much more clear with this styling; it can
otherwise be more difficult than necessary to tell where a command
starts and ends, and the monospace font can sometimes be too sublte of
an indicator for shorter text, or text that uses characters that are
harder to distinguish.

src/h12title

@@ -36,9 +36,15 @@ main()
       | grep '<h1' \
       | head -n1 \
       | grep -oP '(?<=>)[^<]+' \
-  )
+  ) || {
+    echo 'error: h12title: failed to locate heading' >&2
+    exit 1
+  }
 
-  sed "s#$placeholder#${title/&/\\&}#" <<< "$body"
+  sed "s#$placeholder#${title/&/\\&}#" <<< "$body" || {
+    printf "error: h12title: failed title replacement: '%s'\n" "$title" >&2
+    exit 1
+  }
 }
 
 main "$@"

src/pandoc.tpl

@@ -22,6 +22,11 @@ $if(tags)$
 $endif$
 </article>
 
+<style>
+  /* pandoc-generated */
+  $highlighting-css$
+</style>
+
 $for(include-after)$
 
 $include-after$

src/post2html

@@ -86,26 +86,67 @@ hgroup-wrap()
 # Pre-format Markdown files before they get to Pandoc
 #
 # These may be able to be implemented as Pandoc filters, but I haven't had
-# the time to research that yet.  This is actually a fitting real-world
-# demonstration of incremental development / MVP that I'm writing about at
-# the time that this comment was written (MyCustomBB Part I)!
+# the time to research that yet.
+#
+# I had originally switched to Markdown hoping that it would suit my needs
+# better than an ad-hoc formatting language of my own design.  And yet here
+# I am again, adding to the language.
 prefmt()
 {
+  # Accepting a filename instead of stdin allows us to output errors
+  # including the name of the file.
+  local -r file="$1"
+
   awk '
-    triml {
-      gsub( /^ +/, "" )
+    BEGIN {
+      infence = 0
+      gather = 0
+      nltrim = 0
       triml = 0
+      indent = 0
+      ex = 0
+    }
+
+    # indentation is the first non-space character
+    { indent = match($0, /[^ ]/) - 1 }
+
+    # HTML nesting
+    /^ *<\/details>/ {
+      triml = indent
+    }
+
+    triml && indent >= 0 {
+      if (indent < triml) {
+        printf "error: post2html: %s:%d: expected %d-char indent, found %d\n", \
+          FILENAME, NR, triml, indent \
+          > "/dev/stderr"
+        ex = 1
+      } else {
+        # must have `triml` leading spaces
+        $0 = substr($0, triml + 1)
+      }
+    }
+
+    # must appear _after_ triml above so we just discard what is left,
+    # or we mess up the indentation calculation
+    nltrim && indent {
+      gsub( /^ +/, "" )
+      nltrim = 0
+    }
+
+    /^ *<details\>/ {
+      triml = indent + 2
     }
 
     # ties
-    { $0 = gensub( /([^\\])~/, "\\1 ", "g" ) }
-    { $0 = gensub( /\\~/, "~", "g" ) }
+    !infence { $0 = gensub( /([^\\])~/, "\\1 ", "g" ) }
+    !infence { $0 = gensub( /\\~/, "~", "g" ) }
 
     # TeX-style newline removal
-    /%$/ {
+    !infence && /%$/ {
       gsub( /%$/, "" )
       printf "%s", $0
-      triml = 1
+      nltrim = 1
       next
     }
 
@@ -113,13 +154,16 @@ prefmt()
     # code block is HTML and we want to render it as an example)
     /^```/ {
       gather = !gather
+      infence = gather
       if ( gather ) gblock = ""
     }
     !/^```/ && gather { gblock = gblock $0 "\n" }
     !gather && /^ *@LASTFENCE@$/ { print gblock; next }
 
     { print }
-  '
+
+    END { exit(ex) }
+  ' "$file"
 }
 
 
@@ -134,10 +178,12 @@ main()
   pandoc -f"$( pexts )" -thtml5 \
          --standalone --template src/pandoc.tpl \
          --metadata pagetitle:ignoreme \
-         --base-header-level=1 \
+         --wrap none \
+         --highlight-style tango \
+         --mathml \
          -B <( src/mkheader post @__PAGE_TITLE__@ ) \
          -A src/footer.tpl.htm \
-         < <( prefmt < "$file" ) \
+         < <( prefmt "$file" ) \
     | src/h12title @__PAGE_TITLE__@ \
     | hgroup-wrap "$date" "$file"
 }

style.css

@@ -417,10 +417,23 @@ article figure > figcaption:last-child {
   margin-top: 1em;
 }
 
+article details {
+  /* 3px border + 2px spacing for nested details */
+  border-left: 5px solid;
+  border-image: linear-gradient(to right, #eeeeee 3px, transparent 2px) 5;
+
+  padding: 0em 1em;
+  margin: 1em 0em 1em -1em;
+}
+
 article details > summary {
   cursor: pointer;
 }
 
+article details[open] > summary {
+  border-bottom: 1px dashed;
+}
+
 
 @media ( max-width: 60ch ) {
   article {
@@ -499,6 +512,14 @@ article img {
   margin: 0 auto;
 }
 
+/* Non-fenced code (e.g. backticks) */
+article code:not(.sourceCode) {
+  background-color: #f8f8f8; /* matches pandoc */
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25em;
+  padding: 0.15ex 0.15em;
+}
+
 
 /* Two columns on larger displays */
 @media ( min-width: 90ch ) {
@@ -786,39 +807,6 @@ footer .site-nav > nav > ul > li a {
   }
 }
 
-/*** https://github.com/jgm/highlighting-kate/blob/master/css/hk-tango.css ***/
-/* GNU GPLv2 */
-/* Loosely based on pygment's tango colors */
-/* Modified where indicated by Mike Gerwitz */
-table.sourceCode, tr.sourceCode, td.sourceCode, table.sourceCode pre
-{ margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; background-color: #f8f8f8 }
-td.nums { text-align: right; padding-right: 5px; padding-left: 5px; background-color: #f0f0f0; }
-td.sourceCode { padding-left: 5px; }
-code.sourceCode { background-color: #f8f8f8; }
-pre.sourceCode {
-  /* modified by Mike Gerwitz */
-  padding: 1em;
-  margin: 0 -1em;
-
-  background-color: #f8f8f8;
-  line-height: 125%
-}
-td.nums pre { background-color: #f0f0f0; line-height: 125% }
-code.sourceCode span.kw { color: #204a87; font-weight: bold } /* Keyword */
-code.sourceCode span.dt { color: #204a87 } /* Keyword.Type */
-code.sourceCode span.dv { color: #0000cf } /* Literal.Number.Integer */
-code.sourceCode span.bn { color: #0000cf } /* Literal.Number.Hex */
-code.sourceCode span.fl { color: #0000cf } /* Literal.Number.Float */
-code.sourceCode span.ch { color: #4e9a06 } /* Literal.String.Char */
-code.sourceCode span.st { color: #4e9a06 } /* Literal.String */
-code.sourceCode span.co { color: #8f5902; font-style: italic } /* Comment */
-code.sourceCode span.ot { color: #8f5902 } /* Comment.Preproc */
-code.sourceCode span.al { color: #ef2929 } /* Generic.Error */
-code.sourceCode span.fu { color: #000000 } /* Name.Function */
-code.sourceCode span.re { }
-code.sourceCode span.er { color: #a40000; border: 1px solid #ef2929 } /* Error */
-
-
 /* Finally, the perpetual pain in my ass as a web developer: IE.  IE11 is
  * the only version I attempt here, enough to make it presentable and warn
  * the user. */