markdown

app.vue

@@ -2,6 +2,8 @@
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
+import { marked } from 'marked';
+
 import k_logo from '@/assets/icons/logo.svg'
 import '@/assets/main.scss'
 
@@ -22,12 +24,16 @@ const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/revie
 const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
 const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
 const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery')
+const products = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'products')
+
+const aboutText = computed(() => marked.parse(about?.content))
+const deliveryText = computed(() => marked.parse(delivery?.content))
+const productsText = computed(() => marked.parse(products?.content))
 
 const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
 const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
 const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`)
 
-
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
   isModalOpen.value = !isModalOpen.value
@@ -54,7 +60,7 @@ const toggleModal = () => {
         <div class="siteblock-content">
           <h2 class="siteblock-title">{{ about?.title }}</h2>
           <div class="siteblock-text">
-            {{ about?.content }}
+            <span v-html="aboutText"></span>
             <p>
               <button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
             </p>
@@ -106,7 +112,12 @@ const toggleModal = () => {
     </div>
     <div class="siteblock bg-white">
       <div class="container">
-        {{ delivery?.content }}
+        <div class="prose col-span-6 whitespace-break-spaces">
+          <span v-html="deliveryText"></span>
+        </div>
+        <div class="prose col-span-6 whitespace-break-spaces">
+          <span v-html="productsText"></span>
+        </div>
       </div>
     </div>
     <div class="footer">

components/expDiagram.vue

@@ -30,7 +30,7 @@ onUnmounted(() => {
 })
 </script>
 <template>
-    <div class="container min-w-full outline outline-2" ref="container">
+    <div class="container min-w-full" ref="container">
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[-7, 2, 4]" />
             <OrbitControls v-bind="controlsState" make-default />

nuxt.config.ts

@@ -1,7 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', "@nuxt/image", "nuxt-icon", "nuxt-svgo", '@tresjs/nuxt'],
+  modules: [
+    '@nuxtjs/tailwindcss',
+    "@nuxt/image",
+    "nuxt-icon",
+    "nuxt-svgo",
+    '@tresjs/nuxt',
+  ],
   runtimeConfig: {
     public: {
       apiBase: '/api',

package-lock.json

@@ -13,6 +13,8 @@
         "@tresjs/cientos": "^3.9.0",
         "@tresjs/core": "^4.0.2",
         "@tresjs/nuxt": "^2.1.2",
+        "@types/marked": "^6.0.0",
+        "marked": "^12.0.2",
         "nuxt": "^3.11.2",
         "nuxt-svgo": "^4.0.1",
         "ral-hex-converter": "^1.0.1",
@@ -3953,6 +3955,15 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "peer": true
     },
+    "node_modules/@types/marked": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-6.0.0.tgz",
+      "integrity": "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==",
+      "deprecated": "This is a stub types definition. marked provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "marked": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.14.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.0.tgz",
@@ -9319,6 +9330,17 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/marked": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",

package.json

@@ -16,6 +16,8 @@
     "@tresjs/cientos": "^3.9.0",
     "@tresjs/core": "^4.0.2",
     "@tresjs/nuxt": "^2.1.2",
+    "@types/marked": "^6.0.0",
+    "marked": "^12.0.2",
     "nuxt": "^3.11.2",
     "nuxt-svgo": "^4.0.1",
     "ral-hex-converter": "^1.0.1",