Add code tags

2 files changed, 229 insertions, 102 deletions

diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html
index 3b975a0..c02f174 100644
--- a/tutorials/www/how-to-make-this-site.html
+++ b/tutorials/www/how-to-make-this-site.html
@@ -21,6 +21,70 @@
       vertical-align: middle;
     }
     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+    /* CSS for syntax highlighting */
+    pre > code.sourceCode { white-space: pre; position: relative; }
+    pre > code.sourceCode > span { line-height: 1.25; }
+    pre > code.sourceCode > span:empty { height: 1.2em; }
+    .sourceCode { overflow: visible; }
+    code.sourceCode > span { color: inherit; text-decoration: inherit; }
+    div.sourceCode { margin: 1em 0; }
+    pre.sourceCode { margin: 0; }
+    @media screen {
+    div.sourceCode { overflow: auto; }
+    }
+    @media print {
+    pre > code.sourceCode { white-space: pre-wrap; }
+    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+    }
+    pre.numberSource code
+      { counter-reset: source-line 0; }
+    pre.numberSource code > span
+      { position: relative; left: -4em; counter-increment: source-line; }
+    pre.numberSource code > span > a:first-child::before
+      { content: counter(source-line);
+        position: relative; left: -1em; text-align: right; vertical-align: baseline;
+        border: none; display: inline-block;
+        -webkit-touch-callout: none; -webkit-user-select: none;
+        -khtml-user-select: none; -moz-user-select: none;
+        -ms-user-select: none; user-select: none;
+        padding: 0 4px; width: 4em;
+        color: #aaaaaa;
+      }
+    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+    div.sourceCode
+      {   }
+    @media screen {
+    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+    }
+    code span.al { color: #ff0000; font-weight: bold; } /* Alert */
+    code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+    code span.at { color: #7d9029; } /* Attribute */
+    code span.bn { color: #40a070; } /* BaseN */
+    code span.bu { color: #008000; } /* BuiltIn */
+    code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
+    code span.ch { color: #4070a0; } /* Char */
+    code span.cn { color: #880000; } /* Constant */
+    code span.co { color: #60a0b0; font-style: italic; } /* Comment */
+    code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
+    code span.do { color: #ba2121; font-style: italic; } /* Documentation */
+    code span.dt { color: #902000; } /* DataType */
+    code span.dv { color: #40a070; } /* DecVal */
+    code span.er { color: #ff0000; font-weight: bold; } /* Error */
+    code span.ex { } /* Extension */
+    code span.fl { color: #40a070; } /* Float */
+    code span.fu { color: #06287e; } /* Function */
+    code span.im { color: #008000; font-weight: bold; } /* Import */
+    code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+    code span.kw { color: #007020; font-weight: bold; } /* Keyword */
+    code span.op { color: #666666; } /* Operator */
+    code span.ot { color: #007020; } /* Other */
+    code span.pp { color: #bc7a00; } /* Preprocessor */
+    code span.sc { color: #4070a0; } /* SpecialChar */
+    code span.ss { color: #bb6688; } /* SpecialString */
+    code span.st { color: #4070a0; } /* String */
+    code span.va { color: #19177c; } /* Variable */
+    code span.vs { color: #4070a0; } /* VerbatimString */
+    code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
   </style>
 <link href="../../static/main.css" rel="stylesheet"/>
 </head>
@@ -145,7 +209,7 @@ come back here.</p>
 <p>There are many web servers out there, but I like nginx since the
 configuration file is a bit easier to read than others. So let's install
 it.</p>
-<pre><code>$ sudo apt install nginx</code></pre>
+<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="ex">$</span> sudo apt install nginx</span></code></pre></div>
 <p>On Ubuntu or Debian, nginx puts the default server configuration in
 the folder "/etc/nginx/sites-enabled/default". Open that in a text
 editor like vim or nano, and you should see something like this
@@ -174,7 +238,7 @@ included as part of the web server when viewed in a web browser.</p>
 you can access your C drive at "/mnt/c". So let's say you had a folder
 of cat pics in "C:\Users\username\Desktop\cats"; you can copy this into
 your website by running:</p>
-<pre><code>$ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html</code></pre>
+<div class="sourceCode" id="cb4"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="ex">$</span> cp <span class="at">-vr</span> /mnt/c/Users/username/Desktop/cats /var/www/html</span></code></pre></div>
 <p>Run the server, then go to your web browser and type:
 "http://localhost". You'll find a directory with your files in it! And
 you can access them at "http://localhost/foldername/filename.extension".
@@ -203,20 +267,20 @@ routers will have some kind of steps similar to this:</p>
 "ip a" (Linux). Typically it is listed first and will start with
 "192.168" or "10.0" but it depends on the manufacturer. Here's my output
 at home for example:</p>
-<pre><code>1: lo: &lt;LOOPBACK,UP,LOWER_UP&gt; mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
-    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
-    inet 127.0.0.1/8 scope host lo
-       valid_lft forever preferred_lft forever
-    inet6 ::1/128 scope host
-       valid_lft forever preferred_lft forever
-2: enp7s0: &lt;BROADCAST,MULTICAST,UP,LOWER_UP&gt; mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
-    link/ether 4c:cc:6a:93:eb:0b brd ff:ff:ff:ff:ff:ff
-    inet 192.168.1.202/24 brd 192.168.1.255 scope global dynamic noprefixroute enp7s0
-       valid_lft 74501sec preferred_lft 74501sec
-    inet6 fe80::4ecc:6aff:fe93:eb0b/64 scope link noprefixroute
-       valid_lft forever preferred_lft forever
-3: wlp5s0: &lt;BROADCAST,MULTICAST&gt; mtu 1500 qdisc noop state DOWN group default qlen 1000
-    link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea</code></pre>
+<div class="sourceCode" id="cb5"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="ex">1:</span> lo: <span class="op">&lt;</span>LOOPBACK,UP,LOWER_UP<span class="op">&gt;</span> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000</span>
+<span id="cb5-2"><a aria-hidden="true" href="#cb5-2" tabindex="-1"></a>    <span class="ex">link/loopback</span> 00:00:00:00:00:00 brd 00:00:00:00:00:00</span>
+<span id="cb5-3"><a aria-hidden="true" href="#cb5-3" tabindex="-1"></a>    <span class="ex">inet</span> 127.0.0.1/8 scope host lo</span>
+<span id="cb5-4"><a aria-hidden="true" href="#cb5-4" tabindex="-1"></a>       <span class="ex">valid_lft</span> forever preferred_lft forever</span>
+<span id="cb5-5"><a aria-hidden="true" href="#cb5-5" tabindex="-1"></a>    <span class="ex">inet6</span> ::1/128 scope host</span>
+<span id="cb5-6"><a aria-hidden="true" href="#cb5-6" tabindex="-1"></a>       <span class="ex">valid_lft</span> forever preferred_lft forever</span>
+<span id="cb5-7"><a aria-hidden="true" href="#cb5-7" tabindex="-1"></a><span class="ex">2:</span> enp7s0: <span class="op">&lt;</span>BROADCAST,MULTICAST,UP,LOWER_UP<span class="op">&gt;</span> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000</span>
+<span id="cb5-8"><a aria-hidden="true" href="#cb5-8" tabindex="-1"></a>    <span class="ex">link/ether</span> 4c:cc:6a:93:eb:0b brd ff:ff:ff:ff:ff:ff</span>
+<span id="cb5-9"><a aria-hidden="true" href="#cb5-9" tabindex="-1"></a>    <span class="ex">inet</span> 192.168.1.202/24 brd 192.168.1.255 scope global dynamic noprefixroute enp7s0</span>
+<span id="cb5-10"><a aria-hidden="true" href="#cb5-10" tabindex="-1"></a>       <span class="ex">valid_lft</span> 74501sec preferred_lft 74501sec</span>
+<span id="cb5-11"><a aria-hidden="true" href="#cb5-11" tabindex="-1"></a>    <span class="ex">inet6</span> fe80::4ecc:6aff:fe93:eb0b/64 scope link noprefixroute</span>
+<span id="cb5-12"><a aria-hidden="true" href="#cb5-12" tabindex="-1"></a>       <span class="ex">valid_lft</span> forever preferred_lft forever</span>
+<span id="cb5-13"><a aria-hidden="true" href="#cb5-13" tabindex="-1"></a><span class="ex">3:</span> wlp5s0: <span class="op">&lt;</span>BROADCAST,MULTICAST<span class="op">&gt;</span> mtu 1500 qdisc noop state DOWN group default qlen 1000</span>
+<span id="cb5-14"><a aria-hidden="true" href="#cb5-14" tabindex="-1"></a>    <span class="ex">link/ether</span> 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea</span></code></pre></div>
 <p>The device "enp7s0" is my Ethernet adapter (starts with an 'e') and
 my current local ip address for the device is shown. If you use wifi, it
 will likely start with a "wl." Set the forwarding rule according to this
@@ -363,7 +427,7 @@ subdomains on the same IP address like "git.mjfer.net".</p>
 be able access your server by name.</p>
 <h2 id="setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and
 TLS, for some sense of security</h2>
-<p>A decade of half-though through security advice has convinced
+<p>A decade of half-thought through security advice has convinced
 everyone that HTTPS and <em>only</em> HTTPS is secure. This is simply
 not true. Using HTTP alone doesn't inherently make you insecure and
 using HTTPS doesn't automatically guarantee the app your communicating
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 4248bd9..05302d8 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -21,6 +21,70 @@
       vertical-align: middle;
     }
     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+    /* CSS for syntax highlighting */
+    pre > code.sourceCode { white-space: pre; position: relative; }
+    pre > code.sourceCode > span { line-height: 1.25; }
+    pre > code.sourceCode > span:empty { height: 1.2em; }
+    .sourceCode { overflow: visible; }
+    code.sourceCode > span { color: inherit; text-decoration: inherit; }
+    div.sourceCode { margin: 1em 0; }
+    pre.sourceCode { margin: 0; }
+    @media screen {
+    div.sourceCode { overflow: auto; }
+    }
+    @media print {
+    pre > code.sourceCode { white-space: pre-wrap; }
+    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+    }
+    pre.numberSource code
+      { counter-reset: source-line 0; }
+    pre.numberSource code > span
+      { position: relative; left: -4em; counter-increment: source-line; }
+    pre.numberSource code > span > a:first-child::before
+      { content: counter(source-line);
+        position: relative; left: -1em; text-align: right; vertical-align: baseline;
+        border: none; display: inline-block;
+        -webkit-touch-callout: none; -webkit-user-select: none;
+        -khtml-user-select: none; -moz-user-select: none;
+        -ms-user-select: none; user-select: none;
+        padding: 0 4px; width: 4em;
+        color: #aaaaaa;
+      }
+    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+    div.sourceCode
+      {   }
+    @media screen {
+    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+    }
+    code span.al { color: #ff0000; font-weight: bold; } /* Alert */
+    code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+    code span.at { color: #7d9029; } /* Attribute */
+    code span.bn { color: #40a070; } /* BaseN */
+    code span.bu { color: #008000; } /* BuiltIn */
+    code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
+    code span.ch { color: #4070a0; } /* Char */
+    code span.cn { color: #880000; } /* Constant */
+    code span.co { color: #60a0b0; font-style: italic; } /* Comment */
+    code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
+    code span.do { color: #ba2121; font-style: italic; } /* Documentation */
+    code span.dt { color: #902000; } /* DataType */
+    code span.dv { color: #40a070; } /* DecVal */
+    code span.er { color: #ff0000; font-weight: bold; } /* Error */
+    code span.ex { } /* Extension */
+    code span.fl { color: #40a070; } /* Float */
+    code span.fu { color: #06287e; } /* Function */
+    code span.im { color: #008000; font-weight: bold; } /* Import */
+    code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+    code span.kw { color: #007020; font-weight: bold; } /* Keyword */
+    code span.op { color: #666666; } /* Operator */
+    code span.ot { color: #007020; } /* Other */
+    code span.pp { color: #bc7a00; } /* Preprocessor */
+    code span.sc { color: #4070a0; } /* SpecialChar */
+    code span.ss { color: #bb6688; } /* SpecialString */
+    code span.st { color: #4070a0; } /* String */
+    code span.va { color: #19177c; } /* Variable */
+    code span.vs { color: #4070a0; } /* VerbatimString */
+    code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
   </style>
 <link href="../../static/main.css" rel="stylesheet"/>
 </head>
@@ -104,22 +168,22 @@ it.</p>
 <h3 id="basic-format">Basic Format</h3>
 <p>All HTML files start with the following (note: the spacing does not
 matter, it's just spaced for readability):</p>
-<pre><code>&lt;html&gt;
-    &lt;body&gt;
-    &lt;!-- stuff you see goes here --&gt;
-    &lt;/body&gt;
-&lt;/html&gt;</code></pre>
+<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
+<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb1-3"><a aria-hidden="true" href="#cb1-3" tabindex="-1"></a>    <span class="co">&lt;!-- stuff you see goes here --&gt;</span></span>
+<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>You'll notice two <em>tags</em> here. An "html" tag, and a "body"
 tag, both of which are closed with "&lt;/html&gt;" and "&lt;/body&gt;"
 to signify where the sections end. The HTML document proper is anything
 between the HTML tags. The body of the document contains the actual
 content that the user sees. For example:</p>
-<pre><code>&lt;html&gt;
-    &lt;body&gt;
-        &lt;h1&gt;My Great page&lt;/h1&gt;
-        &lt;p&gt;My great paragraph&lt;/p&gt;
-    &lt;/body&gt;
-&lt;/html&gt;</code></pre>
+<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
+<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
+<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>We've introduced two more tags here, both of which are closed within
 the body section. The "h1" tag defines a "Heading" which tells the
 browser to render the text big and bold, like a document title. You can
@@ -130,33 +194,33 @@ text in a file called "page.html" and open it in your browser.</p>
 <h3 id="tables-and-links">Tables and Links</h3>
 <p>We can do a lot more than text of course. Let's walk through some
 more tags in this example:</p>
-<pre><code>&lt;html&gt;
-    &lt;body&gt;
-    &lt;h1&gt;My Great page&lt;/h1&gt;
-    &lt;p&gt;My great paragraph&lt;/p&gt;
-    &lt;br&gt;
-    &lt;h3&gt;Please check out these links, really cool stuff!&lt;/h3&gt;
-    &lt;center&gt;
-        &lt;table&gt;
-            &lt;tr&gt;
-                &lt;td&gt;FSF!&lt;/td&gt;
-                &lt;td&gt;
-                &lt;a href="https://www.fsf.org/"&gt;
-                &lt;img src="https://static/media.fsf.org/common/img/logo-new.png" /&gt;
-                &lt;/a&gt;&lt;/td&gt;
-            &lt;/tr&gt;
-            &lt;tr&gt;
-                &lt;td&gt;LOONIX!&lt;/td&gt;
-                &lt;td&gt;
-                &lt;a href="https://www.kernel.org/"&gt;
-                &lt;img src="https://www.kernel.org/theme/images/logos/tux.png" /&gt;
-                &lt;/a&gt;
-                &lt;/td&gt;
-            &lt;/tr&gt;
-        &lt;/table&gt;
-    &lt;/center&gt;
-    &lt;/body&gt;
-&lt;/html&gt;</code></pre>
+<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
+<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
+<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">br</span><span class="dt">&gt;</span></span>
+<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">h3</span><span class="dt">&gt;</span>Please check out these links, really cool stuff!<span class="dt">&lt;/</span><span class="kw">h3</span><span class="dt">&gt;</span></span>
+<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">center</span><span class="dt">&gt;</span></span>
+<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">table</span><span class="dt">&gt;</span></span>
+<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a>            <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
+<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>FSF!<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="dt">&gt;</span></span>
+<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="dt">/&gt;</span></span>
+<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a>            <span class="dt">&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
+<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a>            <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
+<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>LOONIX!<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="dt">&gt;</span></span>
+<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="dt">/&gt;</span></span>
+<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
+<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
+<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a>            <span class="dt">&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
+<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a>        <span class="dt">&lt;/</span><span class="kw">table</span><span class="dt">&gt;</span></span>
+<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">center</span><span class="dt">&gt;</span></span>
+<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>We added a few things here, but it's the same pattern right?
 &lt;open&gt;&lt;/close&gt;.</p>
 <p>We started by adding a "center" tag, which does what you think: it
@@ -175,25 +239,24 @@ world</em>. On it's own, the "a" tag doesn't do anything special. We
 need to use the tag with an <em>attribute</em>--an extra word that comes
 after a--in order to make it work for us. A more basic example might be
 this:</p>
-<pre><code>&lt;a href="https://example.com"&gt;Example&lt;/a&gt;</code></pre>
+<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="dt">&gt;</span>Example<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>Which you'll see as:</p>
 <p><a href="https://example.com">Example</a></p>
 <p>The "href" attribute doesn't <em>have</em> to point to some other
 website; it can point to anything. For example, you might want to link
 to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do
 it like this:</p>
-<pre><code>&lt;a href="/cat.jpg"&gt;example&lt;/a&gt;</code></pre>
+<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="dt">&gt;</span>example<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>You can also link an email like this</p>
-<pre><code>&lt;a href="mailto:email@example.com"&gt;example email&lt;/a&gt;
-</code></pre>
+<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="dt">&gt;</span>example email<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>Let's say you had a barebones site with 5 HTML files named:
 index.html, about.html, faq.html, cats.html, vidya.html. You can make a
 neat little navbar just using "a" tags like this:</p>
-<pre><code>&lt;a href="/index.html"&gt;home&lt;/a&gt;
- - &lt;a href="/about.html"&gt;about&lt;/a&gt;
- - &lt;a href="/faq.html"&gt;faq&lt;/a&gt;
- - &lt;a href="/cats.html"&gt;cats&lt;/a&gt;
- - &lt;a href="/vidya.html"&gt;vidya&lt;/a&gt;</code></pre>
+<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="dt">&gt;</span>home<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
+<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="dt">&gt;</span>about<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
+<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="dt">&gt;</span>faq<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
+<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="dt">&gt;</span>cats<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
+<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="dt">&gt;</span>vidya<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
 <h3 id="and-everything-else...">And Everything Else...</h3>
 <p>There are many other tags out there, many of which I don't know, and
 one which I mentioned before, but didn't explain yet: the "img" tag. In
@@ -314,21 +377,21 @@ search engines indexing the site that can improve the user experience.
 The most common thing you'll see in the head section is the site's
 title, and something called "meta" tags. As usual, it's best to see an
 example:</p>
-<pre><code>&lt;html&gt;
-    &lt;head&gt;
-        &lt;title&gt;My Great page&lt;/title&gt;
-        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
-        &lt;meta name="description" content="a really cool page"&gt;
-        &lt;meta name="keywords" content="HTML, CSS, JavaScript"&gt;
-        &lt;meta name="author" content="John Doe"&gt;
-        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
-        &lt;link rel="stylesheet" type="text/css" href="/static/media/main.css"&gt;
-    &lt;/head&gt;
-    &lt;body&gt;
-        &lt;h1&gt;My Great page&lt;/h1&gt;
-        &lt;p&gt;My great paragraph&lt;/p&gt;
-    &lt;/body&gt;
-&lt;/html&gt;</code></pre>
+<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
+<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">head</span><span class="dt">&gt;</span></span>
+<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">title</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">title</span><span class="dt">&gt;</span></span>
+<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="dt">/&gt;</span></span>
+<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="dt">&gt;</span></span>
+<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="dt">&gt;</span></span>
+<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="dt">&gt;</span></span>
+<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="dt">&gt;</span></span>
+<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">&gt;</span></span>
+<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">head</span><span class="dt">&gt;</span></span>
+<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
+<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>Note that the "meta" tag works like the "img" tag did and has no
 closing tag.</p>
 <p>The first tag in the head is the "title" tag. This is the title of
@@ -361,12 +424,12 @@ Cascading Style Sheets (CSS).</p>
 <p>The "link" tag in the metadata sections can link any external
 resource. It's commonly used to make a "favicon" for example, which is
 the icon you see in the tab of an open page.</p>
-<pre><code>&lt;link rel="icon" href="/favicon.ico"&gt;</code></pre>
+<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>In the last example, we instead make a reference to a CSS formatted
 style sheet. Like HTML, CSS is just a text file written in a specific
 syntax. CSS allows you to set attributes to <em>all</em> tags in a
 specific document and create a unifying style for all your pages.</p>
-<pre><code>&lt;link rel="stylesheet" type="text/css" href="/static/media/main.css"&gt;</code></pre>
+<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">&gt;</span></span></code></pre></div>
 <p>As before, "href" points to the file to be linked. In this example,
 we place our CSS in a text file called "main.css" in the "static"
 directory of "/var/www/html".</p>
@@ -374,16 +437,16 @@ directory of "/var/www/html".</p>
 <p>Before we make CSS files, I want to stress the point that all this
 stuff is defined in HTML. You can set these attributes directly in any
 tag we talked about in the last section. For example:</p>
-<pre><code>&lt;p style="color:red"&gt;this text is red&lt;/p&gt;
-&lt;p style="color:red;background-color:blue"&gt;this background is blue&lt;/p&gt;
-&lt;p style="color:red;background-color:blue;text-align:center"&gt;this text is centered&lt;/p&gt;
-&lt;a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&amp;episode_no=2"
-    target="_blank"
-    rel="noopener noreferrer"
-    style="color:yellow;background-color:red;text-align:right"
-    &gt;
-    And this links to sonichu
-&lt;/a&gt;</code></pre>
+<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="dt">&gt;</span>this text is red<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="dt">&gt;</span>this background is blue<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="dt">&gt;</span>this text is centered<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&amp;</span><span class="st">episode_no=2"</span></span>
+<span id="cb11-5"><a aria-hidden="true" href="#cb11-5" tabindex="-1"></a><span class="ot">    target=</span><span class="st">"_blank"</span></span>
+<span id="cb11-6"><a aria-hidden="true" href="#cb11-6" tabindex="-1"></a><span class="ot">    rel=</span><span class="st">"noopener noreferrer"</span></span>
+<span id="cb11-7"><a aria-hidden="true" href="#cb11-7" tabindex="-1"></a><span class="ot">    style=</span><span class="st">"color:yellow;background-color:red;text-align:right"</span></span>
+<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a>    <span class="dt">&gt;</span></span>
+<span id="cb11-9"><a aria-hidden="true" href="#cb11-9" tabindex="-1"></a>    And this links to sonichu</span>
+<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
 <p style="color:red">
 this text is red
 </p>
@@ -402,12 +465,12 @@ using a CSS file.</p>
 <p>For any HTML tag, you can set an attribute that applies everytime it
 appears in an HTML document that links to the CSS file. A common
 formatting I use for paragraphs is:</p>
-<pre><code>p {
+<pre class="htmlcss"><code>p {
     margin-top: 1.5%;
     margin-bottom: 1.5%;
 }</code></pre>
 <p>And to highlight code, like you've been seeing, I use:</p>
-<pre><code>code {
+<pre class="htmlcss"><code>code {
     display: inline-block;
     font-size: 125%;
     background-color: #d8d8d8;
@@ -429,7 +492,7 @@ picker</a></li>
 <p>Images get more styles in CSS than I can document in detail, but one
 important bit you'll want to probably add to all images is the
 following.</p>
-<pre><code>img {
+<pre class="htmlcss"><code>img {
     max-width: 100%;
     height: auto;
     width: auto;
@@ -445,7 +508,7 @@ view on mobile, the image scales to fit the screen; it never gets cutoff
 or distorted.</p>
 <p>In addition to this basic stuff, you can style your images heavily
 using the filter option like so:</p>
-<pre><code>img.gray {
+<pre class="htmlcss"><code>img.gray {
     filter: grayscale(100%)
 }</code></pre>
 <p>Applied:</p>
@@ -457,7 +520,7 @@ the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp
 others. An example on this site, I dim the icons a bit so they can
 appear nice on dark theme browsers just as well. But I don't want to dim
 <em>all</em> images like in the following example:</p>
-<pre><code>img {
+<pre class="htmlcss"><code>img {
     filter: invert(50%);
 }</code></pre>
 <p>For one, that will only dim black-and-white images; anything else
@@ -465,11 +528,11 @@ will just turn to mush like this:</p>
 <p><img class="icon" src="/static/media/jazzcat.jpg"/></p>
 <p>Instead, I'd like it to just apply to select elements; I can do so by
 extending the tag with a class. On the CSS side:</p>
-<pre><code>img.icon {
+<pre class="htmlcss"><code>img.icon {
     filter: invert(50%);
 }</code></pre>
 <p>And to implement it in HTML:</p>
-<pre><code>&lt;img class="icon" src="/static/media/rss.svg" /&gt;</code></pre>
+<pre class="htmlcss"><code>&lt;img class="icon" src="/static/media/rss.svg" /&gt;</code></pre>
 <p><img class="icon" src="/static/media/rss.svg"/></p>
 <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make
 sections</h4>
@@ -479,7 +542,7 @@ Let's say you wanted to center a heading, a paragraph, and a picture,
 and constrain them to only part of the page, so that there's some
 margins on the left and right. We can put them all in one content
 section like this:</p>
-<pre><code>.content {
+<pre class="htmlcss"><code>.content {
     text-align: center;
     max-width: 85%;
 }</code></pre>
@@ -487,7 +550,7 @@ section like this:</p>
 but usually we use a placeholder tag called "div." You can think of
 "div" like a divider for content of similar style. In the present
 example, we can use the class we made with a div tag:</p>
-<pre><code>&lt;div class="content"&gt;
+<pre class="htmlcss"><code>&lt;div class="content"&gt;
 &lt;h1&gt;My cat&lt;/h1&gt;
 &lt;p&gt;He's a cool cat&lt;/p&gt;
 &lt;img src="/cat.jpg" /&gt;
@@ -500,7 +563,7 @@ allow you to directly manipulate your website based on properties of the
 user's device or web browser.</p>
 <p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
 but for your basic smartphone, you can copy and paste this block:</p>
-<pre><code>@media screen and (max-device-width: 480px) {
+<pre class="htmlcss"><code>@media screen and (max-device-width: 480px) {
     // override your tags here
     body {
         font-size: 125%;
@@ -514,7 +577,7 @@ add a little more style than a typical desktop web browser.</p>
 your CSS attributes, so that size is always defined relative to all the
 other elements. This makes functions like zoom work a lot better. You
 can for example put a pixel value like this:</p>
-<pre><code>body {
+<pre class="htmlcss"><code>body {
     font-size: 14px;
 }</code></pre>
 <p>But this binds the size to 14 pixels which may look great on desktop,