styling

docpress.json

@@ -1,8 +1,8 @@
 {
   "markdown": {
     "plugins": {
-        "code-include": {
-        }
+      "code-include": {}
     }
-  }
-}
+  },
+  "css": ["docs/docpress.css", "docs/github-dark-dimmed.css"]
+}

docs/docpress.css

@@ -0,0 +1,26 @@
+.title, h1, h2, h3, h4, h5, .link.title.link-index {
+    color: #531414!important;
+}
+
+.link.title {
+    color: black!important;
+}
+
+.toc-menu .link.-active, .toc-menu .hlink.-active {
+    box-shadow: inset -2px 0 #7c2828!important;
+}
+
+ul.heading-list .hlink, ul.heading-list .hlink:visited {
+    color: #414141!important;
+}
+
+.menu-toggle:hover, .footer-nav a:hover, .footer-nav a:hover:after, .footer-nav a:hover:before {
+    color: #7c2828!important;
+}
+
+.code-file-label {
+    background: #dcd9d9!important;
+    color: #3a0909!important;
+    right: 0px;
+    opacity: 1!important;
+}

docs/github-dark-dimmed.css

@@ -0,0 +1,130 @@
+/*!
+  Theme: GitHub Dark Dimmed
+  Description: Dark dimmed theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
+*/
+
+.hljs, pre {
+  color: #adbac7!important;
+  background: #22272e!important;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_,
+.pl-k {
+  /* prettylights-syntax-keyword */
+  color: #f47067!important;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_i,
+.pl-s {
+  /* prettylights-syntax-entity */
+  color: #dcbdfb!important;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.pl-e {
+  /* prettylights-syntax-constant */
+  color: #6cb6ff!important;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string,
+.pl-s {
+  /* prettylights-syntax-string */
+  color: #96d0ff!important;
+}
+
+.hljs-built_in,
+.hljs-symbol,
+.pl-c1 {
+  /* prettylights-syntax-variable */
+  color: #f69d50!important;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula,
+.pl-c {
+  /* prettylights-syntax-comment */
+  color: #768390!important;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #8ddb8c!important;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #adbac7!important;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #316dca!important;
+  font-weight: bold!important;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #eac55f!important;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #adbac7!important;
+  font-style: italic!important;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #adbac7!important;
+  font-weight: bold!important;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #b4f1b4!important;
+  background-color: #1b4721!important;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffd8d3!important;
+  background-color: #78191b!important;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}

markdown-it-code-include/index.js

@@ -87,7 +87,7 @@ const include_plugin = (md, options) => {
 
       const labelStyle = `padding: 0 4px; font-size: 12px; font-weight: bold; color: #ffffff; background: #444444; opacity: .6;`
 
-      const fileLabel = `<div style="position:relative; height: 0px;"><div style="position:absolute; top: -10px;${labelStyle}">${includePath}</div></div>\n\n`
+      const fileLabel = `<div style="position:relative; height: 0px;"><div class="code-file-label" style="position:absolute; top: -10px;${labelStyle}">${includePath}</div></div>\n\n`
       const fileExt = includePath.replace(/^.+\./, "")
 
       // replace include by file content

yarn.lock

@@ -3986,10 +3986,10 @@ __metadata:
 
 "markdown-it-code-include@file:./markdown-it-code-include::locator=tibi-docs%40workspace%3A.":
   version: 0.0.0
-  resolution: "markdown-it-code-include@file:./markdown-it-code-include#./markdown-it-code-include::hash=a6a515&locator=tibi-docs%40workspace%3A."
+  resolution: "markdown-it-code-include@file:./markdown-it-code-include#./markdown-it-code-include::hash=8d8a72&locator=tibi-docs%40workspace%3A."
   dependencies:
     node-html-parser: ^1.3.1
-  checksum: 03b3a6c463b7fbc1c6fddb47a29f0bfeb44b4a2afbe2b78c195949f6ca963b9d254209d533c09b191502bcade61442598a2bf6a63ae7633fde03b5a509420e8c
+  checksum: 3e79581a4d1ec0b796b6c3ae5a83f8a197daba7440c5bb5c6447b80f5cc04943e8eef5549af5408958c13e62bfe4fb5632c758da74668f90dc21bb22396d7813
   languageName: node
   linkType: hard