Merge pull request #33 from kkga/code-highlight

code highlight

.ter/config.json

@@ -2,12 +2,8 @@
   "title": "Ter",
   "description": "A tiny wiki-style site builder with Zettelkasten flavor",
   "url": "https://ter.kkga.me/",
-  "author_name": "Gadzhi Kharkharov",
-  "author_email": "[email protected]",
-  "author_url": "https://kkga.me/",
-  "nav_links": {
-    "Usage": "/usage",
-    "Source": "https://github.com/kkga/ter"
-  },
+  "authorName": "Gadzhi Kharkharov",
+  "authorEmail": "[email protected]",
+  "authorUrl": "https://kkga.me/",
   "head": "<script data-host='https://microanalytics.io' data-dnt='false' src='https://microanalytics.io/js/script.js' id='ZwSg9rf6GA' async defer></script>"
 }

components/Article.tsx

@@ -72,20 +72,34 @@ const contentStyles = css({
   ol: apply`
     list(inside decimal)
   `,
+  "ul ul, ol ol": apply`
+    pl-4
+  `,
   hr: apply`
     my-8
     border(gray-200)
     dark:(border(gray-800))
   `,
+  code: apply`
+    font-mono
+    text-sm
+  `,
+  ":not(pre) code": apply`
+    px-1 py-px
+    bg(pink-50 dark:(pink-300 opacity-20))
+    rounded-sm
+  `,
   pre: apply`
     overflow-x-scroll
     text(xs md:sm)
     font-mono
-    py-0 px-4
+    py-2 px-4
     leading-snug
-    text(pink-700 dark:pink-300)
     border(l pink-700 opacity-30 dark:(pink-300 opacity-40))
   `,
+  "pre:not(.hljs)": apply`
+    text(pink-700 dark:pink-300)
+  `,
   details: css(
     apply`
       px-4 py-3
@@ -127,6 +141,12 @@ const contentStyles = css({
     py-1 pr-3
     align-baseline
   `,
+  dt: apply`
+    font-semibold
+  `,
+  dd: apply`
+    pl-4
+  `,
   ".full-bleed": apply`
     lg:(-mx-24)
     xl:(-mx-32)

config.ts

@@ -6,9 +6,10 @@ const defaultUserConfig: UserConfig = {
   description: "I am writing about my experiences as a naval navel-gazer",
   url: "https://example.com/",
   rootCrumb: "index",
-  author_name: "Your Name Here",
-  author_email: "[email protected]",
-  author_url: "https://example.com/about-me/",
+  authorName: "Your Name Here",
+  authorEmail: "[email protected]",
+  authorUrl: "https://example.com/about-me/",
+  codeHighlight: false,
   lang: "en",
 };
 
@@ -76,11 +77,11 @@ export async function createConfig(
   conf.renderDrafts = opts.renderDrafts;
 
   await checkUserConfig(conf.userConfigPath)
-    .catch(async () => {
+    .catch(() => {
       console.warn(
         `Config file missing, initializing default config at ${conf.userConfigPath}`,
       );
-      await initUserConfig(conf.userConfig, conf.userConfigPath);
+      initUserConfig(conf.userConfig, conf.userConfigPath);
     });
 
   try {

constants.ts

@@ -37,3 +37,217 @@ OPTIONS:
   --port\t\tServe port (default: 8000)
   --drafts\t\tRender pages marked as drafts (default: false)
   --debug\t\tVerbose output and statistics (default: false)`;
+
+// highlight.js syntax highlighting from github primer
+export const HIGHLIGHT_STYLE = `
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: #cdd9e5;
+}
+
+.hljs-comment,
+.hljs-punctuation {
+  color: #768390;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-meta,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: #6cb6ff;
+}
+
+.hljs-variable,
+.hljs-literal,
+.hljs-number,
+.hljs-doctag {
+  color: #f69d50;
+}
+
+.hljs-params {
+  color: #cdd9e5;
+}
+
+.hljs-function {
+  color: #dcbdfb;
+}
+
+.hljs-class,
+.hljs-tag,
+.hljs-title,
+.hljs-built_in {
+  color: #8ddb8c;
+}
+
+.hljs-keyword,
+.hljs-type,
+.hljs-builtin-name,
+.hljs-meta-keyword,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f47067;
+}
+
+.hljs-string,
+.hljs-undefined {
+  color: #96d0ff;
+}
+
+.hljs-regexp {
+  color: #96d0ff;
+}
+
+.hljs-symbol {
+  color: #6cb6ff;
+}
+
+.hljs-bullet {
+  color: #f69d50;
+}
+
+.hljs-section {
+  color: #6cb6ff;
+  font-weight: bold;
+}
+
+.hljs-quote,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: #8ddb8c;
+}
+
+.hljs-emphasis {
+  color: #f69d50;
+  font-style: italic;
+}
+
+.hljs-strong {
+  color: #f69d50;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: #ff938a;
+  background-color: #78191b;
+}
+
+.hljs-addition {
+  color: #8ddb8c;
+  background-color: #113417;
+}
+
+.hljs-link {
+  color: #96d0ff;
+  font-style: underline;
+}
+
+@media (prefers-color-scheme: light) {
+  .hljs {
+    display: block;
+    overflow-x: auto;
+    color: #24292e;
+  }
+
+  .hljs-comment,
+  .hljs-punctuation {
+    color: #6a737d;
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-meta,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    color: #005cc5;
+  }
+
+  .hljs-variable,
+  .hljs-literal,
+  .hljs-number,
+  .hljs-doctag {
+    color: #e36209;
+  }
+
+  .hljs-params {
+    color: #24292e;
+  }
+
+  .hljs-function {
+    color: #6f42c1;
+  }
+
+  .hljs-class,
+  .hljs-tag,
+  .hljs-title,
+  .hljs-built_in {
+    color: #22863a;
+  }
+
+  .hljs-keyword,
+  .hljs-type,
+  .hljs-builtin-name,
+  .hljs-meta-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable {
+    color: #d73a49;
+  }
+
+  .hljs-string,
+  .hljs-undefined {
+    color: #032f62;
+  }
+
+  .hljs-regexp {
+    color: #032f62;
+  }
+
+  .hljs-symbol {
+    color: #005cc5;
+  }
+
+  .hljs-bullet {
+    color: #e36209;
+  }
+
+  .hljs-section {
+    color: #005cc5;
+    font-weight: bold;
+  }
+
+  .hljs-quote,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    color: #22863a;
+  }
+
+  .hljs-emphasis {
+    color: #e36209;
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    color: #e36209;
+    font-weight: bold;
+  }
+
+  .hljs-deletion {
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+
+  .hljs-addition {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+
+  .hljs-link {
+    color: #032f62;
+    font-style: underline;
+  }
+}`;