feat: adds rudimentary syntax highlighting for code blocks

Fortyseven · Aug 17, 2024 · b08ecf8 · b08ecf8
1 parent 4dfe0f0
commit b08ecf8
Show file tree

Hide file tree

Showing 5 changed files with 1,650 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -4,11 +4,13 @@
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
  <title>Chit</title>
+
  <link rel="stylesheet" href="/fonts/mono-icons/icons.css">
- <!-- <link rel="stylesheet" href="/bulma-theme.css"> -->
- <!-- <link rel="stylesheet" href="/bulma-tooltip.min.css"> -->
+ <script type="module" src="/script/highlight.min.js"></script>
  <link rel="stylesheet" href="/style.css">
+ <link rel="stylesheet" href="/syntax.css">
  <link rel="icon" type="image/png" href="/favicon.png">
  </head>
 

diff --git a/public/syntax.css b/public/syntax.css
@@ -0,0 +1,84 @@
+pre code.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 1em;
+}
+code.hljs {
+ padding: 3px 5px;
+ color: #f00;
+}
+.hljs {
+ color: #eaeaea;
+ background: #000;
+}
+.hljs-subst {
+ color: #eaeaea;
+}
+.hljs-emphasis {
+ font-style: italic;
+}
+.hljs-strong {
+ font-weight: 700;
+}
+.hljs-type {
+ color: #eaeaea;
+}
+.hljs-params {
+ color: #88ff2d;
+}
+
+.hljs-number {
+ color: #0cf;
+}
+.hljs-literal,
+.hljs-name {
+ color: red;
+ font-weight: bolder;
+}
+.hljs-comment {
+ color: #ff00ff;
+ font-style: italic;
+}
+.hljs-quote,
+.hljs-selector-id {
+ color: #0ff;
+}
+
+.hljs-built_in,
+.hljs-title {
+ color: rgb(108, 103, 255);
+}
+
+.hljs-template-variable,
+.hljs-variable {
+ color: #0ff;
+ font-weight: 700;
+}
+.hljs-keyword,
+.hljs-selector-class,
+.hljs-symbol {
+ color: #ffbb00;
+ font-weight: bold;
+}
+.hljs-bullet,
+.hljs-string {
+ color: #f33;
+}
+.hljs-section,
+.hljs-tag {
+ color: #000fff;
+}
+.hljs-selector-tag {
+ color: #000fff;
+ font-weight: 700;
+}
+
+.hljs-attribute,
+.hljs-link,
+.hljs-regexp {
+ color: #f0f;
+}
+.hljs-meta {
+ color: #fff;
+ font-weight: bolder;
+}
diff --git a/src/components/TabPages/Conversation/Chat/Timeline.svelte b/src/components/TabPages/Conversation/Chat/Timeline.svelte
@@ -83,6 +83,7 @@
  font-size: 0.8em;
  letter-spacing: -1px;
  white-space: break-spaces;
+ margin-block: 1em;
  }
 
  em,
@@ -119,7 +120,8 @@
 
  code {
  font-family: monospace !important;
- color: var(--accent-color1);
+ // color: var(--accent-color1);
+ color: rgb(191, 191, 191);
  line-height: 1.1em;
  }
 

diff --git a/src/components/TabPages/Conversation/Chat/TimelineResponse_Assistant.svelte b/src/components/TabPages/Conversation/Chat/TimelineResponse_Assistant.svelte
@@ -10,6 +10,7 @@
  import { rerollLastResponse } from '$lib/chat';
 
  import ChatButton from '../../../UI/ChatButton.svelte';
+ import { hljs } from '../../../../lib/vendor/highlight.min.js';
 
  export let line;
  export let index;
@@ -20,7 +21,18 @@
 
  let viewMode = 'markdown';
 
- const md = markdownit();
+ const md = markdownit({
+ highlight: function (str, lang) {
+ if (lang && hljs.getLanguage(lang)) {
+ try {
+ const hl = hljs.highlight(str, { language: lang }).value;
+ return hl;
+ } catch (__) {}
+ }
+
+ return ''; // use external default escaping
+ }
+ });
 
  /* ----------------- */