diff --git a/apps/web/package.json b/apps/web/package.json
index dd1f0ae..1ebc570 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/lib/components/testview/TestResult.svelte b/apps/web/src/lib/components/testview/TestResult.svelte
index 5f15e90..e6449f0 100644
--- a/apps/web/src/lib/components/testview/TestResult.svelte
+++ b/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
diff --git a/apps/web/src/lib/utils/mdParser.ts b/apps/web/src/lib/utils/mdParser.ts
index c32b976..62a3ff8 100644
--- a/apps/web/src/lib/utils/mdParser.ts
+++ b/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);
diff --git a/apps/web/src/routes/(user)/(authenticated)/home/test/[id]/+page.svelte b/apps/web/src/routes/(user)/(authenticated)/home/test/[id]/+page.svelte
index a0e9de1..0155479 100644
--- a/apps/web/src/routes/(user)/(authenticated)/home/test/[id]/+page.svelte
+++ b/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;
diff --git a/apps/web/src/routes/admin/(authenticated)/tests/[id]/+page.svelte b/apps/web/src/routes/admin/(authenticated)/tests/[id]/+page.svelte
index 46b7ea9..db73103 100644
--- a/apps/web/src/routes/admin/(authenticated)/tests/[id]/+page.svelte
+++ b/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>
diff --git a/apps/web/src/routes/preview/template/+page.svelte b/apps/web/src/routes/preview/template/+page.svelte
index 9f8cbc3..62b80a2 100644
--- a/apps/web/src/routes/preview/template/+page.svelte
+++ b/apps/web/src/routes/preview/template/+page.svelte
@@ -1,8 +1,6 @@
 <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';
@@ -10,12 +8,6 @@
     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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d1fc6e..b00117a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,14 +54,17 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       highlight.js:
-        specifier: ^11.7.0
-        version: 11.7.0
+        specifier: ^11.8.0
+        version: 11.8.0
       jsonwebtoken:
         specifier: ^9.0.0
         version: 9.0.0
       marked:
-        specifier: ^4.3.0
-        version: 4.3.0
+        specifier: ^5.0.0
+        version: 5.0.0
+      marked-highlight:
+        specifier: ^1.0.1
+        version: 1.0.1(marked@5.0.0)
       trpc-sveltekit:
         specifier: ^3.5.1
         version: 3.5.1(@sveltejs/adapter-node@1.2.3)(@trpc/client@10.17.0)(@trpc/server@10.17.0)(@types/ws@8.5.4)(ws@8.12.1)
@@ -88,8 +91,8 @@ importers:
         specifier: ^9.0.1
         version: 9.0.1
       '@types/marked':
-        specifier: ^4.0.8
-        version: 4.0.8
+        specifier: ^4.3.0
+        version: 4.3.0
       '@types/node':
         specifier: 18.15.5
         version: 18.15.5
@@ -1441,8 +1444,8 @@ packages:
       '@types/node': 18.15.5
     dev: true
 
-  /@types/marked@4.0.8:
-    resolution: {integrity: sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==}
+  /@types/marked@4.3.0:
+    resolution: {integrity: sha512-zK4gSFMjgslsv5Lyvr3O1yCjgmnE4pr8jbG8qVn4QglMwtpvPCf4YT2Wma7Nk95OxUUJI8Z+kzdXohbM7mVpGw==}
     dev: true
 
   /@types/node@18.15.5:
@@ -2819,8 +2822,8 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
-  /highlight.js@11.7.0:
-    resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==}
+  /highlight.js@11.8.0:
+    resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
     engines: {node: '>=12.0.0'}
     dev: false
 
@@ -3622,9 +3625,17 @@ packages:
       tmpl: 1.0.5
     dev: false
 
-  /marked@4.3.0:
-    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
-    engines: {node: '>= 12'}
+  /marked-highlight@1.0.1(marked@5.0.0):
+    resolution: {integrity: sha512-dL9nk6dDRJ0BiSfhEilY0SWGgAgJTea9BY80rVHSEeZCECIqR3ytkvQEhlDYV7eOJ03GUUlqYcCtJKkymVMj8A==}
+    peerDependencies:
+      marked: ^4 || ^5
+    dependencies:
+      marked: 5.0.0
+    dev: false
+
+  /marked@5.0.0:
+    resolution: {integrity: sha512-YQ6+L9l/NSBDjFgCQQebmTCc62EUdZ5RpIZ7A/FmC8IYMB5s7Cz8sT7imuMAkbIL4CvXpQLdW45fpK5UwiU7DA==}
+    engines: {node: '>= 18'}
     hasBin: true
     dev: false