question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tables are not rendered correctly for readme

See original GitHub issue

Subject of the issue

Tables are not rendered correctly for readme

I have created an example here

The basic gist of the issue is:

We are fetching the raw readme and the need is to render the readme in proper format on UI

The table in the readme appears to be

image

But using react-markdown and syntax-highlighter it renders on UI as follows

image

This is not a place to ask questions. For that, go to discussions

Your environment

  • OS: Linux
  • Packages:
{
  "name": "markdown",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-syntax-highlighter": "^13.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-markdown": "^5.0.2",
    "react-scripts": "4.0.0",
    "react-syntax-highlighter": "^15.3.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Steps to reproduce

  1. Fork/Clone the project here
  2. Run the command npm install
  3. Readme should render on ui as it is here

Tell us how to reproduce this issue. Please provide a working and simplified example.

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behavior

What should happen?

Actual behavior

What happens instead?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
PuneetPunamiyacommented, Jan 18, 2021

This project does not concern itself with styling. You can use things like CSS to style the results!

Thanks @wooorm for your help 🤗

0reactions
wooormcommented, Jan 15, 2021

This project does not concern itself with styling. You can use things like CSS to style the results!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Markdown Tables not rendering - Stack Overflow
I had a similar problem with one of these generated tables on Github Markdown and I found I needed to put a blank...
Read more >
Tables are not rendering in page · Issue #82 - GitHub
Hello there, I'm facing a problem with tables rendering, this is my code: | Flag | Code ... However in readme.md is rendering...
Read more >
Markdown Tables Not Rendering Correctly - GitLab.org
Markdown Tables are not rendered correctly. STEPS: Create a markdown table, such as the one below.
Read more >
Working with Tables in GitHub Markdown - Pluralsight
A table in markdown consists of two parts. The header. The rows of data in the table · Individual columns in a table...
Read more >
Markdown tables not being properly styled (BB-9928) - Jira
All I'm asking for is to add some CSS, so the HTML tables on README.md files look good. Thanks! Eneko. kintel.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found