![]() We then fetch the Markdown file we want using the Fetch API. The import used in this way acts as a promise and returns the absolute path to our Markdown file. ![]() Once our component is loaded, inside useEffect() we use the import as a function. We also have a file name to act as a way to dynamically choose the Markdown file we want.Ĥ: Fetch and display the Markdown file. Initially, we set the postContent variable to a blank string and place it between the tags. We configure the state that we will use to store the Markdown content. It can be any name we want.Ģ: In the components folder we create our component and import the markdown-to-jsx package.ģ: Setup the state. We have called this component this way because in the overrides properties of the component we have assigned that name to it. I mean, instead of writing code inside the inverted quotes that Markdown uses, we write code inside the Code tags. In addition, I have replaced the native Markdown code blocks with our component. To exemplify or simulate a tutorial that we would like to show in our blog, I have taken a part in the React documentation. md file, in this case, tutorial1.md, and add the Markdown content we want to display. To do this, let’s follow these steps.ġ: Inside the tutorials folder, we create a new. ![]() With this library, we will be able to work with React components inside markdown files. To display markdown files with React, we will use a library that converts markdown to JSX called markdown-to-jsx. react-copy-to-clipboard to copy to clipboard the block of code.Īfter that, we create the following structure for the project: src/ ├── assets/ │ └── icons/ │ └── img/ ├── components/ │ └── Code.jsx │ └── Post.jsx ├── styles/ │ └── App.css │ └── Code.css │ └── Post.css ├── tutorials/ │ └── tutorial1.md ├── App.js └── index.js.react-syntax-highlighter to highlight a block of code with a theme.markdown-to-jsx to render markdown files with react.We install the dependencies that we will need in the project: npm i markdown-to-jsx react-syntax-highlighter react-copy-to-clipboard We create our application with the following command: npx create-react-app myApp Now that we know what Markdown is, let’s see how we can use it inside React. To add syntax highlighting, we just need to specify the language together with the backticks. This function allows us to add color highlighting for different programming languages. In Markdown, we can highlight delimited code blocks. What Markdown does is convert that fenced block of code into the following: var value = 6 Syntax Highlighting a fenced code block If we want to display a code block, in our article, we create a delimited code block with a “fence” of backticks before and after the code as follows: ``` var value = 6 ``` Writing code blocks in MarkdownĪ commonly used element in Markdown especially for developer blogs is the delimited code block. Here you can find everything about Markdown. However, using Markdown we would not need to write the tag, but just put a pad at the beginning: # Header Let’s say we want to write a level 1 heading. In short, it’s a software tool that converts the language into valid HTML. It’s a markup language that in principle, was designed to produce texts whose destination was going to be the web more quickly and easily than if we were using HTML directly. We will also add a couple more functionalities to the code blocks that allow us to change the style or theme and copy the code. We will develop the basis of a blog in which we want to share programming tutorials. This tutorial will learn how to take advantage of Markdown with React. Markdown is a markup language that makes it easy to format text using a series of characters in a special way. And how does the site give a different format to this block of text? In this case, the same websites offer the option to write code and display it in a different format than the text, for example, here on Medium. Nowadays, there are many websites with which we can create a blog and start writing, but if we want to write technical articles like tutorials, we will need to show code to exemplify the tutorial.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |