@mryhryki/markdown-preview 0.3.11 → 0.4.1

package/.editorconfig

@@ -0,0 +1,7 @@
+[{*.html, *.css, *.scss, *.cjs, *.js, *.jsx, *.json, *.ts, *.tsx}]
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2

package/.eslintrc.yaml

@@ -0,0 +1,34 @@
+extends:
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+  - plugin:react-hooks/recommended
+  - prettier
+plugins:
+  - jest
+  - "@typescript-eslint"
+  - prettier
+  - react
+  - unused-imports
+env:
+  browser: true
+  commonjs: true
+  es2020: true
+  jest/globals: true
+  node: true
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+parser: "@typescript-eslint/parser"
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 11
+  sourceType: module
+rules:
+  prettier/prettier: error
+  react/prop-types: 'off'
+  'react-hooks/exhaustive-deps': 'off'
+  '@typescript-eslint/no-var-requires': 'off'
+settings:
+  react:
+    version: detect

package/.github/dependabot.yml

@@ -0,0 +1,15 @@
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: monthly
+      timezone: Asia/Tokyo
+    target-branch: main
+    reviewers:
+      - mryhryki
+    assignees:
+      - mryhryki
+    labels:
+      - dependencies
+

package/.github/workflows/check.yml

@@ -0,0 +1,32 @@
+name: check
+env:
+  TZ: "Asia/Tokyo"
+
+on:
+  push:
+    branches:
+      - "main"
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  check_branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Update npm
+        run: npm install -g npm
+      - name: install packages
+        run: npm ci
+      - name: lint
+        run: npm run lint
+      - name: test
+        run: npm test

package/.github/workflows/update_packages.yml

@@ -0,0 +1,35 @@
+name: update_packages
+env:
+  TZ: "Asia/Tokyo"
+
+on:
+  schedule:
+    - cron: "15 11 20 * *" # UTC
+  workflow_dispatch:
+
+jobs:
+  check_branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Update packages
+        run: |
+          npm i -g npm
+          npm exec -- npm-check-updates -u
+          npm install
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
+        with:
+          title: "Update package.json"
+          commit-message: "Update package.json"
+          branch: "update-packages"
+          delete-branch: true
+          branch-suffix: timestamp
+          reviewers: mryhryki

package/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package/CODEOWNERS

@@ -0,0 +1 @@
+* @mryhryki

package/README.md

@@ -4,59 +4,65 @@ Markdown realtime preview on browser with your favorite editor.
 
 ## Demo
 
-![DEMO](https://github.com/mryhryki/markdown-preview/raw/master/gif/demo.gif)
+![DEMO](./gif/demo.gif)
 
 ## Usage
 
 ### npx
 
-```
-$ npx @mryhryki/markdown-preview --port 34567 --file README.md
-
+```shell
+$ npx @mryhryki/markdown-preview --file README.md --template default --port 34567 --log-level info --no-opener
 Root Directory : /current/dir
 Default File   : README.md
-Preview URL    : http://localhost:34567/
+Extensions     : md, markdown
+Template File  : /path/to/template/default.html
+Preview URL    : http://localhost:34567
 ```
 
 ### npm / yarn
 
-```
+```shell
 $ npm install -g @mryhryki/markdown-preview
 # or
 $ yarn install -g @mryhryki/markdown-preview
 
-$ markdown-preview --port 34567 --file README.md
-
+$ markdown-preview --file README.md --template default --port 34567 --log-level info --no-opener
 Root Directory : /current/dir
 Default File   : README.md
-Preview URL    : http://localhost:34567/
+Extensions     : md, markdown
+Template File  : /path/to/template/default.html
+Preview URL    : http://localhost:34567
 ```
 
 ## Parameter
 
-| short | long        | environment variable       | parameter                                | required | default   |
-|-------|-------------|----------------------------|------------------------------------------|----------|-----------|
-| -f    | --file      | MARKDOWN_PREVIEW_FILE      | `relative` file path                     | no       | README.md |
-| -t    | --template  | MARKDOWN_PREVIEW_TEMPLATE  | template name(*1)                        | no       | default   |
-| -p    | --port      | MARKDOWN_PREVIEW_PORT      | port number                              | no       | 34567     |
-|       | --log-level | MARKDOWN_PREVIEW_LOG_LEVEL | trace, debug, info<br>warn, error, fatal | no       | info      |
-|       | --no-opener | MARKDOWN_PREVIEW_NO_OPENER | true (only env var)                      | no       |           |
-| -v    | --version   |                            |                                          | no       |           |
-| -h    | --help      |                            |                                          | no       |           |
+| short | long        | environment variable       | parameter                                             | required | default   |
+|-------|-------------|----------------------------|-------------------------------------------------------|----------|-----------|
+| -f    | --file      | MARKDOWN_PREVIEW_FILE      | ***relative*** file path                              | no       | README.md |
+| -t    | --template  | MARKDOWN_PREVIEW_TEMPLATE  | defined template name (*1) or template file path (*2) | no       | default   |
+| -p    | --port      | MARKDOWN_PREVIEW_PORT      | port number                                           | no       | 34567     |
+|       | --log-level | MARKDOWN_PREVIEW_LOG_LEVEL | trace, debug, info<br>warn, error, fatal              | no       | info      |
+|       | --no-opener | MARKDOWN_PREVIEW_NO_OPENER | true (only env var)                                   | no       |           |
+| -v    | --version   |                            |                                                       | no       |           |
+| -h    | --help      |                            |                                                       | no       |           |
+
+### *1: Defined Template Names
 
-*1: defined template name or html file path.
+- `default`
+- `default-dark`
 
-### Defined Template Names
+### *2: How to create a template file
 
-* `default`
+Creating a template file is easy.
+At a minimum, all you need to do is load `/markdown-preview-websocket.js` and pass a callback function with the necessary processing to `connectMarkdownPreview`.
 
-## Minimum Customized Template
+Sample code is presented below.
 
 ```html
 <!doctype html>
 <html>
   <head>
-    <title>Minimum Customized Template</title>
+    <title>Minimum Template Sample</title>
   </head>
   <body>
     <pre id="raw-markdown"></pre>

package/index.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
-'use strict';
+"use strict";
 
-require('./src/index');
+require("./src/index");

package/package.json

@@ -1,48 +1,51 @@
 {
   "name": "@mryhryki/markdown-preview",
-  "version": "0.3.11",
   "description": "Markdown realtime preview on browser",
-  "main": "index.js",
-  "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.0.0"
-  },
-  "bin": {
-    "markdown-preview": "index.js"
-  },
-  "scripts": {
-    "start": "nodemon --watch ./src/ index.js --no-opener --log-level debug",
-    "test": "jest",
-    "test:watch": "jest --watchAll"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mryhryki/markdown-preview.git"
-  },
+  "version": "0.4.1",
   "author": "mryhryki",
   "license": "MIT",
-  "publishConfdddig": {
+  "publishConfig": {
     "access": "public"
   },
-  "bugs": {
-    "url": "https://github.com/mryhryki/markdown-preview/issues"
-  },
-  "homepage": "https://github.com/mryhryki/markdown-preview#readme",
   "keywords": [
     "markdown",
     "preview"
   ],
+  "homepage": "https://github.com/mryhryki/markdown-preview#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mryhryki/markdown-preview.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mryhryki/markdown-preview/issues"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=6.0.0"
+  },
+  "main": "index.js",
+  "bin": {
+    "markdown-preview": "index.js"
+  },
   "dependencies": {
-    "express": "^4.17.2",
+    "express": "^4.18.2",
     "express-ws": "^5.0.2",
-    "log4js": "^6.3.0",
+    "log4js": "^6.9.1",
     "opener": "^1.5.2",
-    "requires": "^1.0.2",
     "serve-index": "^1.9.1",
-    "ws": "^8.4.0"
+    "ws": "^8.13.0"
   },
   "devDependencies": {
-    "jest": "^27.4.5",
-    "nodemon": "^2.0.15"
+    "@mryhryki/lint": "^0.0.12",
+    "jest": "^29.5.0",
+    "nodemon": "^2.0.21"
+  },
+  "scripts": {
+    "start": "node ./index.js",
+    "dev": "nodemon --watch ./src/ index.js --no-opener --log-level debug",
+    "lint": "mryhryki-lint",
+    "lint:fix": "mryhryki-lint --fix",
+    "test": "jest",
+    "test:watch": "jest --watchAll"
   }
 }

package/src/index.js

@@ -1,47 +1,46 @@
-'use strict'
+"use strict";
 
-const express = require('express')
-const expressWs = require('express-ws')
-const serveIndex = require('serve-index')
-const opener = require('opener')
-const getLogger = require('./lib/logger')
-const { showUsage, showVersion } = require('./lib/show')
-const MarkdownHandler = require('./markdown')
-const WebSocketHandler = require('./websocket')
-const { rootDir, staticDir } = require('./lib/directory')
-const Params = require('./lib/params')
+const express = require("express");
+const expressWs = require("express-ws");
+const serveIndex = require("serve-index");
+const opener = require("opener");
+const getLogger = require("./lib/logger");
+const { showUsage, showVersion } = require("./lib/show");
+const MarkdownHandler = require("./markdown");
+const WebSocketHandler = require("./websocket");
+const { rootDir, staticDir } = require("./lib/directory");
+const Params = require("./lib/params");
 
 try {
-  const params = new Params(process.env, process.argv.slice(2))
-  if (params.help) showUsage()
-  if (params.version) showVersion()
+  const params = new Params(process.env, process.argv.slice(2));
+  if (params.help) showUsage();
+  if (params.version) showVersion();
 
-  const logger = getLogger(params.logLevel)
-  const previewUrl = `http://localhost:${params.port}`
+  const logger = getLogger(params.logLevel);
+  const previewUrl = `http://localhost:${params.port}`;
 
-  console.log('Root Directory :', rootDir)
-  console.log('Default File   :', params.filepath)
-  console.log('Extensions     :', params.extensions.join(', '))
-  console.log('Template File  :', params.template)
-  console.log(`Preview URL    : ${previewUrl}`)
+  console.log("Root Directory :", rootDir);
+  console.log("Default File   :", params.filepath);
+  console.log("Extensions     :", params.extensions.join(", "));
+  console.log("Template File  :", params.template);
+  console.log(`Preview URL    : ${previewUrl}`);
 
-  const app = express()
-  expressWs(app)
-  app.get('/', (_req, res) => res.redirect(params.filepath))
-  app.ws('/ws', WebSocketHandler(logger))
+  const app = express();
+  expressWs(app);
+  app.get("/", (_req, res) => res.redirect(params.filepath));
+  app.ws("/ws", WebSocketHandler(logger));
   params.extensions.forEach((ext) => {
-    app.get(new RegExp(`^/.+\.${ext}$`), MarkdownHandler(params.template))
-  })
-  app.use(express.static(rootDir, { index: false }))
-  app.use(express.static(staticDir, { index: false }))
-  app.use(serveIndex(rootDir, { icons: true, view: 'details' }))
-  app.listen(params.port)
+    app.get(new RegExp(`^/.+\.${ext}$`), MarkdownHandler(params.template));
+  });
+  app.use(express.static(rootDir, { index: false }));
+  app.use(express.static(staticDir, { index: false }));
+  app.use(serveIndex(rootDir, { icons: true, view: "details" }));
+  app.listen(params.port);
 
   if (!params.noOpener) {
-    opener(previewUrl)
+    opener(previewUrl);
   }
-
 } catch (err) {
-  console.error(err.message)
-  showUsage(true)
+  console.error(err.message);
+  showUsage(true);
 }

package/src/lib/directory.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
-const path = require('path');
+const path = require("path");
 
 const rootDir = process.cwd();
-const projectDir = path.resolve(__dirname, '..', '..');
-const staticDir = path.resolve(projectDir, 'static');
-const templateDir = path.resolve(projectDir, 'template');
+const projectDir = path.resolve(__dirname, "..", "..");
+const staticDir = path.resolve(projectDir, "static");
+const templateDir = path.resolve(projectDir, "template");
 
 module.exports = {
   rootDir,

package/src/lib/file.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
+const fs = require("fs");
 
 const existsFile = (filepath) => {
   try {

package/src/lib/file_watcher.js

@@ -1,59 +1,59 @@
-'use strict'
+"use strict";
 
-const fs = require('fs')
-const path = require('path')
-const { rootDir } = require('./directory')
+const fs = require("fs");
+const path = require("path");
+const { rootDir } = require("./directory");
 
 class FileWatcher {
-  constructor (logger) {
-    this.logger = logger
-    this._target = {}
+  constructor(logger) {
+    this.logger = logger;
+    this._target = {};
     setInterval(() => {
       Object.keys(this._target).forEach((filepath) => {
         try {
-          const fileinfo = this._target[filepath]
-          const currentLastModified = this.getFileLastModified(filepath)
+          const fileinfo = this._target[filepath];
+          const currentLastModified = this.getFileLastModified(filepath);
           if (fileinfo.lastModified !== currentLastModified) {
-            this.logger.info('File update:', path.resolve(rootDir, filepath))
-            fileinfo.lastModified = currentLastModified
+            this.logger.info("File update:", path.resolve(rootDir, filepath));
+            fileinfo.lastModified = currentLastModified;
             if (this._onFileChanged != null) {
-              this._onFileChanged(this.getFileInfo(filepath))
+              this._onFileChanged(this.getFileInfo(filepath));
             }
           }
         } catch (err) {
-          console.error(err)
+          console.error(err);
         }
-      })
-    }, 250)
+      });
+    }, 250 /* check 4 times per second */);
   }
 
-  onFileChanged (callback) {
-    this._onFileChanged = callback
+  onFileChanged(callback) {
+    this._onFileChanged = callback;
   }
 
-  addTargetFile (filepath) {
-    if (this._target[filepath] != null) return
-    this.logger.debug('Add watch target:', filepath)
+  addTargetFile(filepath) {
+    if (this._target[filepath] != null) return;
+    this.logger.debug("Add watch target:", filepath);
     this._target[filepath] = {
       lastModified: this.getFileLastModified(filepath),
-    }
+    };
   }
 
-  removeTargetFile (filepath) {
-    if (this._target[filepath] == null) return
-    this.logger.debug('Remove watch target:', filepath)
-    delete this._target[filepath]
+  removeTargetFile(filepath) {
+    if (this._target[filepath] == null) return;
+    this.logger.debug("Remove watch target:", filepath);
+    delete this._target[filepath];
   }
 
-  getFileLastModified (filepath) {
-    return fs.statSync(path.resolve(rootDir, filepath)).mtimeMs
+  getFileLastModified(filepath) {
+    return fs.statSync(path.resolve(rootDir, filepath)).mtimeMs;
   }
 
-  getFileInfo (filepath) {
-    const absolutePath = path.resolve(rootDir, filepath)
-    const markdown = fs.readFileSync(absolutePath, 'utf-8')
-    return { filepath, markdown }
+  getFileInfo(filepath) {
+    const absolutePath = path.resolve(rootDir, filepath);
+    const markdown = fs.readFileSync(absolutePath, "utf-8");
+    return { filepath, markdown };
   }
 }
 
-module.exports = FileWatcher
+module.exports = FileWatcher;

package/src/lib/logger.js

@@ -1,18 +1,18 @@
-const log4js = require('log4js');
+const log4js = require("log4js");
 
 const getLogger = (logLevel) => {
   log4js.configure({
     appenders: {
       console: {
-        type: 'console',
+        type: "console",
         layout: {
-          type: 'basic',
+          type: "basic",
         },
       },
     },
     categories: {
       default: {
-        appenders: ['console'],
+        appenders: ["console"],
         level: logLevel,
       },
     },

package/src/lib/params.js

@@ -1,8 +1,8 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const { rootDir, templateDir } = require('./directory');
-const { existsFile } = require('./file');
+const path = require("path");
+const { rootDir, templateDir } = require("./directory");
+const { existsFile } = require("./file");
 
 class Params {
   constructor(env, argv) {
@@ -21,11 +21,11 @@ class Params {
 
   getDefaultParams() {
     return {
-      filepath: 'README.md',
-      extensions: 'md, markdown',
-      template: 'default',
+      filepath: "README.md",
+      extensions: "md, markdown",
+      template: "default",
       port: 34567,
-      logLevel: 'info',
+      logLevel: "info",
       noOpener: false,
       version: false,
       help: false,
@@ -47,7 +47,7 @@ class Params {
       params.port = env.MARKDOWN_PREVIEW_PORT;
     }
     if (env.MARKDOWN_PREVIEW_NO_OPENER) {
-      params.noOpener = env.MARKDOWN_PREVIEW_NO_OPENER === 'true';
+      params.noOpener = env.MARKDOWN_PREVIEW_NO_OPENER === "true";
     }
     if (env.MARKDOWN_PREVIEW_LOG_LEVEL) {
       params.logLevel = env.MARKDOWN_PREVIEW_LOG_LEVEL;
@@ -59,40 +59,40 @@ class Params {
     const params = {};
     for (let i = 0; i < argv.length; i++) {
       switch (argv[i]) {
-        case '-f':
-        case '--file':
+        case "-f":
+        case "--file":
           params.filepath = argv[i + 1];
           i++;
           break;
-        case '-e':
-        case '--extensions':
+        case "-e":
+        case "--extensions":
           params.extensions = argv[i + 1];
           i++;
           break;
-        case '-t':
-        case '--template':
+        case "-t":
+        case "--template":
           params.template = argv[i + 1];
           i++;
           break;
-        case '-p':
-        case '--port':
+        case "-p":
+        case "--port":
           params.port = argv[i + 1];
           i++;
           break;
-        case '-l':
-        case '--log-level':
+        case "-l":
+        case "--log-level":
           params.logLevel = argv[i + 1];
           i++;
           break;
-        case '--no-opener':
+        case "--no-opener":
           params.noOpener = true;
           break;
-        case '-v':
-        case '--version':
+        case "-v":
+        case "--version":
           params.version = true;
           break;
-        case '-h':
-        case '--help':
+        case "-h":
+        case "--help":
           params.help = true;
           break;
         default:
@@ -102,7 +102,6 @@ class Params {
     return params;
   }
 
-
   checkFilepath(filepath) {
     if (path.isAbsolute(filepath)) {
       throw new Error(`Absolute path is prohibited: ${filepath}`);
@@ -117,7 +116,7 @@ class Params {
   }
 
   checkExtensions(extensions) {
-    const extensionList = extensions.split(',').map(ext => ext.trim());
+    const extensionList = extensions.split(",").map((ext) => ext.trim());
     if (extensionList.length === 0) {
       throw new Error(`Extensions is empty: ${extensions}`);
     }
@@ -139,11 +138,10 @@ class Params {
       return intPort;
     }
     throw new Error(`Invalid port: ${port}`);
-  };
-
+  }
 
   checkLogLevel(logLevel) {
-    if (['trace', 'debug', 'info', 'warn', 'error', 'fatal'].includes(logLevel)) {
+    if (["trace", "debug", "info", "warn", "error", "fatal"].includes(logLevel)) {
       return logLevel;
     }
     throw new Error(`Invalid log level: ${logLevel}`);

package/src/lib/params.test.js

@@ -1,39 +1,43 @@
-const path = require('path');
-const { projectDir } = require('./directory');
-const Params = require('./params');
+const path = require("path");
+const { projectDir } = require("./directory");
+const Params = require("./params");
 
 const DEFAULT_VALUES = {
-  filepath: 'README.md',
-  extensions: ['md', 'markdown'],
-  template: path.resolve(projectDir, 'template/default.html'),
+  filepath: "README.md",
+  extensions: ["md", "markdown"],
+  template: path.resolve(projectDir, "template/default.html"),
   port: 34567,
-  logLevel: 'info',
+  logLevel: "info",
   noOpener: false,
   version: false,
   help: false,
 };
 
-describe('Params', () => {
-  it('not specify', () => {
+describe("Params", () => {
+  it("not specify", () => {
     const params = new Params({}, []);
     expect(params._params).toEqual(DEFAULT_VALUES);
   });
 
-  it('specify all short argument', () => {
+  it("specify all short argument", () => {
     const argv = [
-      '-f', 'test/markdown/markdown1.md',
-      '-e', 'ext1,ext2',
-      '-t', 'test/template/template1.html',
-      '-p', '100',
-      '-v',
-      '-h',
+      "-f",
+      "test/markdown/markdown1.md",
+      "-e",
+      "ext1,ext2",
+      "-t",
+      "test/template/template1.html",
+      "-p",
+      "100",
+      "-v",
+      "-h",
     ];
     const expectParams = {
-      filepath: 'test/markdown/markdown1.md',
-      extensions: ['ext1', 'ext2'],
-      template: path.resolve(projectDir, 'test/template/template1.html'),
+      filepath: "test/markdown/markdown1.md",
+      extensions: ["ext1", "ext2"],
+      template: path.resolve(projectDir, "test/template/template1.html"),
       port: 100,
-      logLevel: 'info',
+      logLevel: "info",
       noOpener: false,
       version: true,
       help: true,
@@ -42,23 +46,28 @@ describe('Params', () => {
     expect(params._params).toEqual(expectParams);
   });
 
-  it('specify all long argument', () => {
+  it("specify all long argument", () => {
     const argv = [
-      '--file', 'test/markdown/markdown1.md',
-      '--extensions', 'ext1,ext2',
-      '--template', 'test/template/template1.html',
-      '--port', '100',
-      '--log-level', 'trace',
-      '--no-opener',
-      '--version',
-      '--help',
+      "--file",
+      "test/markdown/markdown1.md",
+      "--extensions",
+      "ext1,ext2",
+      "--template",
+      "test/template/template1.html",
+      "--port",
+      "100",
+      "--log-level",
+      "trace",
+      "--no-opener",
+      "--version",
+      "--help",
     ];
     const expectParams = {
-      filepath: 'test/markdown/markdown1.md',
-      extensions: ['ext1', 'ext2'],
-      template: path.resolve(projectDir, 'test/template/template1.html'),
+      filepath: "test/markdown/markdown1.md",
+      extensions: ["ext1", "ext2"],
+      template: path.resolve(projectDir, "test/template/template1.html"),
       port: 100,
-      logLevel: 'trace',
+      logLevel: "trace",
       noOpener: true,
       version: true,
       help: true,
@@ -67,21 +76,21 @@ describe('Params', () => {
     expect(params._params).toEqual(expectParams);
   });
 
-  it('specify all environment variable', () => {
+  it("specify all environment variable", () => {
     const env = {
-      MARKDOWN_PREVIEW_FILE: 'test/markdown/markdown1.md',
-      MARKDOWN_PREVIEW_EXTENSIONS: 'ext1, ext2',
-      MARKDOWN_PREVIEW_TEMPLATE: 'test/template/template1.html',
-      MARKDOWN_PREVIEW_PORT: '100',
-      MARKDOWN_PREVIEW_LOG_LEVEL: 'trace',
-      MARKDOWN_PREVIEW_NO_OPENER: 'true',
+      MARKDOWN_PREVIEW_FILE: "test/markdown/markdown1.md",
+      MARKDOWN_PREVIEW_EXTENSIONS: "ext1, ext2",
+      MARKDOWN_PREVIEW_TEMPLATE: "test/template/template1.html",
+      MARKDOWN_PREVIEW_PORT: "100",
+      MARKDOWN_PREVIEW_LOG_LEVEL: "trace",
+      MARKDOWN_PREVIEW_NO_OPENER: "true",
     };
     const expectParams = {
-      filepath: 'test/markdown/markdown1.md',
-      extensions: ['ext1', 'ext2'],
-      template: path.resolve(projectDir, 'test/template/template1.html'),
+      filepath: "test/markdown/markdown1.md",
+      extensions: ["ext1", "ext2"],
+      template: path.resolve(projectDir, "test/template/template1.html"),
       port: 100,
-      logLevel: 'trace',
+      logLevel: "trace",
       noOpener: true,
       version: false,
       help: false,

package/src/lib/show.js

@@ -1,5 +1,6 @@
-'use strict';
-const pkg = require('../../package');
+"use strict";
+
+const pkg = require("../../package");
 
 const showUsage = (error = false) => {
   const usage = `

package/src/lib/socket_manager.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 class SocketManager {
   constructor() {
@@ -14,9 +14,7 @@ class SocketManager {
   }
 
   getSockets(filepath) {
-    return this._sockets
-               .filter(({ filepath: fp }) => fp === filepath)
-               .map(s => s.socket);
+    return this._sockets.filter(({ filepath: fp }) => fp === filepath).map((s) => s.socket);
   }
 
   countSocket(filepath = null) {

package/src/lib/socket_manager.test.js

@@ -1,18 +1,18 @@
-const SocketManager = require('./socket_manager');
+const SocketManager = require("./socket_manager");
 
-const dummySocket1 = { name: 'socket1' };
-const dummySocket2 = { name: 'socket2' };
-const dummySocket3 = { name: 'socket3' };
+const dummySocket1 = { name: "socket1" };
+const dummySocket2 = { name: "socket2" };
+const dummySocket3 = { name: "socket3" };
 
-const dummyFilepath1 = 'file1';
-const dummyFilepath2 = 'file2';
+const dummyFilepath1 = "file1";
+const dummyFilepath2 = "file2";
 
 const dummyInfo1 = { socket: dummySocket1, filepath: dummyFilepath1 };
 const dummyInfo2 = { socket: dummySocket2, filepath: dummyFilepath2 };
 const dummyInfo3 = { socket: dummySocket3, filepath: dummyFilepath2 };
 
-describe('SocketManager', () => {
-  it('works normally', () => {
+describe("SocketManager", () => {
+  it("works normally", () => {
     const socketManager = new SocketManager();
     expect(socketManager._sockets).toEqual([]);
 
@@ -31,7 +31,6 @@ describe('SocketManager', () => {
     expect(socketManager.countSocket(dummyFilepath1)).toEqual(1);
     expect(socketManager.countSocket(dummyFilepath2)).toEqual(2);
 
-
     socketManager.removeSocket(dummySocket2);
     expect(socketManager._sockets).toEqual([dummyInfo1, dummyInfo3]);
 

package/src/markdown.js

@@ -1,16 +1,16 @@
-'use strict'
+"use strict";
 
-const path = require('path')
-const { rootDir } = require('./lib/directory')
-const { existsFile } = require('./lib/file')
+const path = require("path");
+const { rootDir } = require("./lib/directory");
+const { existsFile } = require("./lib/file");
 
 const MarkdownHandler = (template) => (req, res, next) => {
-  const filepath = path.resolve(rootDir, decodeURIComponent(req.path.substr(1)))
+  const filepath = path.resolve(rootDir, decodeURIComponent(req.path.substr(1)));
   if (existsFile(filepath)) {
-    res.sendFile(template)
+    res.sendFile(template);
   } else {
-    next()
+    next();
   }
-}
+};
 
-module.exports = MarkdownHandler
+module.exports = MarkdownHandler;

package/src/websocket.js

@@ -1,9 +1,9 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const FileWatcher = require('./lib/file_watcher');
-const SocketManager = require('./lib/socket_manager');
-const { rootDir } = require('./lib/directory');
+const path = require("path");
+const FileWatcher = require("./lib/file_watcher");
+const SocketManager = require("./lib/socket_manager");
+const { rootDir } = require("./lib/directory");
 
 const WebSocketHandler = (logger) => {
   let socketSeqNo = 1;
@@ -18,13 +18,13 @@ const WebSocketHandler = (logger) => {
   return (ws, req) => {
     const wsSeqNo = socketSeqNo++;
     try {
-      logger.debug('WebSocket connected:', wsSeqNo);
+      logger.debug("WebSocket connected:", wsSeqNo);
       const filepath = path.resolve(rootDir, decodeURIComponent(req.query.path.substr(1)));
       fileWatcher.addTargetFile(filepath);
       socketManager.addSocket(ws, filepath);
 
-      ws.on('close', () => {
-        logger.debug('WebSocket close:', wsSeqNo);
+      ws.on("close", () => {
+        logger.debug("WebSocket close:", wsSeqNo);
         socketManager.removeSocket(ws);
         if (socketManager.countSocket(filepath) === 0) {
           fileWatcher.removeTargetFile(filepath);

package/template/default-dark.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Markdown Preview</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark-dimmed.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
+</head>
+<body style="margin: 0 auto; max-width: 882px; padding: 32px; background-color: #0d1117;">
+  <div class="markdown-body">
+    <div id="content"></div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.1.1/marked.min.js"></script>
+  <script src="/markdown-preview-websocket.js"></script>
+  <script type="text/javascript">
+    connectMarkdownPreview(({ markdown }) => {
+      document.getElementById('content').innerHTML = marked.parse(markdown);
+      document.querySelectorAll('pre code').forEach(block => hljs.highlightBlock(block));
+    });
+  </script>
+</body>
+</html>

package/template/default.html

@@ -4,15 +4,15 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Markdown Preview</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css">
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/github.min.css">
-  <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
 </head>
 <body style="margin: 0 auto; max-width: 882px; padding: 32px;">
   <div class="markdown-body">
     <div id="content"></div>
   </div>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.1.1/marked.min.js"></script>
   <script src="/markdown-preview-websocket.js"></script>
   <script type="text/javascript">
     connectMarkdownPreview(({ markdown }) => {