add hack-a-round for language specified markdown code blocks

When language is specified in a markdown code block such as:

````
```c
    printf("Hello, world!\n");
```
````

is used, the resulting HTML as produced by `pandoc(1)` combined
with our revised `ioccc.css` is not intent the code block well.

A temporary "_hack-a-round_" is to turn the "markdown code language
specifier" into an HTML comment.  For example:

````
```<!---c-->
    printf("Hello, world!\n");
```
````

This commits turns off existing markdown code language specifiers
for now, while preserving our ability to restore them in the future
when a better  "_hack-a-round_" to the "markdown code language
specifier" problem is found.

The HTML impact if this "_hack-a-round_" is to produce HTML that
looks like this:

```
<pre class="&lt;!---c--&gt;"><code> .. </code></pre>
```

We might be able to create a complex set of classes for each markdown
code language (there won't be very many) in `ioccc.css`, or we might
find a more general CSS (or maybe `pandoc(1)`?) solution.

For now, this hack-a-round will have to do.

2020/ferguson1/HACKING.html

@@ -192,19 +192,19 @@ defaults if you don’t want to change the colour.</p>
 initialise a pair (make it 5 so as to not interfere with the script
 customisability) and then you use the bkgd() function with the colour pair.
 Something like this:</p>
-<div class="sourceCode" id="cb1"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>    init_pair<span class="op">(</span><span class="dv">5</span><span class="op">,</span> COLOR_BLACK<span class="op">,</span> COLOR_WHITE<span class="op">);</span></span>
-<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>    bkgd<span class="op">(</span>COLOR_PAIR<span class="op">(</span><span class="dv">5</span><span class="op">));</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    init_pair(5, COLOR_BLACK, COLOR_WHITE);
+    bkgd(COLOR_PAIR(5));</code></pre>
 <p>I played with this after winning and I came across some problems with colours
 but that changes the background of the program anyway.</p>
 <p>The standard colour identifiers are:</p>
-<div class="sourceCode" id="cb2"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>    COLOR_BLACK</span>
-<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>    COLOR_RED</span>
-<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>    COLOR_GREEN</span>
-<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>    COLOR_YELLOW</span>
-<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>    COLOR_BLUE</span>
-<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>    COLOR_MAGENTA</span>
-<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>    COLOR_CYAN</span>
-<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>    COLOR_WHITE</span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    COLOR_BLACK
+    COLOR_RED
+    COLOR_GREEN
+    COLOR_YELLOW
+    COLOR_BLUE
+    COLOR_MAGENTA
+    COLOR_CYAN
+    COLOR_WHITE</code></pre>
 <p>See Linux Journal for more information article
 <a href="https://www.linuxjournal.com/content/programming-color-ncurses" class="uri">https://www.linuxjournal.com/content/programming-color-ncurses</a> for more
 details.</p>
@@ -220,16 +220,16 @@ source code (<strong>include the single quotes!</strong>) respectively:</p>
 <p>Let’s say you don’t want to use arrow keys or you don’t have arrow keys. Instead
 you might want the keys <code>l</code>, <code>r</code>, <code>u</code> and <code>d</code> for the directions. Find the case
 statements:</p>
-<div class="sourceCode" id="cb4"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>    <span class="cf">case</span> KEY_LEFT<span class="op">:</span></span>
-<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>    <span class="cf">case</span> KEY_RIGHT<span class="op">:</span></span>
-<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">case</span> KEY_UP<span class="op">:</span></span>
-<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>    <span class="cf">case</span> KEY_DOWN<span class="op">:</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    case KEY_LEFT:
+    case KEY_RIGHT:
+    case KEY_UP:
+    case KEY_DOWN:</code></pre>
 <p>Replace <code>KEY_LEFT</code> with:</p>
-<div class="sourceCode" id="cb5"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>    <span class="ch">&#39;l&#39;</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    &#39;l&#39;</code></pre>
 <p>and do the same thing for the other directions too. If you want more than one
 key e.g. the arrow keys and the letters just add another case statement e.g. for
 left it might be:</p>
-<div class="sourceCode" id="cb6"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>    <span class="cf">case</span> KEY_LEFT<span class="op">:</span> <span class="cf">case</span> <span class="ch">&#39;l&#39;</span><span class="op">:</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    case KEY_LEFT: case &#39;l&#39;:</code></pre>
 <p>Yes the single quotes matter. You can do similar for the other input keys.
 Please note that modifier keys like ctrl aren’t detectable or at least I’m
 unaware of how to do so.</p>
@@ -245,9 +245,9 @@ end of the game; I leave that as an exercise to the reader to implement two
 different sets. Please also be aware that if you don’t want any information you
 must set it to the below at the very least; defining it without a value is not
 enough (it amounts to the parameters to a printf call):</p>
-<div class="sourceCode" id="cb7"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>    <span class="pp">#define J </span><span class="st">&quot; &quot;</span><span class="pp"> </span><span class="op">);</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    #define J &quot; &quot; );</code></pre>
 <p>If you don’t care about brief displays of ‘o’ at 0,0 you can just have:</p>
-<div class="sourceCode" id="cb8"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>    <span class="pp">#define J </span><span class="st">&quot;&quot;</span><span class="op">);</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    #define J &quot;&quot;);</code></pre>
 <p>That’s the bare minimum. Notice also that it’s been a long while since I’ve
 tested this part but I think this is right.</p>
 <p>Anyway as I said the score line has basic statistics that’s relatively easy to
@@ -262,7 +262,7 @@ bug. This however was something I didn’t quite like: I like having the
 coordinates of where the snake is plus the other things that are there (a number
 of which were added over time). Obviously this would take many bug sized bytes
 (bites) even once let alone twice! Thus I made it into a define:</p>
-<div class="sourceCode" id="cb9"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>    <span class="pp">#define J Z</span><span class="op">(</span><span class="pp">X</span><span class="op">:%</span><span class="pp">d</span><span class="op">/%</span><span class="pp">d Y</span><span class="op">:%</span><span class="pp">d</span><span class="op">/%</span><span class="pp">d S</span><span class="op">:%</span><span class="pp">zu</span><span class="op">/%</span><span class="pp">zu B</span><span class="op">:%</span><span class="pp">zu\n</span><span class="op">),</span><span class="pp"> Y</span><span class="op">,</span><span class="pp"> y</span><span class="op">[-</span><span class="dv">2</span><span class="op">],</span><span class="pp"> X</span><span class="op">,*</span><span class="pp">y</span><span class="op">,</span><span class="pp">A</span><span class="op">,</span><span class="pp">g</span><span class="op">,</span><span class="pp"> c</span><span class="op">);</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    #define J Z(X:%d/%d Y:%d/%d S:%zu/%zu B:%zu\n), Y, y[-2], X,*y,A,g, c);</code></pre>
 <p>With the table below you can show a variety of other variables/statistics.</p>
 <p>There’s another reason for changing this line though: depending on the terminal
 width the line could cover the top wall; this can even happen only part of the
@@ -280,7 +280,7 @@ so if this line wasn’t there it would require changes to make it work right.</
 <p>For an example this would only include the size of the snake and the number of
 bugs eaten (I think I have this correct; I’ve made many changes to the point of
 not wanting to mess with anything that’s unnecessary):</p>
-<div class="sourceCode" id="cb10"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a>    <span class="pp">#define J Z</span><span class="op">(</span><span class="pp">SIZE</span><span class="op">:</span><span class="pp"> </span><span class="op">%</span><span class="pp">zu BUGS</span><span class="op">:</span><span class="pp"> </span><span class="op">%</span><span class="pp">zu\n</span><span class="op">),</span><span class="pp"> A</span><span class="op">,</span><span class="pp"> c</span><span class="op">);</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    #define J Z(SIZE: %zu BUGS: %zu\n), A, c);</code></pre>
 <p>More generally the following expressions and data types (with format specifiers)
 come to mind as information that might be of interest.</p>
 <pre><code>    DESCRIPTION             EXPRESSION          TYPE    FORMAT SPECIFIER
@@ -307,10 +307,10 @@ come to mind as information that might be of interest.</p>
     bug)</code></pre>
 <h2 id="make-it-so-the-snake-starts-at-a-random-location">Make it so the snake starts at a random location</h2>
 <p>Quite simply change:</p>
