Changes to #90 (#99)

* add theme param;add night theme style * comments * add theme param support * follow ashwinvis's advices * Rename night -> dark * Increase tries for port check again --------- Co-authored-by: shizhong.lsz <[email protected]> Co-authored-by: Starfury.Tech <[email protected]>
instant-markdown · Sep 30, 2023 · 216bb6e · 216bb6e
1 parent 6abe3d8
commit 216bb6e
Show file tree

Hide file tree

Showing 10 changed files with 947 additions and 28 deletions.
diff --git a/css/themes/dark/github-markdown.css b/css/themes/dark/github-markdown.css
diff --git a/css/github-syntax-highlight.css → css/themes/dark/github-syntax-highlight.css b/css/github-syntax-highlight.css → css/themes/dark/github-syntax-highlight.css
diff --git a/css/themes/darkness/github-markdown.css b/css/themes/darkness/github-markdown.css
diff --git a/css/themes/darkness/github-syntax-highlight.css b/css/themes/darkness/github-syntax-highlight.css
diff --git a/css/github-markdown.css → css/themes/light/github-markdown.css b/css/github-markdown.css → css/themes/light/github-markdown.css
diff --git a/css/themes/light/github-syntax-highlight.css b/css/themes/light/github-syntax-highlight.css
@@ -0,0 +1,121 @@
+/*
+
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #a71d5d;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #0086b3;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-dartdoc,
+.tex .hljs-formula {
+  color: #df5000;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #900;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #795da3;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in {
+  color: #795da3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
+}
diff --git a/index.html b/index.html
@@ -5,8 +5,9 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta http-equiv="Content-Language" content="en">
-  <link rel="stylesheet" type="text/css" href="/css/github-syntax-highlight.css">
-  <link rel="stylesheet" type="text/css" href="/css/github-markdown.css">
+  <!-- theme stylesheets are dynamic loaded in index.js, according to 'theme' param -->
+  <!-- <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">
   <style>
     .markdown-body {
@@ -26,7 +27,6 @@
   <script src="/node_modules/mermaid/dist/mermaid.min.js"></script>
   <script src="/socket.io/socket.io.min.js"></script>
   <script src="/index.js"></script>
-  </script>
 </head>
 <body>
   <div class="container">

diff --git a/index.js b/index.js
@@ -61,3 +61,30 @@ function setDisconnected(isDisconnected) {
   document.getElementById('con-error').style.display =
     isDisconnected ? 'block' : 'none';
 }
+
+
+function loadStyle(src) {
+  return new Promise(function (resolve, reject) {
+    let link = document.createElement('link');
+    link.href = src;
+    link.rel = 'stylesheet';
+
+    link.onload = () => resolve(link);
+    link.onerror = () => reject(new Error(`Style load error for ${src}`));
+
+    document.head.append(link);
+  });
+}
+
+// register func on window.onload may not best way
+// but the in-line script in index.html may request more feature(unsafe-content-allowed)
+// and more flexable js-lib(etc jquery) is heavier too much 
+window.onload = function(){
+    // dynamic load style according to *theme* params
+    let searchParams = new URLSearchParams(window.location.search);
+    let theme = searchParams.get("theme") || "light";
+    let themePath = "/css/themes/" + theme + "/";
+    loadStyle(themePath + "github-markdown.css");
+    loadStyle(themePath + "github-syntax-highlight.css");
+}
+
diff --git a/src/cli.js b/src/cli.js
@@ -6,7 +6,8 @@ const process = require('process'),
   exec = require('child_process').exec,
   os = require('os'),
   fs = require('fs'),
-  path = require('path');
+  path = require('path'),
+  url = require('url');
 
 const argv = require('minimist')(process.argv.slice(2), {
   string: ['browser'],
@@ -192,7 +193,10 @@ function httpHandler(req, res) {
         let isIndexFile = /^\/(index\.html)?(\?|$)/.test(req.url);
         let pkgRoot = path.dirname(__dirname);
         let cwd = process.cwd();
-        let mount = cwd && !fs.existsSync(pkgRoot + req.url) ? cwd : pkgRoot;
+
+        let filePath = url.parse(req.url, false).pathname;   
+
+        let mount = cwd && !fs.existsSync(pkgRoot + filePath) ? cwd : pkgRoot;
         if (githubUrl) {
           addSecurityHeaders(req, res, false);
            // Serve the file out of the current working directory
@@ -210,7 +214,7 @@ function httpHandler(req, res) {
         }
 
         // Otherwise serve the file from the directory this module is in
-        send(req, req.url, {root: mount})
+        send(req, filePath, {root: mount})
           .pipe(res);
       }
       break;
@@ -264,7 +268,12 @@ function onListening() {
       argv.browser = 'xdg-open';
     }
   }
-  let cmd = argv.browser + ' http://localhost:' + argv.port + '/';
+  let cmd = argv.browser + ' http://localhost:' + argv.port + '/?';
+  // add theme param if present
+  if (argv.theme){
+     cmd += 'theme=' + argv.theme;
+  }
+
   if (argv.debug) {
     console.log("Run the following to manually open browser: \n    " + cmd);
   } else {

diff --git a/tests/conftest.py b/tests/conftest.py
@@ -118,7 +118,7 @@ def __exit__(self, exc_type, exc_val, exc_tb):
     def send(self, via, markdown_file):
         # Wait some time to ensure the server has launched
         # TODO: find a better way: signal? return code? daemon?
-        for tries in range(3):
+        for tries in range(10):
             if port_in_use(self.port):
                 break
             else: