tona-vite 0.0.1

package/README.md

@@ -0,0 +1,50 @@
+# vite-plugin-tona
+
+Vite plugin for Tona themes - combines dynamic script extension and shared assets serving.
+
+## Installation
+
+```bash
+npm install tona-vite
+```
+
+## Usage
+
+```ts
+import tona from 'tona-vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    tona()
+  ]
+})
+```
+
+## Features
+
+- Automatically detects main.ts or main.js files and replaces script src in HTML
+- Serves shared assets from public directory during development
+- Works in both development and build modes
+
+## Options
+
+```ts
+interface TonaPluginOptions {
+  /**
+   * Default script source path when neither main.ts nor main.js exists
+   * @default '/src/main.js'
+   */
+  defaultScriptSrc?: string
+  /**
+   * Base directory to resolve main files from
+   * @default process.cwd()
+   */
+  baseDir?: string
+  /**
+   * The path to the shared assets directory
+   * @default path.join(__dirname, '..', 'public')
+   */
+  sharedAssetsPath?: string
+}
+```

package/dist/index.cjs

@@ -0,0 +1,94 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let node_fs = require("node:fs");
+node_fs = __toESM(node_fs);
+let node_path = require("node:path");
+node_path = __toESM(node_path);
+let node_process = require("node:process");
+node_process = __toESM(node_process);
+let node_url = require("node:url");
+
+//#region src/index.ts
+const __dirname$1 = node_path.default.dirname((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
+/**
+* Vite plugin for Tona themes - combines dynamic script extension and shared assets serving
+*/
+function tona(options = {}) {
+	const { defaultScriptSrc = "/src/main.js", baseDir = node_process.default.cwd(), sharedAssetsPath } = options;
+	const assetsPath = sharedAssetsPath || node_path.default.join(__dirname$1, "..", "public");
+	return {
+		name: "vite-plugin-tona",
+		transformIndexHtml(html) {
+			const jsPath = node_path.default.resolve(baseDir, "src/main.js");
+			const tsPath = node_path.default.resolve(baseDir, "src/main.ts");
+			let scriptSrc = defaultScriptSrc;
+			if (node_fs.default.existsSync(tsPath)) scriptSrc = "/src/main.ts";
+			else if (node_fs.default.existsSync(jsPath)) scriptSrc = "/src/main.js";
+			return html.replace(/<script type="module" src="[^"]*"><\/script>/, `<script type="module" src="${scriptSrc}"><\/script>`);
+		},
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				let filePath = null;
+				if (req.url?.startsWith("/public/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = node_path.default.join(assetsPath, urlWithoutQuery.replace("/public/", ""));
+				} else if (req.url?.startsWith("/templates/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = node_path.default.join(assetsPath, "templates", urlWithoutQuery.replace("/templates/", ""));
+				} else if (req.url?.startsWith("/js/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = node_path.default.join(assetsPath, "js", urlWithoutQuery.replace("/js/", ""));
+				} else if (req.url?.startsWith("/css/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = node_path.default.join(assetsPath, "css", urlWithoutQuery.replace("/css/", ""));
+				} else if (req.url?.startsWith("/images/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = node_path.default.join(assetsPath, "images", urlWithoutQuery.replace("/images/", ""));
+				} else if (req.url === "/" || req.url?.startsWith("/?") || req.url === "/index.html" || req.url?.startsWith("/index.html?")) filePath = node_path.default.join(assetsPath, "index.html");
+				if (filePath && node_fs.default.existsSync(filePath)) {
+					const ext = node_path.default.extname(filePath).toLowerCase();
+					const contentType = {
+						".html": "text/html",
+						".css": "text/css",
+						".js": "application/javascript",
+						".json": "application/json",
+						".png": "image/png",
+						".jpg": "image/jpeg",
+						".jpeg": "image/jpeg",
+						".gif": "image/gif",
+						".svg": "image/svg+xml",
+						".ico": "image/x-icon"
+					}[ext] || "application/octet-stream";
+					res.setHeader("Content-Type", contentType);
+					node_fs.default.createReadStream(filePath).pipe(res);
+					return;
+				}
+				next();
+			});
+		}
+	};
+}
+
+//#endregion
+module.exports = tona;

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import { Plugin } from "vite";
+
+//#region src/index.d.ts
+interface TonaPluginOptions {
+  /**
+   * Default script source path when neither main.ts nor main.js exists
+   * @default '/src/main.js'
+   */
+  defaultScriptSrc?: string;
+  /**
+   * Base directory to resolve main files from
+   * @default process.cwd()
+   */
+  baseDir?: string;
+  /**
+   * The path to the shared assets directory
+   * @default path.join(__dirname, '..', 'public')
+   */
+  sharedAssetsPath?: string;
+}
+/**
+ * Vite plugin for Tona themes - combines dynamic script extension and shared assets serving
+ */
+declare function tona(options?: TonaPluginOptions): Plugin;
+//#endregion
+export { TonaPluginOptions, tona as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;UAYiB,iBAAA;;AAAjB;AAgBC;;;;;;;;;;;;;;;;;iBAKuB,IAAA,WAAc,oBAAyB"}

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import { Plugin } from "vite";
+
+//#region src/index.d.ts
+interface TonaPluginOptions {
+  /**
+   * Default script source path when neither main.ts nor main.js exists
+   * @default '/src/main.js'
+   */
+  defaultScriptSrc?: string;
+  /**
+   * Base directory to resolve main files from
+   * @default process.cwd()
+   */
+  baseDir?: string;
+  /**
+   * The path to the shared assets directory
+   * @default path.join(__dirname, '..', 'public')
+   */
+  sharedAssetsPath?: string;
+}
+/**
+ * Vite plugin for Tona themes - combines dynamic script extension and shared assets serving
+ */
+declare function tona(options?: TonaPluginOptions): Plugin;
+//#endregion
+export { TonaPluginOptions, tona as default };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;UAYiB,iBAAA;;AAAjB;AAgBC;;;;;;;;;;;;;;;;;iBAKuB,IAAA,WAAc,oBAAyB"}

package/dist/index.mjs

@@ -0,0 +1,69 @@
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { fileURLToPath } from "node:url";
+
+//#region src/index.ts
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+/**
+* Vite plugin for Tona themes - combines dynamic script extension and shared assets serving
+*/
+function tona(options = {}) {
+	const { defaultScriptSrc = "/src/main.js", baseDir = process.cwd(), sharedAssetsPath } = options;
+	const assetsPath = sharedAssetsPath || path.join(__dirname, "..", "public");
+	return {
+		name: "vite-plugin-tona",
+		transformIndexHtml(html) {
+			const jsPath = path.resolve(baseDir, "src/main.js");
+			const tsPath = path.resolve(baseDir, "src/main.ts");
+			let scriptSrc = defaultScriptSrc;
+			if (fs.existsSync(tsPath)) scriptSrc = "/src/main.ts";
+			else if (fs.existsSync(jsPath)) scriptSrc = "/src/main.js";
+			return html.replace(/<script type="module" src="[^"]*"><\/script>/, `<script type="module" src="${scriptSrc}"><\/script>`);
+		},
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				let filePath = null;
+				if (req.url?.startsWith("/public/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = path.join(assetsPath, urlWithoutQuery.replace("/public/", ""));
+				} else if (req.url?.startsWith("/templates/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = path.join(assetsPath, "templates", urlWithoutQuery.replace("/templates/", ""));
+				} else if (req.url?.startsWith("/js/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = path.join(assetsPath, "js", urlWithoutQuery.replace("/js/", ""));
+				} else if (req.url?.startsWith("/css/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = path.join(assetsPath, "css", urlWithoutQuery.replace("/css/", ""));
+				} else if (req.url?.startsWith("/images/")) {
+					const urlWithoutQuery = req.url.split("?")[0];
+					filePath = path.join(assetsPath, "images", urlWithoutQuery.replace("/images/", ""));
+				} else if (req.url === "/" || req.url?.startsWith("/?") || req.url === "/index.html" || req.url?.startsWith("/index.html?")) filePath = path.join(assetsPath, "index.html");
+				if (filePath && fs.existsSync(filePath)) {
+					const ext = path.extname(filePath).toLowerCase();
+					const contentType = {
+						".html": "text/html",
+						".css": "text/css",
+						".js": "application/javascript",
+						".json": "application/json",
+						".png": "image/png",
+						".jpg": "image/jpeg",
+						".jpeg": "image/jpeg",
+						".gif": "image/gif",
+						".svg": "image/svg+xml",
+						".ico": "image/x-icon"
+					}[ext] || "application/octet-stream";
+					res.setHeader("Content-Type", contentType);
+					fs.createReadStream(filePath).pipe(res);
+					return;
+				}
+				next();
+			});
+		}
+	};
+}
+
+//#endregion
+export { tona as default };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["filePath: string | null"],"sources":["../src/index.ts"],"sourcesContent":["import fs from 'node:fs'\nimport path from 'node:path'\nimport process from 'node:process'\nimport { fileURLToPath } from 'node:url'\nimport type { Plugin, ViteDevServer } from 'vite'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\ninterface MimeTypes {\n  [key: string]: string\n}\n\nexport interface TonaPluginOptions {\n  /**\n   * Default script source path when neither main.ts nor main.js exists\n   * @default '/src/main.js'\n   */\n  defaultScriptSrc?: string\n  /**\n   * Base directory to resolve main files from\n   * @default process.cwd()\n   */\n  baseDir?: string\n  /**\n   * The path to the shared assets directory\n   * @default path.join(__dirname, '..', 'public')\n   */\n  sharedAssetsPath?: string\n}\n\n/**\n * Vite plugin for Tona themes - combines dynamic script extension and shared assets serving\n */\nexport default function tona(options: TonaPluginOptions = {}): Plugin {\n  const {\n    defaultScriptSrc = '/src/main.js',\n    baseDir = process.cwd(),\n    sharedAssetsPath,\n  } = options\n\n  // Default path to shared assets\n  const assetsPath = sharedAssetsPath || path.join(__dirname, '..', 'public')\n\n  return {\n    name: 'vite-plugin-tona',\n\n    transformIndexHtml(html) {\n      // Dynamic script extension: check main.ts or main.js exists\n      const jsPath = path.resolve(baseDir, 'src/main.js')\n      const tsPath = path.resolve(baseDir, 'src/main.ts')\n      let scriptSrc = defaultScriptSrc\n\n      if (fs.existsSync(tsPath)) {\n        scriptSrc = '/src/main.ts'\n      } else if (fs.existsSync(jsPath)) {\n        scriptSrc = '/src/main.js'\n      }\n\n      // Replace script src in HTML\n      return html.replace(\n        /<script type=\"module\" src=\"[^\"]*\"><\\/script>/,\n        `<script type=\"module\" src=\"${scriptSrc}\"></script>`,\n      )\n    },\n\n    configureServer(server: ViteDevServer) {\n      // Serve static files from shared-assets/public directory\n      server.middlewares.use((req, res, next) => {\n        let filePath: string | null = null\n\n        // Check if the request is for a file in /public (which will be served from shared-assets)\n        if (req.url?.startsWith('/public/')) {\n          const urlWithoutQuery = req.url.split('?')[0]\n          filePath = path.join(\n            assetsPath,\n            urlWithoutQuery!.replace('/public/', ''),\n          )\n        } else if (req.url?.startsWith('/templates/')) {\n          const urlWithoutQuery = req.url.split('?')[0]\n          filePath = path.join(\n            assetsPath,\n            'templates',\n            urlWithoutQuery!.replace('/templates/', ''),\n          )\n        } else if (req.url?.startsWith('/js/')) {\n          const urlWithoutQuery = req.url.split('?')[0]\n          filePath = path.join(\n            assetsPath,\n            'js',\n            urlWithoutQuery!.replace('/js/', ''),\n          )\n        } else if (req.url?.startsWith('/css/')) {\n          const urlWithoutQuery = req.url.split('?')[0]\n          filePath = path.join(\n            assetsPath,\n            'css',\n            urlWithoutQuery!.replace('/css/', ''),\n          )\n        } else if (req.url?.startsWith('/images/')) {\n          const urlWithoutQuery = req.url.split('?')[0]\n          filePath = path.join(\n            assetsPath,\n            'images',\n            urlWithoutQuery!.replace('/images/', ''),\n          )\n        } else if (\n          req.url === '/' ||\n          req.url?.startsWith('/?') ||\n          req.url === '/index.html' ||\n          req.url?.startsWith('/index.html?')\n        ) {\n          filePath = path.join(assetsPath, 'index.html')\n        }\n\n        // Check if file exists\n        if (filePath && fs.existsSync(filePath)) {\n          // Set appropriate content type\n          const ext = path.extname(filePath).toLowerCase()\n          const mimeTypes: MimeTypes = {\n            '.html': 'text/html',\n            '.css': 'text/css',\n            '.js': 'application/javascript',\n            '.json': 'application/json',\n            '.png': 'image/png',\n            '.jpg': 'image/jpeg',\n            '.jpeg': 'image/jpeg',\n            '.gif': 'image/gif',\n            '.svg': 'image/svg+xml',\n            '.ico': 'image/x-icon',\n          }\n\n          const contentType = mimeTypes[ext] || 'application/octet-stream'\n          res.setHeader('Content-Type', contentType)\n\n          // Read and serve the file\n          const fileStream = fs.createReadStream(filePath)\n          fileStream.pipe(res)\n          return\n        }\n\n        // If not handled, pass to next middleware\n        next()\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,KAAK,QAAQ,cAAc,OAAO,KAAK,IAAI,CAAC;;;;AA2B9D,SAAwB,KAAK,UAA6B,EAAE,EAAU;CACpE,MAAM,EACJ,mBAAmB,gBACnB,UAAU,QAAQ,KAAK,EACvB,qBACE;CAGJ,MAAM,aAAa,oBAAoB,KAAK,KAAK,WAAW,MAAM,SAAS;AAE3E,QAAO;EACL,MAAM;EAEN,mBAAmB,MAAM;GAEvB,MAAM,SAAS,KAAK,QAAQ,SAAS,cAAc;GACnD,MAAM,SAAS,KAAK,QAAQ,SAAS,cAAc;GACnD,IAAI,YAAY;AAEhB,OAAI,GAAG,WAAW,OAAO,CACvB,aAAY;YACH,GAAG,WAAW,OAAO,CAC9B,aAAY;AAId,UAAO,KAAK,QACV,gDACA,8BAA8B,UAAU,cACzC;;EAGH,gBAAgB,QAAuB;AAErC,UAAO,YAAY,KAAK,KAAK,KAAK,SAAS;IACzC,IAAIA,WAA0B;AAG9B,QAAI,IAAI,KAAK,WAAW,WAAW,EAAE;KACnC,MAAM,kBAAkB,IAAI,IAAI,MAAM,IAAI,CAAC;AAC3C,gBAAW,KAAK,KACd,YACA,gBAAiB,QAAQ,YAAY,GAAG,CACzC;eACQ,IAAI,KAAK,WAAW,cAAc,EAAE;KAC7C,MAAM,kBAAkB,IAAI,IAAI,MAAM,IAAI,CAAC;AAC3C,gBAAW,KAAK,KACd,YACA,aACA,gBAAiB,QAAQ,eAAe,GAAG,CAC5C;eACQ,IAAI,KAAK,WAAW,OAAO,EAAE;KACtC,MAAM,kBAAkB,IAAI,IAAI,MAAM,IAAI,CAAC;AAC3C,gBAAW,KAAK,KACd,YACA,MACA,gBAAiB,QAAQ,QAAQ,GAAG,CACrC;eACQ,IAAI,KAAK,WAAW,QAAQ,EAAE;KACvC,MAAM,kBAAkB,IAAI,IAAI,MAAM,IAAI,CAAC;AAC3C,gBAAW,KAAK,KACd,YACA,OACA,gBAAiB,QAAQ,SAAS,GAAG,CACtC;eACQ,IAAI,KAAK,WAAW,WAAW,EAAE;KAC1C,MAAM,kBAAkB,IAAI,IAAI,MAAM,IAAI,CAAC;AAC3C,gBAAW,KAAK,KACd,YACA,UACA,gBAAiB,QAAQ,YAAY,GAAG,CACzC;eAED,IAAI,QAAQ,OACZ,IAAI,KAAK,WAAW,KAAK,IACzB,IAAI,QAAQ,iBACZ,IAAI,KAAK,WAAW,eAAe,CAEnC,YAAW,KAAK,KAAK,YAAY,aAAa;AAIhD,QAAI,YAAY,GAAG,WAAW,SAAS,EAAE;KAEvC,MAAM,MAAM,KAAK,QAAQ,SAAS,CAAC,aAAa;KAchD,MAAM,cAbuB;MAC3B,SAAS;MACT,QAAQ;MACR,OAAO;MACP,SAAS;MACT,QAAQ;MACR,QAAQ;MACR,SAAS;MACT,QAAQ;MACR,QAAQ;MACR,QAAQ;MACT,CAE6B,QAAQ;AACtC,SAAI,UAAU,gBAAgB,YAAY;AAI1C,KADmB,GAAG,iBAAiB,SAAS,CACrC,KAAK,IAAI;AACpB;;AAIF,UAAM;KACN;;EAEL"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "tona-vite",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Vite plugin for Tona themes - combines dynamic script extension and shared assets serving",
+  "author": {
+    "name": "guangzan",
+    "url": "https://www.cnblogs.com/guangzan",
+    "email": "guangzan1999@outlook.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/cnbloglabs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cnbloglabs/tona.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cnbloglabs/tona/issues"
+  },
+  "keywords": [
+    "vite",
+    "plugin",
+    "dynamic-script",
+    "shared-assets",
+    "博客园"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "public"
+  ],
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "vite": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "tsdown": "catalog:",
+    "vitest": "catalog:"
+  }
+}

package/public/css/atom-one-dark.css

@@ -0,0 +1,96 @@
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

package/public/css/atom-one-light.css

@@ -0,0 +1,96 @@
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #383a42;
+  background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #a626a4;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e45649;
+}
+
+.hljs-literal {
+  color: #0184bb;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #c18401;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #986801;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #4078f2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}