From c2cba04d81df2146a9bbfe1c033ff509a524eedf Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:05:42 +0000
Subject: [PATCH 01/18] feat: add result format attribute in create note and
 store note lib

---
 packages/lib/src/notes/notes.services.ts | 3 +++
 packages/lib/src/notes/notes.usecases.ts | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/packages/lib/src/notes/notes.services.ts b/packages/lib/src/notes/notes.services.ts
index 02406cbc..e1024cfa 100644
--- a/packages/lib/src/notes/notes.services.ts
+++ b/packages/lib/src/notes/notes.services.ts
@@ -5,6 +5,7 @@ export { fetchNote, storeNote };
 async function storeNote({
   payload,
   ttlInSeconds,
+  resultFormat,
   deleteAfterReading,
   apiBaseUrl,
   serializationFormat,
@@ -13,6 +14,7 @@ async function storeNote({
 }: {
   payload: string;
   ttlInSeconds?: number;
+  resultFormat: 'raw' | 'code' | 'markdown';
   deleteAfterReading: boolean;
   apiBaseUrl?: string;
   serializationFormat: string;
@@ -26,6 +28,7 @@ async function storeNote({
     body: {
       payload,
       ttlInSeconds,
+      resultFormat,
       deleteAfterReading,
       serializationFormat,
       encryptionAlgorithm,
diff --git a/packages/lib/src/notes/notes.usecases.ts b/packages/lib/src/notes/notes.usecases.ts
index 1f5cf784..fe194502 100644
--- a/packages/lib/src/notes/notes.usecases.ts
+++ b/packages/lib/src/notes/notes.usecases.ts
@@ -13,6 +13,7 @@ async function createNote({
   content,
   password,
   ttlInSeconds,
+  resultFormat,
   deleteAfterReading = false,
   clientBaseUrl = BASE_URL,
   apiBaseUrl = clientBaseUrl,
@@ -25,6 +26,7 @@ async function createNote({
   content: string;
   password?: string;
   ttlInSeconds?: number;
+  resultFormat: 'raw' | 'code' | 'markdown';
   deleteAfterReading?: boolean;
   clientBaseUrl?: string;
   apiBaseUrl?: string;
@@ -35,6 +37,7 @@ async function createNote({
   storeNote?: (params: {
     payload: string;
     ttlInSeconds?: number;
+    resultFormat: 'raw' | 'code' | 'markdown';
     deleteAfterReading: boolean;
     encryptionAlgorithm: EncryptionAlgorithm;
     serializationFormat: SerializationFormat;
@@ -47,6 +50,7 @@ async function createNote({
   const { noteId } = await storeNote({
     payload: encryptedPayload,
     ttlInSeconds,
+    resultFormat,
     deleteAfterReading,
     encryptionAlgorithm,
     serializationFormat,

From a86c9e023437d5b536a8f825e1757da4d65b08ff Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:07:54 +0000
Subject: [PATCH 02/18] feat: add result format to save note repository

---
 packages/app-server/src/modules/notes/notes.repository.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/app-server/src/modules/notes/notes.repository.ts b/packages/app-server/src/modules/notes/notes.repository.ts
index 79f0c473..c3a5f826 100644
--- a/packages/app-server/src/modules/notes/notes.repository.ts
+++ b/packages/app-server/src/modules/notes/notes.repository.ts
@@ -34,6 +34,7 @@ async function saveNote(
   {
     payload,
     ttlInSeconds,
+    resultFormat,
     deleteAfterReading,
     storage,
     generateNoteId = generateId,
@@ -45,6 +46,7 @@ async function saveNote(
   {
     payload: string;
     ttlInSeconds?: number;
+    resultFormat: 'raw' | 'code' | 'markdown';
     deleteAfterReading: boolean;
     storage: Storage<DatabaseNote>;
     generateNoteId?: () => string;
@@ -62,6 +64,7 @@ async function saveNote(
       encryptionAlgorithm,
       serializationFormat,
       isPublic,
+      resultFormat,
     };
 
     if (!ttlInSeconds) {

From f9ae082c9743c2c23dac48ec227879d9532f4c16 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:08:23 +0000
Subject: [PATCH 03/18] feat: add result format validation in server during
 creating note

---
 packages/app-server/src/modules/notes/notes.routes.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/app-server/src/modules/notes/notes.routes.ts b/packages/app-server/src/modules/notes/notes.routes.ts
index 9eb51d3c..249b5f11 100644
--- a/packages/app-server/src/modules/notes/notes.routes.ts
+++ b/packages/app-server/src/modules/notes/notes.routes.ts
@@ -95,6 +95,7 @@ function setupCreateNoteRoute({ app }: { app: ServerInstance }) {
           .min(TEN_MINUTES_IN_SECONDS)
           .max(ONE_MONTH_IN_SECONDS)
           .optional(),
+        resultFormat: z.enum(['raw', 'code', 'markdown']),
 
         // @ts-expect-error zod wants strict non empty array
         encryptionAlgorithm: z.enum(encryptionAlgorithms),
@@ -107,7 +108,7 @@ function setupCreateNoteRoute({ app }: { app: ServerInstance }) {
 
     async (context, next) => {
       const config = context.get('config');
-      const { payload, isPublic, ttlInSeconds } = context.req.valid('json');
+      const { payload, isPublic, ttlInSeconds, resultFormat } = context.req.valid('json');
 
       if (payload.length > config.notes.maxEncryptedPayloadLength) {
         throw createNotePayloadTooLargeError();
@@ -121,16 +122,20 @@ function setupCreateNoteRoute({ app }: { app: ServerInstance }) {
         throw createExpirationDelayRequiredError();
       }
 
+      if (!resultFormat) {
+        throw createExpirationDelayRequiredError();
+      }
+
       await next();
     },
 
     async (context) => {
-      const { payload, ttlInSeconds, deleteAfterReading, encryptionAlgorithm, serializationFormat, isPublic } = context.req.valid('json');
+      const { payload, ttlInSeconds, resultFormat, deleteAfterReading, encryptionAlgorithm, serializationFormat, isPublic } = context.req.valid('json');
       const storage = context.get('storage');
 
       const notesRepository = createNoteRepository({ storage });
 
-      const { noteId } = await notesRepository.saveNote({ payload, ttlInSeconds, deleteAfterReading, encryptionAlgorithm, serializationFormat, isPublic });
+      const { noteId } = await notesRepository.saveNote({ payload, ttlInSeconds, resultFormat, deleteAfterReading, encryptionAlgorithm, serializationFormat, isPublic });
 
       return context.json({ noteId });
     },

From 3f7e47dc8d68a9b5105151f8d7f59bd10ba5aa89 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:08:47 +0000
Subject: [PATCH 04/18] feat: add note error in server

---
 packages/app-server/src/modules/notes/notes.errors.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/app-server/src/modules/notes/notes.errors.ts b/packages/app-server/src/modules/notes/notes.errors.ts
index 097b710d..f2dd3c52 100644
--- a/packages/app-server/src/modules/notes/notes.errors.ts
+++ b/packages/app-server/src/modules/notes/notes.errors.ts
@@ -23,3 +23,9 @@ export const createExpirationDelayRequiredError = createErrorFactory({
   code: 'note.expiration_delay_required',
   statusCode: 400,
 });
+
+export const createResultFormatRequiredError = createErrorFactory({
+  message: 'Result Format is required',
+  code: 'note.result_format_required',
+  statusCode: 400,
+});

From 8e42d672df6902bb3db1b61e02358b6d5885044f Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:09:59 +0000
Subject: [PATCH 05/18] feat: add result format to params create note, encrypt
 note, and store note

---
 packages/app-client/src/modules/notes/notes.services.ts | 3 +++
 packages/app-client/src/modules/notes/notes.usecases.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/app-client/src/modules/notes/notes.services.ts b/packages/app-client/src/modules/notes/notes.services.ts
index 5e2acd74..11a547d4 100644
--- a/packages/app-client/src/modules/notes/notes.services.ts
+++ b/packages/app-client/src/modules/notes/notes.services.ts
@@ -5,6 +5,7 @@ export { fetchNoteById, fetchNoteExists, storeNote };
 async function storeNote({
   payload,
   ttlInSeconds,
+  resultFormat,
   deleteAfterReading,
   encryptionAlgorithm,
   serializationFormat,
@@ -12,6 +13,7 @@ async function storeNote({
 }: {
   payload: string;
   ttlInSeconds?: number;
+  resultFormat: 'raw' | 'code' | 'markdown';
   deleteAfterReading: boolean;
   encryptionAlgorithm: string;
   serializationFormat: string;
@@ -23,6 +25,7 @@ async function storeNote({
     body: {
       payload,
       ttlInSeconds,
+      resultFormat,
       deleteAfterReading,
       serializationFormat,
       encryptionAlgorithm,
diff --git a/packages/app-client/src/modules/notes/notes.usecases.ts b/packages/app-client/src/modules/notes/notes.usecases.ts
index aa782cf8..00351f70 100644
--- a/packages/app-client/src/modules/notes/notes.usecases.ts
+++ b/packages/app-client/src/modules/notes/notes.usecases.ts
@@ -7,6 +7,7 @@ async function encryptAndCreateNote(args: {
   content: string;
   password?: string;
   ttlInSeconds?: number;
+  resultFormat: 'raw' | 'code' | 'markdown';
   deleteAfterReading: boolean;
   fileAssets: File[];
   isPublic?: boolean;

From a445f1a40feb8af0690cdb6a63c9bf99ed453a61 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:10:31 +0000
Subject: [PATCH 06/18] feat: integrate result format to ui

---
 packages/app-client/src/locales/en.json       |  6 ++++++
 .../src/modules/config/config.constants.ts    |  1 +
 .../src/modules/config/config.types.ts        |  1 +
 .../modules/notes/pages/create-note.page.tsx  | 21 +++++++++++++++++++
 4 files changed, 29 insertions(+)

diff --git a/packages/app-client/src/locales/en.json b/packages/app-client/src/locales/en.json
index de370e20..eacd7cfd 100644
--- a/packages/app-client/src/locales/en.json
+++ b/packages/app-client/src/locales/en.json
@@ -83,6 +83,12 @@
         "1w": "1 week",
         "1m": "1 month"
       },
+      "result-format": "Result Format",
+      "result-formats": {
+        "raw": "raw",
+        "code": "code",
+        "markdown": "markdown"
+      },
       "delete-after-reading": {
         "label": "Delete after reading",
         "description": "Delete the note after reading"
diff --git a/packages/app-client/src/modules/config/config.constants.ts b/packages/app-client/src/modules/config/config.constants.ts
index ef72d18f..2cab191c 100644
--- a/packages/app-client/src/modules/config/config.constants.ts
+++ b/packages/app-client/src/modules/config/config.constants.ts
@@ -7,6 +7,7 @@ export const buildTimeConfig: Config = {
   isAuthenticationRequired: import.meta.env.VITE_IS_AUTHENTICATION_REQUIRED === 'true',
   defaultDeleteNoteAfterReading: import.meta.env.VITE_DEFAULT_DELETE_NOTE_AFTER_READING === 'true',
   defaultNoteTtlSeconds: Number(import.meta.env.VITE_DEFAULT_NOTE_TTL_SECONDS ?? 3600),
+  defaultNoteResultFormat: import.meta.env.VITE_DEFAULT_NOTE_RESULT_FORMAT ?? 'raw',
   defaultNoteNoExpiration: import.meta.env.VITE_DEFAULT_NOTE_NO_EXPIRATION === 'true',
   isSettingNoExpirationAllowed: import.meta.env.VITE_IS_SETTING_NO_EXPIRATION_ALLOWED === 'true',
 };
diff --git a/packages/app-client/src/modules/config/config.types.ts b/packages/app-client/src/modules/config/config.types.ts
index e65a33a2..21a13cea 100644
--- a/packages/app-client/src/modules/config/config.types.ts
+++ b/packages/app-client/src/modules/config/config.types.ts
@@ -5,6 +5,7 @@ export type Config = {
   enclosedVersion: string;
   defaultDeleteNoteAfterReading: boolean;
   defaultNoteTtlSeconds: number;
+  defaultNoteResultFormat: 'raw' | 'code' | 'markdown';
   isSettingNoExpirationAllowed: boolean;
   defaultNoteNoExpiration: boolean;
 };
diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
index 9365307d..f3fe24ea 100644
--- a/packages/app-client/src/modules/notes/pages/create-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -1,3 +1,4 @@
+import type { Config } from '@/modules/config/config.types';
 import { authStore } from '@/modules/auth/auth.store';
 import { getConfig } from '@/modules/config/config.provider';
 import { getFileIcon } from '@/modules/files/files.models';
@@ -119,6 +120,7 @@ export const CreateNotePage: Component = () => {
   const [getIsNoteCreated, setIsNoteCreated] = createSignal(false);
   const [getIsPublic, setIsPublic] = createSignal(true);
   const [getTtlInSeconds, setTtlInSeconds] = createSignal(config.defaultNoteTtlSeconds);
+  const [getResultFormat, setResultFormat] = createSignal(config.defaultNoteResultFormat);
   const [getDeleteAfterReading, setDeleteAfterReading] = createSignal(config.defaultDeleteNoteAfterReading);
   const [getUploadedFiles, setUploadedFiles] = createSignal<File[]>([]);
   const [getIsNoteCreating, setIsNoteCreating] = createSignal(false);
@@ -162,6 +164,7 @@ export const CreateNotePage: Component = () => {
       content: getContent(),
       password: getPassword(),
       ttlInSeconds: getHasNoExpiration() ? undefined : getTtlInSeconds(),
+      resultFormat: getResultFormat(),
       deleteAfterReading: getDeleteAfterReading(),
       fileAssets: getUploadedFiles(),
       isPublic: getIsPublic(),
@@ -281,6 +284,24 @@ export const CreateNotePage: Component = () => {
                 </TabsList>
               </Tabs>
             </TextFieldRoot>
+
+            <TextFieldRoot class="w-full">
+              <TextFieldLabel>
+                {t('create.settings.result-format')}
+              </TextFieldLabel>
+
+              <Tabs
+                value={getResultFormat()}
+                onChange={(value: string) => setResultFormat(value as Config['defaultNoteResultFormat'])}
+              >
+                <TabsList>
+                  <TabsIndicator />
+                  <TabsTrigger value="raw">{t('create.settings.result-formats.raw')}</TabsTrigger>
+                  <TabsTrigger value="code">{t('create.settings.result-formats.code')}</TabsTrigger>
+                  <TabsTrigger value="markdown">{t('create.settings.result-formats.markdown')}</TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </TextFieldRoot>
             {/*
             {config.isAuthenticationRequired && (
               <TextFieldRoot class="w-full">

From e4fbf391d26073aa16538b94dc9b74e36dd1b21a Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:13:32 +0000
Subject: [PATCH 07/18] feat: add result format type to fetch note by id

---
 packages/app-client/src/modules/notes/notes.services.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app-client/src/modules/notes/notes.services.ts b/packages/app-client/src/modules/notes/notes.services.ts
index 11a547d4..bc2478b5 100644
--- a/packages/app-client/src/modules/notes/notes.services.ts
+++ b/packages/app-client/src/modules/notes/notes.services.ts
@@ -43,6 +43,7 @@ async function fetchNoteById({ noteId }: { noteId: string }) {
     assets: string[];
     serializationFormat: string;
     encryptionAlgorithm: string;
+    resultFormat: 'raw' | 'code' | 'markdown';
   }; }>({
     path: `/api/notes/${noteId}`,
     method: 'GET',

From adee17201f798ce68c78b848e5e5ef99e5f2c9ef Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 09:13:53 +0000
Subject: [PATCH 08/18] feat: add result format tab in view note

---
 .../modules/notes/pages/view-note.page.tsx    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/app-client/src/modules/notes/pages/view-note.page.tsx b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
index 92bb49b3..a0e7a014 100644
--- a/packages/app-client/src/modules/notes/pages/view-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
@@ -7,6 +7,7 @@ import { CopyButton } from '@/modules/shared/utils/copy';
 import { Alert, AlertDescription } from '@/modules/ui/components/alert';
 import { Button } from '@/modules/ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/modules/ui/components/card';
+import { Tabs, TabsIndicator, TabsList, TabsTrigger } from '@/modules/ui/components/tabs';
 import { TextField, TextFieldLabel, TextFieldRoot } from '@/modules/ui/components/textfield';
 import { formatBytes, safely, safelySync } from '@corentinth/chisels';
 import { decryptNote, noteAssetsToFiles, parseNoteUrlHashFragment } from '@enclosed/lib';
@@ -67,8 +68,9 @@ export const ViewNotePage: Component = () => {
   const location = useLocation();
   const [isPasswordEntered, setIsPasswordEntered] = createSignal(false);
   const [getError, setError] = createSignal<{ title: string; description: string; action?: JSX.Element } | null>(null);
-  const [getNote, setNote] = createSignal<{ payload: string; isPasswordProtected: boolean; encryptionAlgorithm: string; serializationFormat: string } | null>(null);
+  const [getNote, setNote] = createSignal<{ payload: string; isPasswordProtected: boolean; encryptionAlgorithm: string; serializationFormat: string; resultFormat: 'raw' | 'code' | 'markdown' } | null>(null);
   const [getDecryptedNote, setDecryptedNote] = createSignal<string | null>(null);
+  const [getResultFormat, setResultFormat] = createSignal<'raw' | 'code' | 'markdown' | null>(null);
   const [getIsPasswordInvalid, setIsPasswordInvalid] = createSignal(false);
   const [fileAssets, setFileAssets] = createSignal<File[]>([]);
   const [isDownloadingAllLoading, setIsDownloadingAllLoading] = createSignal(false);
@@ -95,7 +97,7 @@ export const ViewNotePage: Component = () => {
   };
 
   const decrypt = async ({ password }: { password?: string } = {}) => {
-    const { payload, encryptionAlgorithm, serializationFormat } = getNote()!;
+    const { payload, encryptionAlgorithm, serializationFormat, resultFormat } = getNote()!;
 
     const [decryptionResult, decryptionError] = await safely(decryptNote({
       encryptedPayload: payload,
@@ -123,6 +125,7 @@ export const ViewNotePage: Component = () => {
     const files = await noteAssetsToFiles({ noteAssets: note.assets });
     setFileAssets(files);
     setDecryptedNote(note.content);
+    setResultFormat(resultFormat);
     setIsPasswordEntered(true);
   };
 
@@ -318,8 +321,21 @@ export const ViewNotePage: Component = () => {
             {getDecryptedNote() && (
               <div class="flex-1 mb-4 min-w-0">
                 <div class="flex items-center gap-2 mb-4 justify-between">
-                  <div class="text-muted-foreground">
-                    {t('view.note-content')}
+                  <div>
+                    <div class="text-muted-foreground">
+                      {t('view.note-content')}
+                    </div>
+                    <Tabs
+                      value={getResultFormat() as string}
+                      onChange={(value: string) => setResultFormat(value as 'raw' | 'code' | 'markdown')}
+                    >
+                      <TabsList>
+                        <TabsIndicator />
+                        <TabsTrigger value="raw">{t('create.settings.result-formats.raw')}</TabsTrigger>
+                        <TabsTrigger value="code">{t('create.settings.result-formats.code')}</TabsTrigger>
+                        <TabsTrigger value="markdown">{t('create.settings.result-formats.markdown')}</TabsTrigger>
+                      </TabsList>
+                    </Tabs>
                   </div>
                   <CopyButton text={getDecryptedNote()!} variant="secondary" />
                 </div>

From acb6ad8019ca293485f27c5a9b788c1971dcf130 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 13:03:39 +0000
Subject: [PATCH 09/18] feat: install marked and highlight for markdown and
 syntax higlighting format note

---
 packages/app-client/index.html                |  3 +
 packages/app-client/package.json              |  5 ++
 .../src/modules/notes/pages/index.d.ts        |  7 +++
 pnpm-lock.yaml                                | 59 +++++++++++++++++++
 4 files changed, 74 insertions(+)
 create mode 100644 packages/app-client/src/modules/notes/pages/index.d.ts

diff --git a/packages/app-client/index.html b/packages/app-client/index.html
index b0a540d3..8aaa417d 100644
--- a/packages/app-client/index.html
+++ b/packages/app-client/index.html
@@ -33,6 +33,9 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
+
     <!-- Structured Data (JSON-LD for rich snippets) -->
     <script type="application/ld+json">
     {
diff --git a/packages/app-client/package.json b/packages/app-client/package.json
index be908557..383108c7 100644
--- a/packages/app-client/package.json
+++ b/packages/app-client/package.json
@@ -37,8 +37,11 @@
     "@unocss/reset": "^0.64.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "highlight.js": "^9.18.5",
     "jszip": "^3.10.1",
     "lodash-es": "^4.17.21",
+    "marked": "^15.0.5",
+    "marked-highlight": "^2.2.1",
     "solid-js": "^1.8.11",
     "solid-sonner": "^0.2.8",
     "tailwind-merge": "^2.5.2",
@@ -49,8 +52,10 @@
     "@antfu/eslint-config": "catalog:",
     "@iconify-json/tabler": "^1.1.120",
     "@playwright/test": "^1.46.1",
+    "@types/highlight.js": "^10.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "catalog:",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "catalog:",
     "jsdom": "^25.0.0",
     "tsx": "^4.19.1",
diff --git a/packages/app-client/src/modules/notes/pages/index.d.ts b/packages/app-client/src/modules/notes/pages/index.d.ts
new file mode 100644
index 00000000..7061ed9b
--- /dev/null
+++ b/packages/app-client/src/modules/notes/pages/index.d.ts
@@ -0,0 +1,7 @@
+declare module 'highlight.js';
+declare module 'highlight.js/lib/languages/javascript';
+declare module 'highlight.js/lib/languages/plaintext';
+declare module 'highlight.js/lib/languages/python';
+declare module 'highlight.js/lib/languages/bash';
+declare module 'highlight.js/lib/languages/stata';
+declare module 'highlight.js/lib/languages/stylus';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40468618..47250b18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,12 +62,21 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      highlight.js:
+        specifier: ^9.18.5
+        version: 9.18.5
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      marked:
+        specifier: ^15.0.5
+        version: 15.0.5
+      marked-highlight:
+        specifier: ^2.2.1
+        version: 2.2.1(marked@15.0.5)
       solid-js:
         specifier: ^1.8.11
         version: 1.9.3
@@ -93,12 +102,18 @@ importers:
       '@playwright/test':
         specifier: ^1.46.1
         version: 1.48.1
+      '@types/highlight.js':
+        specifier: ^10.1.0
+        version: 10.1.0
       '@types/lodash-es':
         specifier: ^4.17.12
         version: 4.17.12
       '@types/node':
         specifier: 'catalog:'
         version: 22.7.4
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
       eslint:
         specifier: 'catalog:'
         version: 9.11.0(jiti@1.21.6)
@@ -2089,6 +2104,10 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/highlight.js@10.1.0':
+    resolution: {integrity: sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==}
+    deprecated: This is a stub types definition. highlight.js provides its own type definitions, so you do not need this installed.
+
   '@types/jsonfile@6.1.4':
     resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
 
@@ -2134,6 +2153,12 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/react-syntax-highlighter@15.5.13':
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+
+  '@types/react@19.0.2':
+    resolution: {integrity: sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -3485,6 +3510,10 @@ packages:
   help-me@5.0.0:
     resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
 
+  highlight.js@9.18.5:
+    resolution: {integrity: sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==}
+    deprecated: Support has ended for 9.x series. Upgrade to @latest
+
   hono@4.6.6:
     resolution: {integrity: sha512-euUj5qwvtkG+p38GFs0LYacwaoS2hYRAGn9ysAggiwT2QBcPnT1XYUCW3hatW4C1KzAXTYuQ08BlVDJtAGuhlg==}
     engines: {node: '>=16.9.0'}
@@ -3870,6 +3899,16 @@ packages:
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
+  marked-highlight@2.2.1:
+    resolution: {integrity: sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==}
+    peerDependencies:
+      marked: '>=4 <16'
+
+  marked@15.0.5:
+    resolution: {integrity: sha512-xN+kSuqHjxWg+Q47yhhZMUP+kO1qHobvXkkm6FX+7N6lDvanLDd8H7AQ0jWDDyq+fDt/cSrJaBGyWYHXy0KQWA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mdast-util-find-and-replace@3.0.1:
     resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
 
@@ -7025,6 +7064,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/highlight.js@10.1.0':
+    dependencies:
+      highlight.js: 9.18.5
+
   '@types/jsonfile@6.1.4':
     dependencies:
       '@types/node': 22.7.5
@@ -7076,6 +7119,14 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/react-syntax-highlighter@15.5.13':
+    dependencies:
+      '@types/react': 19.0.2
+
+  '@types/react@19.0.2':
+    dependencies:
+      csstype: 3.1.3
+
   '@types/resolve@1.20.2': {}
 
   '@types/unist@3.0.3': {}
@@ -8799,6 +8850,8 @@ snapshots:
 
   help-me@5.0.0: {}
 
+  highlight.js@9.18.5: {}
+
   hono@4.6.6: {}
 
   hookable@5.5.3: {}
@@ -9183,6 +9236,12 @@ snapshots:
 
   markdown-table@3.0.3: {}
 
+  marked-highlight@2.2.1(marked@15.0.5):
+    dependencies:
+      marked: 15.0.5
+
+  marked@15.0.5: {}
+
   mdast-util-find-and-replace@3.0.1:
     dependencies:
       '@types/mdast': 4.0.4

From 3d1f5c35366f9ba864255689c8e34d5529b09ed2 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 13:04:14 +0000
Subject: [PATCH 10/18] feat: integrate markdown and code format for note

---
 .../modules/notes/pages/reset-markdown.css    | 11 ++++
 .../modules/notes/pages/view-note.page.tsx    | 62 ++++++++++++++++---
 2 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 packages/app-client/src/modules/notes/pages/reset-markdown.css

diff --git a/packages/app-client/src/modules/notes/pages/reset-markdown.css b/packages/app-client/src/modules/notes/pages/reset-markdown.css
new file mode 100644
index 00000000..681bfda3
--- /dev/null
+++ b/packages/app-client/src/modules/notes/pages/reset-markdown.css
@@ -0,0 +1,11 @@
+.markdown-body ol {
+    list-style: revert;
+}
+
+.markdown-body ul {
+    list-style: revert;
+}
+
+.markdown-body menu {
+    list-style: revert;
+}
\ No newline at end of file
diff --git a/packages/app-client/src/modules/notes/pages/view-note.page.tsx b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
index a0e7a014..72733e88 100644
--- a/packages/app-client/src/modules/notes/pages/view-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
@@ -12,9 +12,26 @@ import { TextField, TextFieldLabel, TextFieldRoot } from '@/modules/ui/component
 import { formatBytes, safely, safelySync } from '@corentinth/chisels';
 import { decryptNote, noteAssetsToFiles, parseNoteUrlHashFragment } from '@enclosed/lib';
 import { useLocation, useNavigate, useParams } from '@solidjs/router';
+import hljs from 'highlight.js';
+import hljsbash from 'highlight.js/lib/languages/bash';
+import hljsjavascript from 'highlight.js/lib/languages/javascript';
+import hljsplaintext from 'highlight.js/lib/languages/plaintext';
+import hljspython from 'highlight.js/lib/languages/python';
+import hljsstata from 'highlight.js/lib/languages/stata';
+import hljsstylus from 'highlight.js/lib/languages/stylus';
 import JSZip from 'jszip';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import { type Component, createSignal, type JSX, Match, onMount, Show, Switch } from 'solid-js';
 import { fetchNoteById, fetchNoteExists } from '../notes.services';
+import './reset-markdown.css';
+
+hljs.registerLanguage('javascript', hljsjavascript);
+hljs.registerLanguage('javascript', hljsplaintext);
+hljs.registerLanguage('javascript', hljspython);
+hljs.registerLanguage('javascript', hljsbash);
+hljs.registerLanguage('javascript', hljsstata);
+hljs.registerLanguage('javascript', hljsstylus);
 
 const RequestPasswordForm: Component<{ onPasswordEntered: (args: { password: string }) => void; getIsPasswordInvalid: () => boolean; setIsPasswordInvalid: (value: boolean) => void }> = (props) => {
   const [getPassword, setPassword] = createSignal('');
@@ -70,6 +87,8 @@ export const ViewNotePage: Component = () => {
   const [getError, setError] = createSignal<{ title: string; description: string; action?: JSX.Element } | null>(null);
   const [getNote, setNote] = createSignal<{ payload: string; isPasswordProtected: boolean; encryptionAlgorithm: string; serializationFormat: string; resultFormat: 'raw' | 'code' | 'markdown' } | null>(null);
   const [getDecryptedNote, setDecryptedNote] = createSignal<string | null>(null);
+  const [getFormattedNote, setFormattedNote] = createSignal<string | null>(null);
+  const [getDefaultResultFormat, setDefaultResultFormat] = createSignal<'raw' | 'code' | 'markdown' | null>(null);
   const [getResultFormat, setResultFormat] = createSignal<'raw' | 'code' | 'markdown' | null>(null);
   const [getIsPasswordInvalid, setIsPasswordInvalid] = createSignal(false);
   const [fileAssets, setFileAssets] = createSignal<File[]>([]);
@@ -125,6 +144,22 @@ export const ViewNotePage: Component = () => {
     const files = await noteAssetsToFiles({ noteAssets: note.assets });
     setFileAssets(files);
     setDecryptedNote(note.content);
+    setFormattedNote(await new Marked()
+      .use(markedHighlight({
+        emptyLangClass: 'hljs',
+        langPrefix: 'hljs language-',
+        highlight(code) {
+          return hljs.highlightAuto(code).value;
+        },
+      }))
+      .parse(resultFormat === 'markdown'
+        ? note.content
+        : `\`\`\`
+${note.content}
+\`\`\`
+        `));
+
+    setDefaultResultFormat(resultFormat);
     setResultFormat(resultFormat);
     setIsPasswordEntered(true);
   };
@@ -318,7 +353,7 @@ export const ViewNotePage: Component = () => {
         <Match when={getDecryptedNote() || fileAssets().length > 0}>
 
           <div class="mx-auto max-w-1200px px-6 mt-6 flex gap-4 md:flex-row-reverse flex-col justify-center min-w-0">
-            {getDecryptedNote() && (
+            {getDecryptedNote() && getResultFormat() && (
               <div class="flex-1 mb-4 min-w-0">
                 <div class="flex items-center gap-2 mb-4 justify-between">
                   <div>
@@ -332,21 +367,28 @@ export const ViewNotePage: Component = () => {
                       <TabsList>
                         <TabsIndicator />
                         <TabsTrigger value="raw">{t('create.settings.result-formats.raw')}</TabsTrigger>
-                        <TabsTrigger value="code">{t('create.settings.result-formats.code')}</TabsTrigger>
-                        <TabsTrigger value="markdown">{t('create.settings.result-formats.markdown')}</TabsTrigger>
+                        <TabsTrigger value={getDefaultResultFormat() as string}>{getDefaultResultFormat()}</TabsTrigger>
                       </TabsList>
                     </Tabs>
                   </div>
                   <CopyButton text={getDecryptedNote()!} variant="secondary" />
                 </div>
 
-                <Card class="w-full rounded-md shadow-sm mb-2">
-                  <CardContent class="p-6 overflow-x-auto max-w-100%">
-                    <pre data-test-id="note-content-display">
-                      {getDecryptedNote()}
-                    </pre>
-                  </CardContent>
-                </Card>
+                {getDefaultResultFormat() === 'markdown' || getResultFormat() === 'raw'
+                  ? (
+                      <Card class="w-full rounded-md shadow-sm mb-2">
+                        <CardContent class="p-6 overflow-x-auto max-w-100%">
+                          {getResultFormat() === 'raw'
+                            ? (
+                                <pre data-test-id="note-content-display">
+                                  {getDecryptedNote()}
+                                </pre>
+                              )
+                            : <div class="markdown-body" innerHTML={getFormattedNote() || ''} />}
+                        </CardContent>
+                      </Card>
+                    )
+                  : <div class="markdown-body" innerHTML={getFormattedNote() || ''} />}
 
               </div>
             )}

From 3cf70a63a6395769b77b35c257c832bd9614276c Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Mon, 6 Jan 2025 13:10:01 +0000
Subject: [PATCH 11/18] refactor: unit test refactor for result format

---
 .../create-and-view-note-authenticated.e2e.test.ts   |  4 ++++
 .../create-and-view-note-unauthenticated.e2e.test.ts |  5 +++++
 .../notes/e2e/no-expiration-delay.e2e.test.ts        |  2 ++
 .../notes/e2e/size-limited-note-cration.e2e.test.ts  |  1 +
 .../src/modules/notes/notes.models.test.ts           |  2 ++
 .../src/modules/notes/notes.repository.test.ts       | 12 ++++++++++++
 6 files changed, 26 insertions(+)

diff --git a/packages/app-server/src/modules/notes/e2e/create-and-view-note-authenticated.e2e.test.ts b/packages/app-server/src/modules/notes/e2e/create-and-view-note-authenticated.e2e.test.ts
index 0fdf87f6..b3315319 100644
--- a/packages/app-server/src/modules/notes/e2e/create-and-view-note-authenticated.e2e.test.ts
+++ b/packages/app-server/src/modules/notes/e2e/create-and-view-note-authenticated.e2e.test.ts
@@ -28,6 +28,7 @@ describe('e2e', () => {
           payload: '<encrypted-content>',
           deleteAfterReading: false,
           ttlInSeconds: 600,
+          resultFormat: 'raw',
           encryptionAlgorithm: 'aes-256-gcm',
           serializationFormat: 'cbor-array',
         };
@@ -59,6 +60,7 @@ describe('e2e', () => {
 
         expect(omit(retrievedNote, 'expirationDate')).to.eql({
           payload: '<encrypted-content>',
+          resultFormat: 'raw',
           encryptionAlgorithm: 'aes-256-gcm',
           serializationFormat: 'cbor-array',
         });
@@ -76,6 +78,7 @@ describe('e2e', () => {
           payload: '<encrypted-content>',
           deleteAfterReading: false,
           ttlInSeconds: 600,
+          resultFormat: 'raw',
           encryptionAlgorithm: 'aes-256-gcm',
           serializationFormat: 'cbor-array',
           isPublic: false,
@@ -120,6 +123,7 @@ describe('e2e', () => {
         expect(await viewNoteAuthResponse.json()).to.eql({
           note: {
             payload: '<encrypted-content>',
+            resultFormat: 'raw',
             encryptionAlgorithm: 'aes-256-gcm',
             serializationFormat: 'cbor-array',
           },
diff --git a/packages/app-server/src/modules/notes/e2e/create-and-view-note-unauthenticated.e2e.test.ts b/packages/app-server/src/modules/notes/e2e/create-and-view-note-unauthenticated.e2e.test.ts
index dccbd8a3..82963e57 100644
--- a/packages/app-server/src/modules/notes/e2e/create-and-view-note-unauthenticated.e2e.test.ts
+++ b/packages/app-server/src/modules/notes/e2e/create-and-view-note-unauthenticated.e2e.test.ts
@@ -16,6 +16,7 @@ describe('e2e', () => {
         payload: '<encrypted-content>',
         deleteAfterReading: false,
         ttlInSeconds: 600,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       };
@@ -44,6 +45,7 @@ describe('e2e', () => {
 
       expect(omit(retrievedNote, 'expirationDate')).to.eql({
         payload: '<encrypted-content>',
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -64,6 +66,7 @@ describe('e2e', () => {
             payload: '<encrypted-content>',
             deleteAfterReading: false,
             ttlInSeconds: 600,
+            resultFormat: 'raw',
             encryptionAlgorithm: 'aes-256-gcm',
             serializationFormat: 'foo', // <- invalid serialization format
           }),
@@ -101,6 +104,7 @@ describe('e2e', () => {
             payload: '<encrypted-content>',
             deleteAfterReading: false,
             ttlInSeconds: 600,
+            resultFormat: 'raw',
             encryptionAlgorithm: 'foo', // <- invalid encryption algorithm
             serializationFormat: 'cbor-array',
           }),
@@ -138,6 +142,7 @@ describe('e2e', () => {
             payload: '<encrypted-content>',
             deleteAfterReading: false,
             ttlInSeconds: 600,
+            resultFormat: 'raw',
             encryptionAlgorithm: 'aes-256-gcm',
             serializationFormat: 'cbor-array',
             isPublic: false, // <- non-public note
diff --git a/packages/app-server/src/modules/notes/e2e/no-expiration-delay.e2e.test.ts b/packages/app-server/src/modules/notes/e2e/no-expiration-delay.e2e.test.ts
index 1aa9759e..fc5b384a 100644
--- a/packages/app-server/src/modules/notes/e2e/no-expiration-delay.e2e.test.ts
+++ b/packages/app-server/src/modules/notes/e2e/no-expiration-delay.e2e.test.ts
@@ -21,6 +21,7 @@ describe('e2e', () => {
         deleteAfterReading: false,
         ttlInSeconds: undefined,
         payload: 'aaaaaaaa',
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       };
@@ -56,6 +57,7 @@ describe('e2e', () => {
         deleteAfterReading: false,
         ttlInSeconds: undefined,
         payload: 'aaaaaaaa',
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       };
diff --git a/packages/app-server/src/modules/notes/e2e/size-limited-note-cration.e2e.test.ts b/packages/app-server/src/modules/notes/e2e/size-limited-note-cration.e2e.test.ts
index 2e47188e..6f18eaef 100644
--- a/packages/app-server/src/modules/notes/e2e/size-limited-note-cration.e2e.test.ts
+++ b/packages/app-server/src/modules/notes/e2e/size-limited-note-cration.e2e.test.ts
@@ -21,6 +21,7 @@ describe('e2e', () => {
         deleteAfterReading: false,
         ttlInSeconds: 600,
         payload: 'a'.repeat(1024 * 1024 + 1),
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       };
diff --git a/packages/app-server/src/modules/notes/notes.models.test.ts b/packages/app-server/src/modules/notes/notes.models.test.ts
index 46f0f193..eb81c9fb 100644
--- a/packages/app-server/src/modules/notes/notes.models.test.ts
+++ b/packages/app-server/src/modules/notes/notes.models.test.ts
@@ -40,6 +40,7 @@ describe('notes models', () => {
         payload: '<encrypted-content>',
         expirationDate: new Date('2024-01-01T00:00:00Z'),
         deleteAfterReading: false,
+        resultFormat: 'raw',
         serializationFormat: 'cbor-array',
         encryptionAlgorithm: 'aes-256-gcm',
         isPublic: false,
@@ -48,6 +49,7 @@ describe('notes models', () => {
       expect(formatNoteForApi({ note: storedNote })).to.eql({
         apiNote: {
           payload: '<encrypted-content>',
+          resultFormat: 'raw',
           encryptionAlgorithm: 'aes-256-gcm',
           serializationFormat: 'cbor-array',
         },
diff --git a/packages/app-server/src/modules/notes/notes.repository.test.ts b/packages/app-server/src/modules/notes/notes.repository.test.ts
index 6afcce36..8d2b1873 100644
--- a/packages/app-server/src/modules/notes/notes.repository.test.ts
+++ b/packages/app-server/src/modules/notes/notes.repository.test.ts
@@ -12,6 +12,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -24,6 +25,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: new Date('2024-01-01T00:01:00.000Z'),
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -36,6 +38,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -54,6 +57,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -62,6 +66,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -90,6 +95,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: true,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -112,6 +118,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -120,6 +127,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -157,6 +165,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         ttlInSeconds: 60,
         deleteAfterReading: false,
+        resultFormat: 'raw',
         generateNoteId: () => `note-${noteIdIndex++}`,
         now: new Date('2024-01-01T00:00:00.000Z'),
         encryptionAlgorithm: 'aes-256-gcm',
@@ -171,6 +180,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
         isPublic: true,
@@ -186,6 +196,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: false,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });
@@ -203,6 +214,7 @@ describe('notes repository', () => {
         payload: '<encrypted-content>',
         expirationDate: '2024-01-01T00:01:00.000Z',
         deleteAfterReading: true,
+        resultFormat: 'raw',
         encryptionAlgorithm: 'aes-256-gcm',
         serializationFormat: 'cbor-array',
       });

From 04e232831b63db995ad6c2db0d40c3146e9ccfc6 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 01:32:16 +0000
Subject: [PATCH 12/18] fix: format tab double raw

---
 .../modules/notes/pages/view-note.page.tsx    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/app-client/src/modules/notes/pages/view-note.page.tsx b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
index 72733e88..17508c4c 100644
--- a/packages/app-client/src/modules/notes/pages/view-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
@@ -360,16 +360,18 @@ ${note.content}
                     <div class="text-muted-foreground">
                       {t('view.note-content')}
                     </div>
-                    <Tabs
-                      value={getResultFormat() as string}
-                      onChange={(value: string) => setResultFormat(value as 'raw' | 'code' | 'markdown')}
-                    >
-                      <TabsList>
-                        <TabsIndicator />
-                        <TabsTrigger value="raw">{t('create.settings.result-formats.raw')}</TabsTrigger>
-                        <TabsTrigger value={getDefaultResultFormat() as string}>{getDefaultResultFormat()}</TabsTrigger>
-                      </TabsList>
-                    </Tabs>
+                    {getDefaultResultFormat() !== 'raw' && (
+                      <Tabs
+                        value={getResultFormat() as string}
+                        onChange={(value: string) => setResultFormat(value as 'raw' | 'code' | 'markdown')}
+                      >
+                        <TabsList>
+                          <TabsIndicator />
+                          <TabsTrigger value="raw">{t('create.settings.result-formats.raw')}</TabsTrigger>
+                          <TabsTrigger value={getDefaultResultFormat() as string}>{getDefaultResultFormat()}</TabsTrigger>
+                        </TabsList>
+                      </Tabs>
+                    )}
                   </div>
                   <CopyButton text={getDecryptedNote()!} variant="secondary" />
                 </div>

From 18714538c72948d66fd238105a90fff95679979f Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 01:32:45 +0000
Subject: [PATCH 13/18] feat: add preview section in create note page

---
 .../modules/notes/pages/create-note.page.tsx  | 73 ++++++++++++++++---
 1 file changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
index f3fe24ea..ffb97dd1 100644
--- a/packages/app-client/src/modules/notes/pages/create-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -10,7 +10,7 @@ import { cn } from '@/modules/shared/style/cn';
 import { CopyButton, useCopy } from '@/modules/shared/utils/copy';
 import { Alert, AlertDescription } from '@/modules/ui/components/alert';
 import { Button } from '@/modules/ui/components/button';
-import { Card, CardHeader } from '@/modules/ui/components/card';
+import { Card, CardContent, CardHeader } from '@/modules/ui/components/card';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/modules/ui/components/dropdown-menu';
 import { toast } from '@/modules/ui/components/sonner';
 import { SwitchControl, SwitchLabel, SwitchThumb, Switch as SwitchUiComponent } from '@/modules/ui/components/switch';
@@ -19,12 +19,16 @@ import { TextArea } from '@/modules/ui/components/textarea';
 import { TextField, TextFieldLabel, TextFieldRoot } from '@/modules/ui/components/textfield';
 import { safely } from '@corentinth/chisels';
 import { useNavigate } from '@solidjs/router';
+import hljs from 'highlight.js';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import { type Component, createSignal, Match, onCleanup, onMount, Show, Switch } from 'solid-js';
 import { renderSVG as renderQrCodeSvg } from 'uqr';
 import { FileUploaderButton } from '../components/file-uploader';
 import { NotePasswordField } from '../components/note-password-field';
 import { useNoteContext } from '../notes.context';
 import { encryptAndCreateNote } from '../notes.usecases';
+import './reset-markdown.css';
 
 const QrCodeCard: Component<{ noteUrl: string }> = (props) => {
   const getNoteUrl = () => props.noteUrl;
@@ -114,6 +118,7 @@ export const CreateNotePage: Component = () => {
   const { onResetNoteForm, removeResetNoteFormHandler } = useNoteContext();
 
   const [getContent, setContent] = createSignal('');
+  const [getFormattedContent, setFormattedContent] = createSignal('');
   const [getPassword, setPassword] = createSignal('');
   const [getNoteUrl, setNoteUrl] = createSignal('');
   const [getError, setError] = createSignal<{ message: string; details?: string } | null>(null);
@@ -204,11 +209,40 @@ export const CreateNotePage: Component = () => {
     console.error(error);
   };
 
-  function updateContent(text: string) {
+  async function handleFormattedContent(text: string, format: 'raw' | 'code' | 'markdown') {
+    if (format === 'raw') {
+      return setFormattedContent(text);
+    }
+    const formattedContent = await new Marked()
+      .use(markedHighlight({
+        emptyLangClass: 'hljs',
+        langPrefix: 'hljs language-',
+        highlight(code) {
+          return hljs.highlightAuto(code).value;
+        },
+      }))
+      .parse(format === 'markdown'
+        ? text
+        : `\`\`\`
+${text.replaceAll('```', '"""')}
+\`\`\`
+        `);
+
+    setFormattedContent(formattedContent);
+  }
+
+  async function updateContent(text: string) {
+    handleFormattedContent(text, getResultFormat());
     setContent(text);
     setError(null);
   }
 
+  async function handleResultFormatChange(value: string) {
+    const format = value as Config['defaultNoteResultFormat'];
+    handleFormattedContent(getContent(), format);
+    setResultFormat(format);
+  }
+
   function updateUploadedFiles(files: File[]) {
     setUploadedFiles(prevFiles => [...prevFiles, ...files]);
     setError(null);
@@ -236,15 +270,30 @@ export const CreateNotePage: Component = () => {
     <div class="mx-auto max-w-1200px px-6 mt-6 flex gap-4 flex-col sm:flex-row">
       <Switch>
         <Match when={!getIsNoteCreated()}>
-          <TextFieldRoot class="w-full ">
-            <TextArea
-              placeholder={t('create.settings.placeholder')}
-              class="flex-1 p-4 min-h-300px sm:min-h-700px"
-              value={getContent()}
-              onInput={e => updateContent(e.currentTarget.value)}
-              data-test-id="note-content"
-            />
-          </TextFieldRoot>
+          <div class="w-full max-w-800px flex flex-col gap-5">
+            <TextFieldRoot class="w-full">
+              <TextArea
+                placeholder={t('create.settings.placeholder')}
+                class="flex-1 p-4 min-h-300px"
+                value={getContent()}
+                onInput={e => updateContent(e.currentTarget.value)}
+                data-test-id="note-content"
+              />
+            </TextFieldRoot>
+
+            <Card class="w-full relative rounded-md shadow-sm">
+              <CardContent class="p-6 pt-10 overflow-x-auto max-w-100%">
+                <div class="absolute top-0 left-0 bg-gray-2 rounded-br-md py-1 px-4 text-xs text-gray-6">preview</div>
+                {getResultFormat() === 'raw'
+                  ? (
+                      <pre data-test-id="note-content-display">
+                        {getContent()}
+                      </pre>
+                    )
+                  : <div class="markdown-body" innerHTML={getFormattedContent() || ''} />}
+              </CardContent>
+            </Card>
+          </div>
 
           <div class="w-full sm:w-320px flex flex-col gap-4 flex-shrink-0">
             <TextFieldRoot class="w-full">
@@ -292,7 +341,7 @@ export const CreateNotePage: Component = () => {
 
               <Tabs
                 value={getResultFormat()}
-                onChange={(value: string) => setResultFormat(value as Config['defaultNoteResultFormat'])}
+                onChange={handleResultFormatChange}
               >
                 <TabsList>
                   <TabsIndicator />

From d0ca2ed37003bc05ecee5d4d44247b200f3d5e9c Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 01:45:23 +0000
Subject: [PATCH 14/18] fix: max height preview create note

---
 .../app-client/src/modules/notes/pages/create-note.page.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
index ffb97dd1..0f697d2c 100644
--- a/packages/app-client/src/modules/notes/pages/create-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -282,7 +282,7 @@ ${text.replaceAll('```', '"""')}
             </TextFieldRoot>
 
             <Card class="w-full relative rounded-md shadow-sm">
-              <CardContent class="p-6 pt-10 overflow-x-auto max-w-100%">
+              <CardContent class="p-6 pt-10 overflow-auto max-w-100% max-h-400px">
                 <div class="absolute top-0 left-0 bg-gray-2 rounded-br-md py-1 px-4 text-xs text-gray-6">preview</div>
                 {getResultFormat() === 'raw'
                   ? (

From f3649941de4923d681098c0e405ac1230ce888af Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 02:12:17 +0000
Subject: [PATCH 15/18] fix: triple backtick for code format note

---
 packages/app-client/src/modules/notes/pages/view-note.page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app-client/src/modules/notes/pages/view-note.page.tsx b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
index 17508c4c..4bbcfb9d 100644
--- a/packages/app-client/src/modules/notes/pages/view-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/view-note.page.tsx
@@ -155,7 +155,7 @@ export const ViewNotePage: Component = () => {
       .parse(resultFormat === 'markdown'
         ? note.content
         : `\`\`\`
-${note.content}
+${note.content.replaceAll('```', '"""')}
 \`\`\`
         `));
 

From b4d34e5e37f82e882bb52b81f5954dc298e1eb9f Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 06:54:48 +0000
Subject: [PATCH 16/18] refactor: en locale for preview text

---
 packages/app-client/src/locales/en.json                         | 1 +
 .../app-client/src/modules/notes/pages/create-note.page.tsx     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/app-client/src/locales/en.json b/packages/app-client/src/locales/en.json
index eacd7cfd..aa9087ce 100644
--- a/packages/app-client/src/locales/en.json
+++ b/packages/app-client/src/locales/en.json
@@ -67,6 +67,7 @@
       "description": "Here is a note shared with you."
     },
     "settings": {
+      "preview": "preview",
       "placeholder": "Type your note here...",
       "password": {
         "label": "Note password",
diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
index 0f697d2c..e50228dc 100644
--- a/packages/app-client/src/modules/notes/pages/create-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -283,7 +283,7 @@ ${text.replaceAll('```', '"""')}
 
             <Card class="w-full relative rounded-md shadow-sm">
               <CardContent class="p-6 pt-10 overflow-auto max-w-100% max-h-400px">
-                <div class="absolute top-0 left-0 bg-gray-2 rounded-br-md py-1 px-4 text-xs text-gray-6">preview</div>
+                <div class="absolute top-0 left-0 bg-gray-2 rounded-br-md py-1 px-4 text-xs text-gray-6">{t('create.settings.preview')}</div>
                 {getResultFormat() === 'raw'
                   ? (
                       <pre data-test-id="note-content-display">

From 4a67842869be578d1d481065138bdad531cf5501 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 10:18:46 +0000
Subject: [PATCH 17/18] fix: manual toggle theme

---
 packages/app-client/index.html                |    4 +-
 .../app-client/public/github-highlight.css    |  121 ++
 .../app-client/public/github-markdown.css     | 1066 +++++++++++++++++
 .../modules/notes/pages/create-note.page.tsx  |    6 +-
 4 files changed, 1193 insertions(+), 4 deletions(-)
 create mode 100644 packages/app-client/public/github-highlight.css
 create mode 100644 packages/app-client/public/github-markdown.css

diff --git a/packages/app-client/index.html b/packages/app-client/index.html
index 8aaa417d..52a66646 100644
--- a/packages/app-client/index.html
+++ b/packages/app-client/index.html
@@ -33,8 +33,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
+    <link rel="stylesheet" href="/github-markdown.css">
+    <link rel="stylesheet" href="/github-highlight.css">
 
     <!-- Structured Data (JSON-LD for rich snippets) -->
     <script type="application/ld+json">
diff --git a/packages/app-client/public/github-highlight.css b/packages/app-client/public/github-highlight.css
new file mode 100644
index 00000000..0a523b1f
--- /dev/null
+++ b/packages/app-client/public/github-highlight.css
@@ -0,0 +1,121 @@
+.markdown-body[data-theme="light"] {
+  color-scheme: light;
+  --color-text: #24292e;
+  --color-text-keyword: #d73a49;
+  --color-text-title: #6f42c1;
+  --color-text-attribute: #005cc5;
+  --color-text-string: #032f62;
+  --color-text-symbol: #e36209;
+  --color-text-code: #6a737d;
+  --color-text-quote: #22863a;
+  --color-text-section: #005cc5;
+  --color-text-bullet: #735c0f;
+  --color-text-addition: #22863a;
+  --bg-color-text-addition: #f0fff4;
+  --color-text-deletion: #b31d28;
+  --bg-color-text-deletion: #ffeef0;
+}
+
+.markdown-body[data-theme="dark"] {
+  color-scheme: light;
+  --color-text: #c9d1d9;
+  --color-text-keyword: #ff7b72;
+  --color-text-title: #d2a8ff;
+  --color-text-attribute: #79c0ff;
+  --color-text-string: #a5d6ff;
+  --color-text-symbol: #ffa657;
+  --color-text-code: #8b949e;
+  --color-text-quote: #7ee787;
+  --color-text-section: #1f6feb;
+  --color-text-bullet: #f2cc60;
+  --color-text-addition: #aff5b4;
+  --bg-color-text-addition: #033a16;
+  --color-text-deletion: #ffdcd7;
+  --bg-color-text-deletion: #67060c;
+}
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: var(--color-text);
+  background: #fff;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--color-text-keyword);
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--color-text-title);
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: var(--color-text-attribute);
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: var(--color-text-string);
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--color-text-symbol);
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: var(--color-text-code);
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: var(--color-text-quote);
+}
+.hljs-subst {
+  color: var(--color-text);
+}
+.hljs-section {
+  color: var(--color-text-section);
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: var(--color-text-bullet);
+}
+.hljs-emphasis {
+  color: var(--color-text);
+  font-style: italic;
+}
+.hljs-strong {
+  color: var(--color-text);
+  font-weight: 700;
+}
+.hljs-addition {
+  color: var(--color-text-addition);
+  background-color: var(--bg-color-text-addition);
+}
+.hljs-deletion {
+  color: var(--color-text-deletion);
+  background-color: var(--bg-color-text-deletion);
+}
diff --git a/packages/app-client/public/github-markdown.css b/packages/app-client/public/github-markdown.css
new file mode 100644
index 00000000..9e55ee69
--- /dev/null
+++ b/packages/app-client/public/github-markdown.css
@@ -0,0 +1,1066 @@
+.markdown-body {
+  --base-size-4: 0.25rem;
+  --base-size-8: 0.5rem;
+  --base-size-16: 1rem;
+  --base-size-24: 1.5rem;
+  --base-size-40: 2.5rem;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 600;
+  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+  --fgColor-accent: Highlight;
+}
+.markdown-body[data-theme="dark"] {
+  color-scheme: dark;
+  --focus-outlineColor: #1f6feb;
+  --fgColor-default: #f0f6fc;
+  --fgColor-muted: #9198a1;
+  --fgColor-accent: #4493f8;
+  --fgColor-success: #3fb950;
+  --fgColor-attention: #d29922;
+  --fgColor-danger: #f85149;
+  --fgColor-done: #ab7df8;
+  --bgColor-default: #0d1117;
+  --bgColor-muted: #151b23;
+  --bgColor-neutral-muted: #656c7633;
+  --bgColor-attention-muted: #bb800926;
+  --borderColor-default: #3d444d;
+  --borderColor-muted: #3d444db3;
+  --borderColor-neutral-muted: #3d444db3;
+  --borderColor-accent-emphasis: #1f6feb;
+  --borderColor-success-emphasis: #238636;
+  --borderColor-attention-emphasis: #9e6a03;
+  --borderColor-danger-emphasis: #da3633;
+  --borderColor-done-emphasis: #8957e5;
+  --color-prettylights-syntax-comment: #9198a1;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #f0f6fc;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-brackethighlighter-angle: #9198a1;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #f0f6fc;
+  --color-prettylights-syntax-markup-bold: #f0f6fc;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #f0f6fc;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
+}
+
+.markdown-body[data-theme="light"] {
+  color-scheme: light;
+  --focus-outlineColor: #0969da;
+  --fgColor-default: #1f2328;
+  --fgColor-muted: #59636e;
+  --fgColor-accent: #0969da;
+  --fgColor-success: #1a7f37;
+  --fgColor-attention: #9a6700;
+  --fgColor-danger: #d1242f;
+  --fgColor-done: #8250df;
+  --bgColor-default: #ffffff;
+  --bgColor-muted: #f6f8fa;
+  --bgColor-neutral-muted: #818b981f;
+  --bgColor-attention-muted: #fff8c5;
+  --borderColor-default: #d1d9e0;
+  --borderColor-muted: #d1d9e0b3;
+  --borderColor-neutral-muted: #d1d9e0b3;
+  --borderColor-accent-emphasis: #0969da;
+  --borderColor-success-emphasis: #1a7f37;
+  --borderColor-attention-emphasis: #9a6700;
+  --borderColor-danger-emphasis: #cf222e;
+  --borderColor-done-emphasis: #8250df;
+  --color-prettylights-syntax-comment: #59636e;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-prettylights-syntax-entity: #6639ba;
+  --color-prettylights-syntax-storage-modifier-import: #1f2328;
+  --color-prettylights-syntax-entity-tag: #0550ae;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-brackethighlighter-angle: #59636e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #1f2328;
+  --color-prettylights-syntax-markup-bold: #1f2328;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
+}
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0;
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: " ";
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+  display: block;
+}
+.markdown-body summary {
+  display: list-item;
+}
+.markdown-body [hidden] {
+  display: none !important;
+}
+.markdown-body a {
+  background-color: transparent;
+  color: var(--fgColor-accent);
+  text-decoration: none;
+}
+.markdown-body abbr[title] {
+  border-bottom: none;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+.markdown-body b,
+.markdown-body strong {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+.markdown-body dfn {
+  font-style: italic;
+}
+.markdown-body h1 {
+  margin: 0.67em 0;
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--borderColor-muted);
+}
+.markdown-body mark {
+  background-color: var(--bgColor-attention-muted);
+  color: var(--fgColor-default);
+}
+.markdown-body small {
+  font-size: 90%;
+}
+.markdown-body sub,
+.markdown-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.markdown-body sub {
+  bottom: -0.25em;
+}
+.markdown-body sup {
+  top: -0.5em;
+}
+.markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+}
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+  font-family: monospace;
+  font-size: 1em;
+}
+.markdown-body figure {
+  margin: 1em var(--base-size-40);
+}
+.markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: 0 0;
+  border-bottom: 1px solid var(--borderColor-muted);
+  height: 0.25em;
+  padding: 0;
+  margin: var(--base-size-24) 0;
+  background-color: var(--borderColor-default);
+  border: 0;
+}
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.markdown-body [type="button"],
+.markdown-body [type="reset"],
+.markdown-body [type="submit"] {
+  -webkit-appearance: button;
+  appearance: button;
+}
+.markdown-body [type="checkbox"],
+.markdown-body [type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+.markdown-body [type="number"]::-webkit-inner-spin-button,
+.markdown-body [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+.markdown-body [type="search"]::-webkit-search-cancel-button,
+.markdown-body [type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.markdown-body ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+.markdown-body ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+.markdown-body ::placeholder {
+  color: var(--fgColor-muted);
+  opacity: 1;
+}
+.markdown-body hr::before {
+  display: table;
+  content: "";
+}
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+  font-variant: tabular-nums;
+}
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+.markdown-body details summary {
+  cursor: pointer;
+}
+.markdown-body [role="button"]:focus,
+.markdown-body a:focus,
+.markdown-body input[type="checkbox"]:focus,
+.markdown-body input[type="radio"]:focus {
+  outline: 2px solid var(--focus-outlineColor);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+.markdown-body [role="button"]:focus:not(:focus-visible),
+.markdown-body a:focus:not(:focus-visible),
+.markdown-body input[type="checkbox"]:focus:not(:focus-visible),
+.markdown-body input[type="radio"]:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+.markdown-body [role="button"]:focus-visible,
+.markdown-body a:focus-visible,
+.markdown-body input[type="checkbox"]:focus-visible,
+.markdown-body input[type="radio"]:focus-visible {
+  outline: 2px solid var(--focus-outlineColor);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+.markdown-body a:not([class]):focus,
+.markdown-body a:not([class]):focus-visible,
+.markdown-body input[type="checkbox"]:focus,
+.markdown-body input[type="checkbox"]:focus-visible,
+.markdown-body input[type="radio"]:focus,
+.markdown-body input[type="radio"]:focus-visible {
+  outline-offset: 0;
+}
+.markdown-body kbd {
+  display: inline-block;
+  padding: var(--base-size-4);
+  font: 11px
+    var(
+      --fontStack-monospace,
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      Liberation Mono,
+      monospace
+    );
+  line-height: 10px;
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-muted);
+  border: solid 1px var(--borderColor-neutral-muted);
+  border-bottom-color: var(--borderColor-neutral-muted);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: var(--base-size-24);
+  margin-bottom: var(--base-size-16);
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1.25;
+}
+.markdown-body h2 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--borderColor-muted);
+}
+.markdown-body h3 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1.25em;
+}
+.markdown-body h4 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1em;
+}
+.markdown-body h5 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.875em;
+}
+.markdown-body h6 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.85em;
+  color: var(--fgColor-muted);
+}
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--fgColor-muted);
+  border-left: 0.25em solid var(--borderColor-default);
+}
+.markdown-body ol,
+.markdown-body ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+  list-style-type: lower-alpha;
+}
+.markdown-body dd {
+  margin-left: 0;
+}
+.markdown-body code,
+.markdown-body samp,
+.markdown-body tt {
+  font-family: var(
+    --fontStack-monospace,
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace
+  );
+  font-size: 12px;
+}
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: var(
+    --fontStack-monospace,
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace
+  );
+  font-size: 12px;
+  word-wrap: normal;
+}
+.markdown-body .octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+.markdown-body input::-webkit-inner-spin-button,
+.markdown-body input::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.markdown-body .mr-2 {
+  margin-right: var(--base-size-8, 8px) !important;
+}
+.markdown-body::before {
+  display: table;
+  content: "";
+}
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+.markdown-body > :first-child {
+  margin-top: 0 !important;
+}
+.markdown-body > :last-child {
+  margin-bottom: 0 !important;
+}
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+.markdown-body .absent {
+  color: var(--fgColor-danger);
+}
+.markdown-body .anchor {
+  float: left;
+  padding-right: var(--base-size-4);
+  margin-left: -20px;
+  line-height: 1;
+}
+.markdown-body .anchor:focus {
+  outline: 0;
+}
+.markdown-body blockquote,
+.markdown-body details,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+  margin-top: 0;
+  margin-bottom: var(--base-size-16);
+}
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  visibility: hidden;
+}
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+.markdown-body h1 code,
+.markdown-body h1 tt,
+.markdown-body h2 code,
+.markdown-body h2 tt,
+.markdown-body h3 code,
+.markdown-body h3 tt,
+.markdown-body h4 code,
+.markdown-body h4 tt,
+.markdown-body h5 code,
+.markdown-body h5 tt,
+.markdown-body h6 code,
+.markdown-body h6 tt {
+  padding: 0 0.2em;
+  font-size: inherit;
+}
+.markdown-body summary h1,
+.markdown-body summary h2,
+.markdown-body summary h3,
+.markdown-body summary h4,
+.markdown-body summary h5,
+.markdown-body summary h6 {
+  display: inline-block;
+}
+.markdown-body summary h1 .anchor,
+.markdown-body summary h2 .anchor,
+.markdown-body summary h3 .anchor,
+.markdown-body summary h4 .anchor,
+.markdown-body summary h5 .anchor,
+.markdown-body summary h6 .anchor {
+  margin-left: -40px;
+}
+.markdown-body summary h1,
+.markdown-body summary h2 {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+.markdown-body ol.no-list,
+.markdown-body ul.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+.markdown-body ol[type="a s"] {
+  list-style-type: lower-alpha;
+}
+.markdown-body ol[type="A s"] {
+  list-style-type: upper-alpha;
+}
+.markdown-body ol[type="i s"] {
+  list-style-type: lower-roman;
+}
+.markdown-body ol[type="I s"] {
+  list-style-type: upper-roman;
+}
+.markdown-body ol[type="1"] {
+  list-style-type: decimal;
+}
+.markdown-body div > ol:not([type]) {
+  list-style-type: decimal;
+}
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.markdown-body li > p {
+  margin-top: var(--base-size-16);
+}
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+.markdown-body dl {
+  padding: 0;
+}
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: var(--base-size-16);
+  font-size: 1em;
+  font-style: italic;
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+.markdown-body dl dd {
+  padding: 0 var(--base-size-16);
+  margin-bottom: var(--base-size-16);
+}
+.markdown-body table th {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+.markdown-body table td,
+.markdown-body table th {
+  padding: 6px 13px;
+  border: 1px solid var(--borderColor-default);
+}
+.markdown-body table td > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body table tr {
+  background-color: var(--bgColor-default);
+  border-top: 1px solid var(--borderColor-muted);
+}
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--bgColor-muted);
+}
+.markdown-body table img {
+  background-color: transparent;
+}
+.markdown-body img[align="right"] {
+  padding-left: 20px;
+}
+.markdown-body img[align="left"] {
+  padding-right: 20px;
+}
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.frame > span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid var(--borderColor-default);
+}
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+.markdown-body span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: var(--fgColor-default);
+}
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+.markdown-body span.align-center > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+.markdown-body span.align-right > span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+.markdown-body span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+.markdown-body span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+.markdown-body span.float-right > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+.markdown-body code,
+.markdown-body tt {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--bgColor-neutral-muted);
+  border-radius: 6px;
+}
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+.markdown-body del code {
+  text-decoration: inherit;
+}
+.markdown-body samp {
+  font-size: 85%;
+}
+.markdown-body pre code {
+  font-size: 100%;
+}
+.markdown-body pre > code {
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: 0 0;
+  border: 0;
+}
+.markdown-body .highlight {
+  margin-bottom: var(--base-size-16);
+}
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: var(--base-size-16);
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-muted);
+  border-radius: 6px;
+}
+.markdown-body pre code,
+.markdown-body pre tt {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  padding: 5px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+.markdown-body .csv-data .blob-num {
+  padding: 10px var(--base-size-8) 9px;
+  text-align: right;
+  background: var(--bgColor-default);
+  border: 0;
+}
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+.markdown-body .csv-data th {
+  font-weight: var(--base-text-weight-semibold, 600);
+  background: var(--bgColor-muted);
+  border-top: 0;
+}
+.markdown-body [data-footnote-ref]::before {
+  content: "[";
+}
+.markdown-body [data-footnote-ref]::after {
+  content: "]";
+}
+.markdown-body .footnotes {
+  font-size: 12px;
+  color: var(--fgColor-muted);
+  border-top: 1px solid var(--borderColor-default);
+}
+.markdown-body .footnotes ol {
+  padding-left: var(--base-size-16);
+}
+.markdown-body .footnotes ol ul {
+  display: inline-block;
+  padding-left: var(--base-size-16);
+  margin-top: var(--base-size-16);
+}
+.markdown-body .footnotes li {
+  position: relative;
+}
+.markdown-body .footnotes li:target::before {
+  position: absolute;
+  top: calc(var(--base-size-8) * -1);
+  right: calc(var(--base-size-8) * -1);
+  bottom: calc(var(--base-size-8) * -1);
+  left: calc(var(--base-size-24) * -1);
+  pointer-events: none;
+  content: "";
+  border: 2px solid var(--borderColor-accent-emphasis);
+  border-radius: 6px;
+}
+.markdown-body .footnotes li:target {
+  color: var(--fgColor-default);
+}
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+.markdown-body body:has(:modal) {
+  padding-right: var(--dialog-scrollgutter) !important;
+}
+.markdown-body .pl-c {
+  color: var(--color-prettylights-syntax-comment);
+}
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: var(--color-prettylights-syntax-constant);
+}
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: var(--color-prettylights-syntax-entity);
+}
+.markdown-body .pl-s .pl-s1,
+.markdown-body .pl-smi {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+.markdown-body .pl-ent {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+.markdown-body .pl-k {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.markdown-body .pl-pds,
+.markdown-body .pl-s,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sra,
+.markdown-body .pl-sr .pl-sre {
+  color: var(--color-prettylights-syntax-string);
+}
+.markdown-body .pl-smw,
+.markdown-body .pl-v {
+  color: var(--color-prettylights-syntax-variable);
+}
+.markdown-body .pl-bu {
+  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+}
+.markdown-body .pl-ii {
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+}
+.markdown-body .pl-c2 {
+  color: var(--color-prettylights-syntax-carriage-return-text);
+  background-color: var(--color-prettylights-syntax-carriage-return-bg);
+}
+.markdown-body .pl-sr .pl-cce {
+  font-weight: 700;
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+.markdown-body .pl-ml {
+  color: var(--color-prettylights-syntax-markup-list);
+}
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: 700;
+  color: var(--color-prettylights-syntax-markup-heading);
+}
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: var(--color-prettylights-syntax-markup-italic);
+}
+.markdown-body .pl-mb {
+  font-weight: 700;
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+.markdown-body .pl-md {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+.markdown-body .pl-mi1 {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+.markdown-body .pl-mc {
+  color: var(--color-prettylights-syntax-markup-changed-text);
+  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+}
+.markdown-body .pl-mi2 {
+  color: var(--color-prettylights-syntax-markup-ignored-text);
+  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+}
+.markdown-body .pl-mdr {
+  font-weight: 700;
+  color: var(--color-prettylights-syntax-meta-diff-range);
+}
+.markdown-body .pl-ba {
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+}
+.markdown-body .pl-sg {
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+}
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: var(--color-prettylights-syntax-constant-other-reference-link);
+}
+.markdown-body [role="button"]:focus:not(:focus-visible),
+.markdown-body [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible),
+.markdown-body a:focus:not(:focus-visible),
+.markdown-body button:focus:not(:focus-visible),
+.markdown-body summary:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+.markdown-body [tabindex="0"]:focus:not(:focus-visible),
+.markdown-body details-dialog:focus:not(:focus-visible) {
+  outline: 0;
+}
+.markdown-body g-emoji {
+  display: inline-block;
+  min-width: 1ch;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1em;
+  font-style: normal !important;
+  font-weight: var(--base-text-weight-normal, 400);
+  line-height: 1;
+  vertical-align: -0.075em;
+}
+.markdown-body g-emoji img {
+  width: 1em;
+  height: 1em;
+}
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+.markdown-body .task-list-item label {
+  font-weight: var(--base-text-weight-normal, 400);
+}
+.markdown-body .task-list-item.enabled label {
+  cursor: pointer;
+}
+.markdown-body .task-list-item + .task-list-item {
+  margin-top: var(--base-size-4);
+}
+.markdown-body .task-list-item .handle {
+  display: none;
+}
+.markdown-body .task-list-item-checkbox {
+  margin: 0 0.2em 0.25em -1.4em;
+  vertical-align: middle;
+}
+.markdown-body ul:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em 0.25em 0.2em;
+}
+.markdown-body ol:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em 0.25em 0.2em;
+}
+.markdown-body
+  .contains-task-list:focus-within
+  .task-list-item-convert-container,
+.markdown-body .contains-task-list:hover .task-list-item-convert-container {
+  display: block;
+  width: auto;
+  height: 24px;
+  overflow: visible;
+  clip: auto;
+}
+.markdown-body ::-webkit-calendar-picker-indicator {
+  filter: invert(50%);
+}
+.markdown-body .markdown-alert {
+  padding: var(--base-size-8) var(--base-size-16);
+  margin-bottom: var(--base-size-16);
+  color: inherit;
+  border-left: 0.25em solid var(--borderColor-default);
+}
+.markdown-body .markdown-alert > :first-child {
+  margin-top: 0;
+}
+.markdown-body .markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body .markdown-alert .markdown-alert-title {
+  display: flex;
+  font-weight: var(--base-text-weight-medium, 500);
+  align-items: center;
+  line-height: 1;
+}
+.markdown-body .markdown-alert.markdown-alert-note {
+  border-left-color: var(--borderColor-accent-emphasis);
+}
+.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
+  color: var(--fgColor-accent);
+}
+.markdown-body .markdown-alert.markdown-alert-important {
+  border-left-color: var(--borderColor-done-emphasis);
+}
+.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
+  color: var(--fgColor-done);
+}
+.markdown-body .markdown-alert.markdown-alert-warning {
+  border-left-color: var(--borderColor-attention-emphasis);
+}
+.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
+  color: var(--fgColor-attention);
+}
+.markdown-body .markdown-alert.markdown-alert-tip {
+  border-left-color: var(--borderColor-success-emphasis);
+}
+.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
+  color: var(--fgColor-success);
+}
+.markdown-body .markdown-alert.markdown-alert-caution {
+  border-left-color: var(--borderColor-danger-emphasis);
+}
+.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
+  color: var(--fgColor-danger);
+}
+.markdown-body > :first-child > .heading-element:first-child {
+  margin-top: 0 !important;
+}
+.markdown-body .highlight pre:has(+ .zeroclipboard-container) {
+  min-height: 52px;
+}
diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
index e50228dc..73566a38 100644
--- a/packages/app-client/src/modules/notes/pages/create-note.page.tsx
+++ b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -8,6 +8,7 @@ import { downloadBase64File, downloadSvgFile } from '@/modules/shared/files/down
 import { isHttpErrorWithCode, isHttpErrorWithStatusCode, isRateLimitError } from '@/modules/shared/http/http-errors';
 import { cn } from '@/modules/shared/style/cn';
 import { CopyButton, useCopy } from '@/modules/shared/utils/copy';
+import { useThemeStore } from '@/modules/theme/theme.store';
 import { Alert, AlertDescription } from '@/modules/ui/components/alert';
 import { Button } from '@/modules/ui/components/button';
 import { Card, CardContent, CardHeader } from '@/modules/ui/components/card';
@@ -112,6 +113,7 @@ const QrCodeCard: Component<{ noteUrl: string }> = (props) => {
 };
 
 export const CreateNotePage: Component = () => {
+  const themeStore = useThemeStore();
   const config = getConfig();
   const { t } = useI18n();
   const navigate = useNavigate();
@@ -283,14 +285,14 @@ ${text.replaceAll('```', '"""')}
 
             <Card class="w-full relative rounded-md shadow-sm">
               <CardContent class="p-6 pt-10 overflow-auto max-w-100% max-h-400px">
-                <div class="absolute top-0 left-0 bg-gray-2 rounded-br-md py-1 px-4 text-xs text-gray-6">{t('create.settings.preview')}</div>
+                <div class="absolute top-0 left-0 bg-muted rounded-br-md pt-1 pb-2 px-4 text-xs text-muted-foreground">{t('create.settings.preview')}</div>
                 {getResultFormat() === 'raw'
                   ? (
                       <pre data-test-id="note-content-display">
                         {getContent()}
                       </pre>
                     )
-                  : <div class="markdown-body" innerHTML={getFormattedContent() || ''} />}
+                  : <div class="markdown-body" data-theme={themeStore.getColorMode()} innerHTML={getFormattedContent() || ''} />}
               </CardContent>
             </Card>
           </div>

From afe1813b9fdb67e41827cd993a9f89577cc5a627 Mon Sep 17 00:00:00 2001
From: mistersupri <supri.contact@gmail.com>
Date: Tue, 7 Jan 2025 10:33:42 +0000
Subject: [PATCH 18/18] fix: sonarqube issue

---
 .../app-client/public/github-markdown.css     | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/app-client/public/github-markdown.css b/packages/app-client/public/github-markdown.css
index 9e55ee69..5720613a 100644
--- a/packages/app-client/public/github-markdown.css
+++ b/packages/app-client/public/github-markdown.css
@@ -1,16 +1,3 @@
-.markdown-body {
-  --base-size-4: 0.25rem;
-  --base-size-8: 0.5rem;
-  --base-size-16: 1rem;
-  --base-size-24: 1.5rem;
-  --base-size-40: 2.5rem;
-  --base-text-weight-normal: 400;
-  --base-text-weight-medium: 500;
-  --base-text-weight-semibold: 600;
-  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-    Liberation Mono, monospace;
-  --fgColor-accent: Highlight;
-}
 .markdown-body[data-theme="dark"] {
   color-scheme: dark;
   --focus-outlineColor: #1f6feb;
@@ -119,6 +106,17 @@
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
 }
 .markdown-body {
+  --base-size-4: 0.25rem;
+  --base-size-8: 0.5rem;
+  --base-size-16: 1rem;
+  --base-size-24: 1.5rem;
+  --base-size-40: 2.5rem;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 600;
+  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+  --fgColor-accent: Highlight;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
@@ -134,6 +132,7 @@
   display: inline-block;
   fill: currentColor;
   vertical-align: text-bottom;
+  overflow: visible !important;
 }
 .markdown-body h1:hover .anchor .octicon-link:before,
 .markdown-body h2:hover .anchor .octicon-link:before,
@@ -446,12 +445,6 @@
   font-size: 12px;
   word-wrap: normal;
 }
-.markdown-body .octicon {
-  display: inline-block;
-  overflow: visible !important;
-  vertical-align: text-bottom;
-  fill: currentColor;
-}
 .markdown-body input::-webkit-inner-spin-button,
 .markdown-body input::-webkit-outer-spin-button {
   margin: 0;
@@ -961,7 +954,7 @@
 .markdown-body g-emoji {
   display: inline-block;
   min-width: 1ch;
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1em;
   font-style: normal !important;
   font-weight: var(--base-text-weight-normal, 400);