markdown renderlamak için marked kütüphanesi eklendi.

2026-09-11 10:56:08 +00:00 · 2021-08-21 18:05:38 +03:00
parent ea37f2160a
commit 4421e20856
4 changed files with 48 additions and 851 deletions
@@ -10,10 +10,10 @@
  },
  "dependencies": {
    "contentful": "^8.4.2",
+    "marked": "^3.0.0",
    "next": "^11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
-    "react-markdown": "^6.0.3",
    "sass": "^1.36.0"
  },
  "devDependencies": {
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import { createClient } from "contentful";
 import ReactMarkdown from "react-markdown";
+import marked from "marked";

 export default function PostDetails({ posts }) {
  if (!posts)
@@ -14,6 +15,10 @@ export default function PostDetails({ posts }) {
    );

  const { title, rehber, description } = posts.fields;
+  function createMarkup() {
+    return { __html: marked(rehber) };
+  }
+
  return (
    <div className="markdown">
      <Head>
@@ -22,7 +27,7 @@ export default function PostDetails({ posts }) {
        <meta property="og:title" content={`${title} - Teknoloji Rehberleri`} />
        <meta property="og:description" content={description} />
      </Head>
-      <ReactMarkdown>{rehber}</ReactMarkdown>
+      <div dangerouslySetInnerHTML={createMarkup()} />
    </div>
  );
 }
@@ -58,11 +58,17 @@
    margin-bottom: 1rem;
  }

+  ul,
+  ol {
+    margin-left: 5rem;
+  }
+
  img {
    margin: auto;
    display: block;
    min-width: 60%;
    max-width: 60%;
+    margin-top: 1rem;
  }

  @include media("<largest") {
@@ -81,4 +87,16 @@
      min-width: 100%;
    }
  }
+  @include media("<smaller") {
+    ul,
+    ol {
+      margin-left: 4rem;
+    }
+  }
+  @include media("<smallest") {
+    ul,
+    ol {
+      margin-left: 3rem;
+    }
+  }
 }