-<div class="sourceCode" id="cb12"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a>    X <span class="op">=</span> H <span class="op">/</span> <span class="dv">2</span><span class="op">;</span> Y <span class="op">=</span> <span class="op">*</span>x <span class="op">/</span> <span class="dv">2</span><span class="op">;</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    X = H / 2; Y = *x / 2;</code></pre>
 <p>To be something like:</p>
-<div class="sourceCode" id="cb13"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a>    X <span class="op">=</span> R<span class="op">(</span><span class="dv">1</span><span class="op">,</span>H<span class="op">-</span><span class="dv">1</span><span class="op">);</span></span>
-<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>    Y <span class="op">=</span> R<span class="op">(</span><span class="dv">2</span><span class="op">,*</span>x<span class="op">-</span><span class="dv">1</span><span class="op">);</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    X = R(1,H-1);
+    Y = R(2,*x-1);</code></pre>
 <p>Or whatever you might want it to be… (question to answer: will this work at
 all? You decide!)</p>
 <h1 id="additions">Additions (+)</h1>
@@ -407,22 +407,22 @@ their ruddy phone instead of where they’re walking (even when crossing a busy
 street!).</p>
 <p>If you look at the walls code you will see a ternary operator for both <code>X</code> and <code>Y</code>
 coordinates. This of course is very different now but the idea remains the same:</p>
