Document theme option, add permalink to anchors visible on hover

css/themes/common.css

@@ -0,0 +1,7 @@
+:is(h1,h2,h3,h4,h5,h6) > a.header-anchor {
+  opacity: 0
+}
+
+:is(h1,h2,h3,h4,h5,h6):hover > a.header-anchor {
+  opacity: 1
+}

index.html

@@ -9,6 +9,7 @@
   <!-- <link rel="stylesheet" type="text/css" href="/css/github-syntax-highlight.css"> -->
   <!-- <link rel="stylesheet" type="text/css" href="/css/github-markdown.css"> -->
   <link rel="stylesheet" type="text/css" href="/css/mjpage-html.css">
+  <link rel="stylesheet" type="text/css" href="/css/themes/common.css">
   <style>
     .markdown-body {
       min-width: 200px;

package.json

@@ -36,7 +36,7 @@
     "minimist": "^1.2.8",
     "send": "~0.17.2",
     "socket.io": "^4.7.2",
-    "markdown-it-anchor": "8.6.7"
+    "markdown-it-anchor": "^8.6.7"
   },
   "devDependencies": {
     "genversion": "^3.1.1"

src/cli.js

@@ -11,7 +11,7 @@ const process = require('process'),
 
 const argv = require('minimist')(process.argv.slice(2), {
   string: ['browser'],
-  default: {port: 8090, debug: false, anchor: false },
+  default: {port: 8090, debug: false, anchor: false, theme: false},
   alias: {V: 'version', h: 'help'},
 });
 
@@ -49,6 +49,7 @@ Options:
   --anchor           Add id attribute to HTML headings
   --browser BROWSER  Use a custom browser
   --port PORT        Use a custom port (default: 8090)
+  --theme THEME      Use a different theme (default: 'light'. Can be one of {'basic', 'dark', 'light'})
   --debug            Be verbose and do not open browser
   -V, --version      Display version
   -h, --help         Display help\
@@ -90,10 +91,14 @@ if (argv.mathjax) md.use(require('markdown-it-mathjax')());
 if (argv.mermaid)  md.use(require('markdown-it-textual-uml'));
 
 if (argv.anchor) {
+  const anchor = require('markdown-it-anchor');
   let anchorOpt = {
-    tabIndex: false
-  }
-  md.use(require('markdown-it-anchor'), anchorOpt);
+    tabIndex: false,
+    permalink: anchor.permalink.ariaHidden({
+      placement: 'after'
+    })
+  };
+  md.use(anchor, anchorOpt);
 }
 
 const mjPageConfig = {
@@ -202,7 +207,7 @@ function httpHandler(req, res) {
         let pkgRoot = path.dirname(__dirname);
         let cwd = process.cwd();
 
-        let filePath = url.parse(req.url, false).pathname;   
+        let filePath = url.parse(req.url, false).pathname;
 
         let mount = cwd && !fs.existsSync(pkgRoot + filePath) ? cwd : pkgRoot;
         if (githubUrl) {
@@ -278,6 +283,7 @@ function onListening() {
   }
   let cmd = argv.browser + ' http://localhost:' + argv.port + '/?';
   // add theme param if present
+  // if unspecified index.js defaults to 'light' theme
   if (argv.theme){
      cmd += 'theme=' + argv.theme;
   }