fossbook 0.0.9 → 0.0.12

package/lib/mod/marked.js

@@ -1,12 +1,8 @@
 const marked = require("marked");
+const hljs = require("highlight.js");
 
 marked.setOptions({
   renderer: new marked.Renderer(),
-  highlight: function (code, language) {
-    const hljs = require("highlight.js");
-    const validLanguage = hljs.getLanguage(language) ? language : "plaintext";
-    return hljs.highlight(validLanguage, code).value;
-  },
   pedantic: false,
   gfm: true,
   breaks: false,
@@ -36,8 +32,14 @@ const renderer = {
         .replace(/>/g, ">");
       return `<pre class="mermaid">${escaped}</pre>`;
     }
-    // Fall back to marked's default code rendering for everything else.
-    return false;
+    // Syntax-highlight every other fenced block with highlight.js so the
+    // theme (styles/highlights.css) can color the tokens.
+    const valid = language && hljs.getLanguage(language);
+    const { value } = valid
+      ? hljs.highlight(text, { language })
+      : hljs.highlightAuto(text);
+    const cls = valid ? ` language-${language}` : "";
+    return `<pre><code class="hljs${cls}">${value}</code></pre>`;
   },
   image(href, title, text) {
     let size = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fossbook",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "A lightweight static blog site generator for GitHub Pages",
   "main": "lib/index.js",
   "scripts": {

package/themes/archie/assets/styles/highlights.css

@@ -1,69 +1,85 @@
-/* Tomorrow Night Blue Theme */
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
-/* Original theme - https://github.com/chriskempson/tomorrow-theme */
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* GitHub Light Theme */
+/* Adapted from highlight.js github.css to fit a white page background. */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f6f8fa;
+  color: #24292e;
+  padding: 0.5em;
+}
 
-/* Tomorrow Comment */
 .hljs-comment,
 .hljs-quote {
-  color: #7285b7;
+  color: #6a737d;
+  font-style: italic;
 }
 
-/* Tomorrow Red */
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: #ff9da4;
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #d73a49;
+  font-weight: bold;
 }
 
-/* Tomorrow Orange */
 .hljs-number,
-.hljs-built_in,
-.hljs-builtin-name,
 .hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: #ffc58f;
-}
-
-/* Tomorrow Yellow */
-.hljs-attribute {
-  color: #ffeead;
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #005cc5;
 }
 
-/* Tomorrow Green */
 .hljs-string,
+.hljs-doctag,
 .hljs-symbol,
 .hljs-bullet,
 .hljs-addition {
-  color: #d1f1a9;
+  color: #032f62;
 }
 
-/* Tomorrow Blue */
 .hljs-title,
-.hljs-section {
-  color: #bbdaff;
+.hljs-section,
+.hljs-selector-id {
+  color: #6f42c1;
+  font-weight: bold;
 }
 
-/* Tomorrow Purple */
-.hljs-keyword,
-.hljs-selector-tag {
-  color: #ebbbff;
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #d73a49;
+  font-weight: bold;
 }
 
-.hljs {
-  display: block;
-  overflow-x: auto;
-  background: #002451;
-  color: white;
-  padding: 0.5em;
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #22863a;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-params {
+  color: #e36209;
+}
+
+.hljs-meta {
+  color: #6a737d;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #ffeef0;
+}
+
+.hljs-addition {
+  background: #f0fff4;
 }
 
 .hljs-emphasis {

package/themes/archie/assets/styles/main.css

@@ -153,10 +153,10 @@
   }
   
   pre {
-    background-color: #ececec;
+    background-color: #f6f8fa;
     line-height: 1.4;
     overflow-x: auto;
-    padding: 1em;
+    padding: 0;
   }
   
   .highlight pre ::selection {
@@ -302,9 +302,19 @@
     color:white;
     background-color: var(--hovercolor); 
   }
-  svg{
+  .soc svg{
     max-height: 15px;
   }
+  pre.mermaid{
+    background-color: transparent;
+    padding: 0;
+    text-align: center;
+    overflow-x: auto;
+  }
+  pre.mermaid svg{
+    max-width: 100%;
+    height: auto;
+  }
   .soc:hover{
     color: white;
   }

package/themes/archie/layouts/page.html

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" href="${page.config.basePath}styles/fonts.css">
         <link rel="stylesheet" href="${page.config.basePath}styles/main.css">
+        <link rel="stylesheet" href="${page.config.basePath}styles/highlights.css">
         <link rel="icon" type="image/png" href="${page.config.basePath}images/favicon.png">
         <!-- Google tag (gtag.js) -->
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}

package/themes/archie/layouts/post.html

@@ -8,6 +8,7 @@
         <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nanum+Pen+Script&family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="${page.config.basePath}styles/fonts.css">
         <link rel="stylesheet" href="${page.config.basePath}styles/main.css">
+        <link rel="stylesheet" href="${page.config.basePath}styles/highlights.css">
         <link rel="icon" type="image/png" href="${page.config.basePath}images/favicon.png">
         <!-- Google tag (gtag.js) -->
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}