Add CSS stylesheet

Mark function idents and zero-width operator with appropriate classes
such that they can be selected with CSS and correct space around them
added.

Also move the cancel enclose style rule to the CSS stylesheet.

Fixes: #103

README.md

@@ -26,6 +26,7 @@ and include the **module**:
 
 ```html
 <script type="module" src="mathup.js"></script>
+<link rel="stylesheet" href="mathup.css" />
 ```
 
 …the **custom element**:
@@ -38,6 +39,7 @@ and include the **module**:
 
 ```html
 <script src="mathup.iife.js"></script>
+<link rel="stylesheet" href="mathup.css" />
 ```
 
 #### Usage

docs/index.html

@@ -230,19 +230,29 @@ <h5>Client</h5>
                 >min</a
               >)
             </li>
+
+            <li>
+              Stylesheet (<a
+                href="https://cdn.jsdelivr.net/npm/mathup/dist/mathup.css"
+                download
+                >full</a
+              >; <em>not needed for custom element</em>)
+            </li>
           </ul>
 
           <p>…and include the <b>module</b>:</p>
 
-          <pre><code>&lt;<span class="hl-tag-name">script</span> <span class="hl-keyword">type</span>=<span class="hl-string">"module"</span> <span class="hl-keyword">src</span>=<span class="hl-string">"mathup.js"</span>&gt;&lt;/<span class="hl-tag-name">script</span>&gt;</code></pre>
+          <pre><code>&lt;<span class="hl-tag-name">script</span> <span class="hl-keyword">type</span>=<span class="hl-string">"module"</span> <span class="hl-keyword">src</span>=<span class="hl-string">"mathup.js"</span>&gt;&lt;/<span class="hl-tag-name">script</span>&gt;
+&lt;<span class="hl-tag-name">link</span> <span class="hl-keyword">rel</span>=<span class="hl-string">"stylesheet"</span> <span class="hl-keyword">href</span>=<span class="hl-string">"mathup.css"</span> /&gt;</code></pre>
 
           <p>…the <b>custom element</b>:</p>
 
           <pre><code>&lt;<span class="hl-tag-name">script</span> <span class="hl-keyword">type</span>=<span class="hl-string">"module"</span> <span class="hl-keyword">src</span>=<span class="hl-string">"math-up-element.js"</span>&gt;&lt;/<span class="hl-tag-name">script</span>&gt;</code></pre>
 
           <p>…or the <b>script</b>:</p>
 
-          <pre><code>&lt;<span class="hl-tag-name">script</span> <span class="hl-keyword">src</span>=<span class="hl-string">"mathup.iife.js"</span>&gt;&lt;/<span class="hl-tag-name">script</span>&gt;</code></pre>
+          <pre><code>&lt;<span class="hl-tag-name">script</span> <span class="hl-keyword">src</span>=<span class="hl-string">"mathup.iife.js"</span>&gt;&lt;/<span class="hl-tag-name">script</span>&gt;
+&lt;<span class="hl-tag-name">link</span> <span class="hl-keyword">rel</span>=<span class="hl-string">"stylesheet"</span> <span class="hl-keyword">href</span>=<span class="hl-string">"mathup.css"</span> /&gt;</code></pre>
         </section>
 
         <section id="usage">

package.json

@@ -88,6 +88,7 @@
     "jsdom": "^22.1.0",
     "prettier": "3.0.3",
     "rollup": "^4.3.0",
+    "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.2.2"
   }
 }

rollup.config.js

@@ -1,5 +1,8 @@
+import path from "node:path";
+
 import babel from "@rollup/plugin-babel";
 import terser from "@rollup/plugin-terser";
+import copy from "rollup-plugin-copy";
 
 /**
  * @typedef {import("rollup").RollupOptions} RollupOptions
@@ -47,10 +50,21 @@ const defaultConfig = {
       plugins: [terser()],
     },
   ],
+
   plugins: [
     babel({
       babelHelpers: "runtime",
     }),
+
+    copy({
+      targets: [
+        {
+          src: path.resolve("./src/stylesheets/core.css"),
+          dest: path.resolve("dist/"),
+          rename: "mathup.css",
+        },
+      ],
+    }),
   ],
 };