标记未正确呈现代码段和 table

Question

Markdown 文件

---
title: 'Testing Second Blog Post'
date: 'May 2 2022'
excerpt: 'This is the excerpt'
cover_image: '/images/posts/test.jpeg'
---

# Basics of Markdown

Markdown is the most popular markup language that can be used to format documents. It can be used to create _websites_,_ebooks_,_email_,_chats in discussions forums_.

## Topics

1. Paragraphs

    MD expects a full line space to show texts in a different line else it joins text in the same line.

2. Text decorations

    MD can write **bold** texts, ~~italiic~~ _italic_ texts

3. Headings
   No of #'s represent the type of heading. Github will automatically add id's to headings, so the text will be automatically linked.
    ## This is h2
    ### This is h3
4. Links

    [My Github](https://github.com/bhupendra1011 'all repos') account.[Bhupendra][1] github repo.

5. Images
   Images can be used just like links. ![Alt txt](img url)

    !["cat Img"](http://placekitten.com/200/200)

    Thumbnails images can also be used which links to larger image
    [<img src="http://placekitten.com/20/20">](http://placekitten.com/200/200)

6. Ordered and Unordered Lists

    Coding Best Practices:

    - Keep code DRY
    - Writing Unit Test cases
    - Checking cross-browser support

    Steps to merge branch:

    1. Create a branch from feature
    1. commit your changes
    1. push your changes
    1. raise a pull request

7. Code Blocks

    This is super helpful when posting any code snippet

    ```js
    const fn = () => alert('some fn');
    ```

    ```css
    .hide {
        display: none;
    }
    ```

    Also can show code difference

    ```diff
    var x = 10;
    - const counter = 0;
    + let counter = 0
    ```

8. Tables

    Tables can be generated with headings and text alignment option

    |  Stocks  | Price |
    | :------: | ----: |
    |   TCS    |   230 |
    | YES Bank |   500 |

Cool Tips

-   [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly) extension can eliminate typo and grammar mistakes
-   [ScreenTOGif](https://www.screentogif.com/) to record videos in GIF format
-   Upload GIF's to [giphy](https://giphy.com/) to embed them into blog posts.
-   [Stackedit](https://stackedit.io/) for Markdown Editing in Browser.

结果为网页

如上图所示，代码段和 table 无法正确呈现，缺少样式。例如：

代码块没有背景色
Table 缺少单元格边框

我正在使用 marked 包和 nextjs 来呈现降价文件。下面是渲染它的代码。

import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import Head from 'next/head';
import styled from 'styled-components';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import WhatsApp from '../../components/WhatsApp';
import fs from "fs"
import path from 'path';
import matter from "gray-matter"
import { marked } from "marked"
import moment from 'moment';

const Main = styled.main`
  background: white;
    width: 95%;
    padding-top: 80px;
    max-width: 1126px;
    margin: auto;
    min-height: calc(100vh - 220px);
    
    .section-title {
        color: #000;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin: 0 auto;
    }

    .post_coverImage {
      width: 100%;
      height: 400px;

      img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
      }
    }

    .post_content {
      .post_body {
        margin: 50px auto 0;
        padding-bottom: 50px;
        width: 95%;
      }
    }

`;

interface PostHeroProps {
  image: string
}

const PostHero = styled.div<PostHeroProps>`
  width: 100%;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("${props => props.image}");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .post_title {
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 95%;

    h1 {
      color: white;
      margin: 0;
    }

    p {
      color: white;
    }
  }
`

interface PostProps {
    frontmatter: any,
    content: any,
    slug: string
}

const Post: NextPage<PostProps> = ({frontmatter: {title, date, cover_image}, content, slug}) => {
  return (
    <div style={{background: "#f2f2f2"}}>
      <Head>
        <title>Idealist Professionals - Igniting your Ideas</title>
        <meta name="description" content="About Idealist Pro" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header activeMenu="blogs" />
      <Main>
        <PostHero image={cover_image}>
          <div className="post_title">
            <h1>{title}</h1>
            <p>{moment(date).format("MMMM DD, YYYY")}</p>
          </div>
        </PostHero>
        <div className="post_content">
          <div className="post_body">
            <div dangerouslySetInnerHTML={{__html: marked(content)}}></div>
          </div>
        </div>
        <WhatsApp />
      </Main>
      <Footer />
    </div>
  );
};

export default Post;

export const getStaticPaths: GetStaticPaths = async () => {
  const files = fs.readdirSync(path.join("public", "posts"));

  const paths = files.map((filename: string) => ({
    params: {
      slug: filename.replace(".md", "")
    }
  }))

  return {
    paths,
    fallback: false
  }
}

export const getStaticProps: GetStaticProps = async ({params}) => {
  const slug = params!.slug as string

  const markdownWithMeta = fs.readFileSync(path.join("public", "posts", slug + ".md"), "utf-8")

  const {data: frontmatter, content} = matter(markdownWithMeta)
  
  return {
    props: {
      frontmatter,
      content,
      slug
    }
  }
}

Answer 1

而且，您是否以某种方式为 pre 和 table 添加了样式？正如@Chris 所说，看起来您的 pre 和 table 元素呈现正确，错误出在样式中，请确保您在 markdown 中为元素添加样式，使用时控制样式有点困难医学博士。您正在使用 styled-components，但作为测试，请尝试在全局样式 ( globals.css ) 中为 pre 和 table 元素显式添加直接样式，如有必要，请使用 [=12 强制样式=] “眼睛，作为测试”，并对发生的事情发表评论。

标记未正确呈现代码段和 table

Marked does not render code snippet and table correctly

markdown

javascript-marked

next.js