Merge pull request #82 from admisio/marked_highlight

(backend) (frontend) parse time highlighting

apps/web/package.json

@@ -18,9 +18,10 @@
         "bcrypt": "^5.1.0",
         "date-fns": "^2.29.3",
         "debounce": "^1.2.1",
-        "marked": "^4.3.0",
+        "marked": "^5.0.0",
+        "marked-highlight": "^1.0.1",
         "cheerio": "1.0.0-rc.12",
-        "highlight.js": "^11.7.0",
+        "highlight.js": "^11.8.0",
         "jsonwebtoken": "^9.0.0",
         "trpc-sveltekit": "^3.5.1"
     },
@@ -33,7 +34,7 @@
         "@types/bcrypt": "^5.0.0",
         "@types/debounce": "^1.2.1",
         "@types/jsonwebtoken": "^9.0.1",
-        "@types/marked": "^4.0.8",
+        "@types/marked": "^4.3.0",
         "@types/node": "18.15.5",
         "svelte": "^3.57.0",
         "svelte-check": "^3.1.4",

apps/web/src/lib/components/testview/TestResult.svelte

@@ -38,20 +38,12 @@
 
     let isDarkMode: boolean = false;
 
-    import hljs from 'highlight.js';
     import 'highlight.js/styles/github-dark.css';
 
-    import { onMount } from 'svelte';
     import type { Answer, Heading, Prisma, Question, Submission } from '@testy/database';
 
     import Answers from './Answers.svelte';
     import { getInBetweenQuestionRows } from '$lib/utils/headings';
-
-    onMount(() => {
-        document.querySelectorAll('.description code').forEach((el) => {
-            hljs.highlightElement(el as HTMLElement);
-        });
-    });
 </script>
 
 <div

apps/web/src/lib/utils/mdParser.ts

@@ -1,4 +1,7 @@
 import { marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+
 import { load } from 'cheerio';
 import type { HeadingType, TemplateType, Question } from '@testy/trpc';
 
@@ -38,6 +41,15 @@ const parseQuestion = (questionHTML: string): Question => {
 };
 
 export const parseMd = async (md: string, timeLimit: number): Promise<TemplateType> => {
+    marked.use(
+        markedHighlight({
+            langPrefix: 'hljs language-',
+            highlight(code: string, lang: string) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                return hljs.highlight(code, { language }).value;
+            }
+        })
+    );
     const html = marked.parse(md);
     console.log(html);
     const document = load(html);

apps/web/src/routes/(user)/(authenticated)/home/test/[id]/+page.svelte

@@ -41,7 +41,6 @@
 
     let isDarkMode: boolean = false;
 
-    import hljs from 'highlight.js';
     import 'highlight.js/styles/github-dark.css';
 
     import { onDestroy, onMount } from 'svelte';
@@ -51,16 +50,6 @@
     import { getInBetweenQuestionRows } from '$lib/utils/headings';
 
     onMount(() => {
-        document.querySelectorAll('.description code').forEach((el) => {
-            // create pre element and insert it before the code element and put the code element inside the pre element
-            const pre = document.createElement('pre');
-            pre.className = 'hljs';
-            el.parentNode?.insertBefore(pre, el);
-            pre.appendChild(el);
-
-            hljs.highlightElement(el as HTMLElement);
-        });
-
         updateTimeRemaining();
         updateTimeRemainingInterval = setInterval(() => updateTimeRemaining(), 1000);
     });
@@ -156,7 +145,7 @@
                     {/if}
                     {#if heading && heading.description}
                         <p
-                            class="mt-4 text-ellipsis break-words text-justify text-xl font-serif dark:text-gray-400"
+                            class="mt-4 text-ellipsis break-words text-justify font-serif text-xl dark:text-gray-400"
                         >
                             {@html heading.description}
                         </p>
@@ -203,7 +192,7 @@
 
 <style lang="postcss">
     .title-wrapper :global(code) {
-        @apply rounded-md bg-[#1D1D1E] py-1 px-1 text-[#D4D4D4];
+        @apply rounded-md bg-[#1D1D1E] px-1 py-1 text-[#D4D4D4];
     }
     .endTimeFixed {
         @apply fixed;

apps/web/src/routes/admin/(authenticated)/tests/[id]/+page.svelte

@@ -4,21 +4,13 @@
     export let data: PageData;
     const test = data.template!;
 
-    import hljs from 'highlight.js';
     import 'highlight.js/styles/github.css';
 
-    import { onMount } from 'svelte';
     import TestPreview from '$lib/components/testpreview/TestPreview.svelte';
-
-    onMount(() => {
-        document.querySelectorAll('.description code').forEach((el) => {
-            hljs.highlightElement(el as HTMLElement);
-        });
-    });
 </script>
 
 <div
-    class="<md:flex-col mx-auto mx-auto mb-6 flex max-w-screen-xl  items-center px-4 px-4 py-3 md:px-6 md:px-6"
+    class="<md:flex-col mx-auto mx-auto mb-6 flex max-w-screen-xl items-center px-4 px-4 py-3 md:px-6 md:px-6"
 >
     <h1 class="<md:mb-3 text-6xl font-bold text-[#3580b7]">Úprava testu / {test.title}</h1>
 </div>

apps/web/src/routes/preview/template/+page.svelte

@@ -1,21 +1,13 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { enhance } from '$app/forms';
 
-    import hljs from 'highlight.js';
     import 'highlight.js/styles/github.css';
 
     import type { ActionData } from './$types';
 
     import TestPreview from '$lib/components/testpreview/TestPreview.svelte';
 
     export let form: ActionData;
-
-    onMount(() => {
-        document.querySelectorAll('.description code').forEach((el) => {
-            hljs.highlightElement(el as HTMLElement);
-        });
-    });
 </script>
 
 <form method="POST" use:enhance>