Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

## **Problem statement**
 When [parsing the markdown file](How-to-read-markdown-file-in-read) to HTML the ID attribute is missing. Because of this the developers are facing lot of problem like events are not firing and other logical issues.

E.g:-

content in .md file
```md
## Problem ID
```
After parsing to HTML
```html
<h2>Problem ID</h2>
```
But what we expected is
```html
<h2 id="given id">Problem ID</h2>
```
Honestly, currently this is not possible in markdown file when parsing to HTML. Because it is out of scope in the markdown file.
## **Then how we can add the ID attribute to the HTML element while using .md or markdown file?**
Markdown is very developer friendly. because it given other option to solve this issue, we can write the HTML syntax directly to the markdown file. It will parse accordingly.

E.g.:-
content in .md file
```markdown
<h2 id="007">Problem ID</h2>
```
After parsing to HTML
```html
<h2 id="007">Problem ID</h2>
```
I hope this is helpful for the fix. As of now this is one type solution to fix it. Lets see for the markdown file future updates.


There is a common problem when parsing the markdown file the ID attribute is missing in the element, here we found a solution to fix/overcome

[Solved] Missing ID attributes in markdown to html


## **What is Markdown?**

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages. ".MD" is the file extension.

**What are the advantages of Markdown file.**

- **1.** Markdown is easy to read and write.</br>
- **2.** Writers and publishers love writing with Markdown as it reduces distractions.</br>
- **3.** It's intentionally simple.</br>
- **4.** Lets you focus on important things and increases productivity.</br>
- **5.** Converts plain text into HTML.</br>
- **6.** Multi-platform.</br>
- **7.** It doesn't break.
- **8.** Online markdown editors also available so easy to create it.

There are lot of markdown editors are available, if you are an expert then notepad is enough to write the contents on markdown file.

## **How to read/load the markdown aka .md files in ReactJS**

We going to use the NPM package to read the markdown or .md file. Currently many NPM pacakges are available to read the .md file, among that "marked" package we imported.

**Step 1.**

Initialize the project

```javascript
npx create-react-app markdownsample
```

**Step 2.**

Add the package

```javascript
npm i marked
```

**Step 3.**

create a .md file and name it readme.md or anything as your wish under the src folder.

**Step 4.**

Edit the App.js, were we added the logics

```javascript
import React, { useEffect, useState } from "react";
import readmePath from "./README.md";
import { marked } from "marked";
function App() {
  const [data, setData] = useState("");
  useEffect(() => {
    fetch(readmePath)
      .then((response) => {
        return response.text();
      })
      .then((text) => {
        setData(marked(text));
      });
  }, []);
  return (
    <React.Fragment>
      <article dangerouslySetInnerHTML={{ __html: data }} />
    </React.Fragment>
  );
}

export default App;
```

Here we imported the readme.md file and read using fetch function.
fetch function read the file into text. Once it is responded as text, it is passed as an argument to the "marked" function and directly set the result to state variable.

Finally state variable rendered to the article html element.

then the result would be like this in the below screenshot

![markdown file result](/assets/blog/helpers/markdown-result.JPG)

**Conclusion**

The above program snippet is helping to read and render the markdown or .md file.
Also you can fork the project from the given [Github link](https://github.com/ullas1000/markdownsample).


 Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. 

More Stories related to 'markdown'

Also read the similar topics