components/card/MarkdownRenderer.client.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+	interface Props {
+		content: string
+		state: string
+	}
+
+	const props = defineProps<Props>()
+
+	const description = useDescription()
+	const parsedMarkdown = computed(() => {
+		return stringToMarkdown(description.value)
+	})
+</script>
+
+<template>
+	<div class="bg-secondary h-full min-h-screen w-full overflow-y-scroll p-4">
+		<div
+			class="prose prose-invert h-full max-h-full"
+			v-html="parsedMarkdown">
+		</div>
+	</div>
+</template>

components/card/MarkdownRenderer.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-const note = useNote()
-const parsedMarkdown = computed(() => {
-    return stringToMarkdown(note.value.description)
-})
-</script>
-
-<template>
-    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll p-4">
-        <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
-        </div>
-    </div>
-</template>
-
-<style scoped>
-:deep(*) {
-    @apply text-[#E6EDF3];
-}
-
-:deep(h1),
-:deep(h2),
-:deep(h3),
-:deep(h4),
-:deep(h5),
-:deep(h6) {
-    @apply border-lightgray border-b pb-2;
-}
-
-:deep(h1) {
-    @apply text-4xl;
-}
-
-:deep(h2) {
-    @apply text-2xl;
-}
-
-:deep(h3) {
-    @apply text-lg;
-}
-
-:deep(h4) {
-    @apply text-base;
-}
-
-:deep(h5) {
-    @apply text-sm;
-}
-
-:deep(h6) {
-    @apply text-xs;
-}
-
-:deep(li input) {
-    @apply my-0;
-}
-
-:deep(pre) {
-    @apply bg-lightgray;
-}
-</style>

composables/markdown.ts

@@ -2,11 +2,11 @@ import { micromark } from 'micromark'
 import { gfm, gfmHtml } from 'micromark-extension-gfm'
 
 const stringToMarkdown = (string: string) => {
-    const parsedMarkdown = micromark(string, {
+	const parsedMarkdown = micromark(string, {
-        extensions: [gfm()],
+		extensions: [gfm()],
-        htmlExtensions: [gfmHtml()],
+		htmlExtensions: [gfmHtml()],
-    })
+	})
-    return parsedMarkdown
+	return parsedMarkdown
 }
 
 export { stringToMarkdown }

nuxt.config.ts

@@ -29,7 +29,23 @@ export default defineNuxtConfig({
                         lightgray: '#27272a',
                     },
                 },
+                // uncomment when syntax highlight
+                // is enable for markdown (highlight.js)
+                // typography: {
+                // 	default: {
+                // 		css: {
+                // 			'pre': null,
+                // 			'code': null,
+                // 			'code::before': null,
+                // 			'code::after': null,
+                // 			'pre code': null,
+                // 			'pre code::before': null,
+                // 			'pre code::after': null,
+                // 		},
+                // 	},
+                // },
             },
+            plugins: [require('@tailwindcss/typography')],
         },
     },
     typescript: {

package-lock.json

@@ -15,6 +15,7 @@
 				"@nuxt/devtools": "^0.1.4",
 				"@nuxtjs/supabase": "^0.3.0",
 				"@nuxtjs/tailwindcss": "^6.2.0",
+				"@tailwindcss/typography": "^0.5.9",
 				"@vueuse/core": "^9.12.0",
 				"@vueuse/nuxt": "^9.12.0",
 				"nuxt": "^3.2.0",
@@ -2132,6 +2133,34 @@
 				"cross-fetch": "^3.1.5"
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.9",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+			"integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+			"dev": true,
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2",
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders"
+			}
+		},
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@tootallnate/once": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6786,6 +6815,12 @@
 			"integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==",
 			"dev": true
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true
+		},
 		"node_modules/lodash.debounce": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6828,6 +6863,12 @@
 			"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
 			"dev": true
 		},
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"dev": true
+		},
 		"node_modules/lodash.pick": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",

package.json

@@ -11,6 +11,7 @@
 		"@nuxt/devtools": "^0.1.4",
 		"@nuxtjs/supabase": "^0.3.0",
 		"@nuxtjs/tailwindcss": "^6.2.0",
+		"@tailwindcss/typography": "^0.5.9",
 		"@vueuse/core": "^9.12.0",
 		"@vueuse/nuxt": "^9.12.0",
 		"nuxt": "^3.2.0",

yarn.lock

@@ -893,6 +893,16 @@
     "@supabase/storage-js" "^2.1.0"
     cross-fetch "^3.1.5"
 
+"@tailwindcss/typography@^0.5.9":
+  version "0.5.9"
+  resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz"
+  integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
@@ -3803,6 +3813,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
   integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -3838,6 +3853,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.pick@^4.4.0:
   version "4.4.0"
   resolved "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz"
@@ -5471,6 +5491,14 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-select
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz"
@@ -6237,7 +6265,7 @@ tailwind-config-viewer@^1.7.2:
     portfinder "^1.0.26"
     replace-in-file "^6.1.0"
 
-tailwindcss@^3.2.7, "tailwindcss@1 || 2 || 2.0.1-compat || 3":
+tailwindcss@^3.2.7, "tailwindcss@>=3.0.0 || insiders", "tailwindcss@1 || 2 || 2.0.1-compat || 3":
   version "3.2.7"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz"
   integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==