-<div class="sourceCode" id="cb14"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a>    <span class="cf">if</span> <span class="op">(</span>p <span class="op">&amp;&amp;</span> <span class="op">!(*</span>O<span class="op">&gt;=</span>O<span class="op">[</span><span class="dv">1</span><span class="op">]||</span>H<span class="op">&gt;=</span>M<span class="op">(</span><span class="dv">1</span><span class="op">)))</span></span>
-<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a>    <span class="op">{</span></span>
-<span id="cb14-3"><a href="#cb14-3" aria-hidden="true" tabindex="-1"></a>        <span class="cf">if</span> <span class="op">(</span>X<span class="op">&lt;</span><span class="dv">1</span><span class="op">||</span>X<span class="op">&gt;=</span>H<span class="op">)</span></span>
-<span id="cb14-4"><a href="#cb14-4" aria-hidden="true" tabindex="-1"></a>            X <span class="op">=</span> X<span class="op">&lt;</span><span class="dv">1</span><span class="op">?</span>H<span class="op">-</span><span class="dv">1</span><span class="op">:</span><span class="dv">1</span><span class="op">;</span></span>
-<span id="cb14-5"><a href="#cb14-5" aria-hidden="true" tabindex="-1"></a>        <span class="cf">if</span> <span class="op">(</span>Y<span class="op">&lt;</span><span class="dv">2</span><span class="op">||</span>Y<span class="op">&gt;=*</span>O<span class="op">)</span></span>
-<span id="cb14-6"><a href="#cb14-6" aria-hidden="true" tabindex="-1"></a>            Y <span class="op">=</span> Y<span class="op">&lt;</span><span class="dv">2</span><span class="op">?*</span>O<span class="op">-</span><span class="dv">1</span><span class="op">:</span><span class="dv">2</span><span class="op">;</span></span>
-<span id="cb14-7"><a href="#cb14-7" aria-hidden="true" tabindex="-1"></a>    <span class="op">}</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    if (p &amp;&amp; !(*O&gt;=O[1]||H&gt;=M(1)))
+    {
+        if (X&lt;1||X&gt;=H)
+            X = X&lt;1?H-1:1;
+        if (Y&lt;2||Y&gt;=*O)
+            Y = Y&lt;2?*O-1:2;
+    }</code></pre>
 <p>You can ignore the first if if you like; I’m not going to explain that part. The
 inner if statements however are testing if the new snake coordinates are beyond
 the walls (off screen). Depending on where the snake is it will set the
 coordinates to the correct new location.</p>
 <p>If however you wanted the walls to act as a barrier you could do something like
 this instead (omitting the inner if statements here):</p>
-<div class="sourceCode" id="cb15"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a>    X<span class="op">=</span>X<span class="op">&lt;</span><span class="dv">1</span><span class="op">?</span><span class="dv">1</span><span class="op">:*</span>H<span class="op">-</span><span class="dv">1</span><span class="op">;</span></span>
-<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a>    Y<span class="op">=</span>Y<span class="op">&lt;</span><span class="dv">2</span><span class="op">?</span><span class="dv">2</span><span class="op">:*</span>O<span class="op">-</span><span class="dv">1</span><span class="op">;</span></span></code></pre></div>
+<pre class="&lt;!---c--&gt;"><code>    X=X&lt;1?1:*H-1;
+
+    Y=Y&lt;2?2:*O-1;</code></pre>
 <p>Again though that’s just the idea; the code is dramatically different. The above
 incidentally is not even complete.</p>
 <p>You could also have it so depending on the WALLS value have it go through