finalised first version of sjiki code themes

tutors-sdk · Dec 12, 2024 · e495960 · e495960
1 parent 1adfab4
commit e495960
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/src/lib/runes.ts b/src/lib/runes.ts
@@ -7,7 +7,6 @@ export const layout = rune("expanded");
 export const lightMode = rune("light");
 export const currentTheme = rune("tutors");
 export const currentCodeTheme = rune("monokai");
-export const refreshCodeTheme = rune(false);
 
 export const currentLo = rune<Lo | null>(null);
 export const currentCourse = rune<Course | null>(null);

diff --git a/src/lib/services/models/markdown-utils.ts b/src/lib/services/models/markdown-utils.ts
@@ -50,8 +50,9 @@ import solarizedDark from "shiki/themes/solarized-dark.mjs";
 import solarizedLight from "shiki/themes/solarized-light.mjs";
 import nightOwl from "shiki/themes/night-owl.mjs";
 import githubDark from "shiki/themes/github-dark.mjs";
-import catppuccinMocha from "shiki/themes/catppuccin-mocha.mjs";
-
+import dracula from "shiki/themes/dracula.mjs";
+import snazziLight from "shiki/themes/snazzy-light.mjs";
+import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
 const languages = [
   js,
   ts,
@@ -77,15 +78,26 @@ const languages = [
   html
 ];
 
+export const codeThemes = [
+  monokai,
+  solarizedLight,
+  githubDark,
+  githubLightHighContrast,
+  nightOwl,
+  dracula,
+  solarizedDark,
+  snazziLight
+];
+
 const shiki = createHighlighterCoreSync({
-  themes: [monokai, nightOwl, githubDark, catppuccinMocha, solarizedDark, solarizedLight],
+  themes: codeThemes,
   langs: languages,
   engine: createJavaScriptRegexEngine()
 });
 
 let currentTheme = "monokai";
 
-export const markdownIt: any = new MarkdownIt({
+export const markdownIt = new MarkdownIt({
   html: true, // Enable HTML tags in source
   xhtmlOut: false, // Use '/' to close single tags (<br />).
   breaks: false, // Convert '\n' in paragraphs into <br>

diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte
@@ -6,7 +6,7 @@
   import type { LiveLab } from "$lib/services/models/live-lab";
   import { fly } from "svelte/transition";
   import { slideFromLeft } from "$lib/ui/themes/animations";
-  import { currentCodeTheme, refreshCodeTheme } from "$lib/runes";
+  import { currentCodeTheme } from "$lib/runes";
 
   interface Props {
     lab: LiveLab;

diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { currentCodeTheme, currentLo, currentTheme, lightMode, refreshCodeTheme } from "$lib/runes";
+  import { currentCodeTheme, currentLo, currentTheme, lightMode } from "$lib/runes";
   import Menu from "$lib/ui/components/Menu.svelte";
   import { layout } from "$lib/runes";
   import MenuItem from "$lib/ui/components/MenuItem.svelte";
   import Icon from "../components/Icon.svelte";
   import { themeService } from "./theme-controller.svelte";
   import { courseService } from "$lib/services/course.svelte";
+  import { codeThemes } from "$lib/services/models/markdown-utils";
 
   function changeTheme(theme: string): void {
     themeService.setTheme(theme);
@@ -14,7 +15,6 @@
   function changeCodeTheme(codeTheme: string): void {
     themeService.setCodeTheme(codeTheme);
     courseService.refreshAllLabs(codeTheme);
-    refreshCodeTheme.value = !refreshCodeTheme.value;
   }
 
   function toggleDisplayMode(): void {
@@ -62,12 +62,12 @@
   </ul>
   <h6>Code Themes</h6>
   <ul class="list">
-    {#each themeService.codeThemes as codeTheme}
+    {#each codeThemes as codeTheme}
       <MenuItem
         type="lightMode"
-        isActive={currentCodeTheme.value === codeTheme}
-        text={codeTheme}
-        onClick={() => changeCodeTheme(codeTheme)}
+        isActive={currentCodeTheme.value === codeTheme.name}
+        text={codeTheme.displayName}
+        onClick={() => changeCodeTheme(codeTheme.name)}
       />
     {/each}
   </ul>

diff --git a/src/lib/ui/themes/theme-controller.svelte.ts b/src/lib/ui/themes/theme-controller.svelte.ts
@@ -4,6 +4,7 @@ import { FluentIconLib } from "./icons/fluent-icons";
 import { HeroIconLib } from "./icons/hero-icons";
 import { FestiveIcons } from "./icons/festive-icons";
 import { makeItSnow, makeItStopSnowing } from "./events/festive.svelte";
+import { codeThemes } from "$lib/services/models/markdown-utils";
 
 export const themeService = {
   themes: [
@@ -16,8 +17,6 @@ export const themeService = {
     { name: "cerberus", icons: FluentIconLib }
   ] as Theme[],
 
-  codeThemes: ["monokai", "night-owl", "github-dark", "catppuccin-mocha", "solarized-dark", "solarized-light"],
-
   isSnowing: false,
 
   initDisplay(forceTheme?: string, forceMode?: string): void {
@@ -65,7 +64,7 @@ export const themeService = {
     if (!theme) {
       theme = "monokai";
     }
-    if (themeService.codeThemes.includes(theme)) {
+    if (codeThemes.find((t) => t.name === theme)) {
       currentCodeTheme.value = theme;
     } else {
       currentCodeTheme.value = "monokai";