REACT MARKDOWN HOW TOIn part 4 we will look at some nice quality of life improvements with this project with items such as: multi-language syntax highlighting with prismjs, dynamic creation of table of contents per page based on markdown, and how to make everything look nice with styled-jsx. In part 3 I will show how you can generate classic API style documentation for your react app / components using JSDocs and how to insert that into your Markdown pages. REACT MARKDOWN CODEIn part 2 of this series, we are going to look into how you can get some sample React code showing up inside of your new Markdown page, and how you can have that code executed as well. Now you can write whatever Markdown you want in src/pages/home/home.md and if you visit localhost:3000 you should see that markdown document converted to a web page! We are simply requesting the context of the src/pages/home directory here, and passing that into our page component. "scripts": įrom this file, you can see how we have chosen to structure out app, by placing the actual Markdown files that represent our pages in src/pages/. Behind the scenes it uses things like Webpack and Babel, but it also abstracts most of that away to let us focus on our application logic.Īfter initial repository creation, following the NextJS getting started documentation, place the following scripts in your package.json file. This post won’t go into detail about all the goodies surrounding NextJS and it’s architecture, but what you really need to know is that it’s a server side rendering react framework that can get us up and running quickly. REACT MARKDOWN INSTALL$ mkdir docs $ cd docs $ npm init -y $ npm install -save react react-dom next $ mkdir pages Start by creating your new repository and installing the essentials. We will be building components which interpret other React components, can read Markdown files and parse them to HTML, and running the whole stack on top of NextJS. Since we are looking to document a React app or package, it seems to make sense to build our documentation site using React as well. All credit goes to their team for the architecture and decision making to make this post possible. We create the getMarkdownText function to convert the This is Markdown. Then we can render the HTML string with dangerouslySetInnerHTML. REACT MARKDOWN SERIESNote: this series is largely based off of Material-UI and how they have configured their documentation site. To use the marked Markdown display component in our React app, we just call, the marked function that comes with the marked library to convert the Markdown string into an HTML string. I hope that by writing this series would I can formalize my knowledge but also help others who are looking at the same list of requirements. 4) Highlight.js Syntax highlighting for the Web. 3) Marked.js A markdown parser and compiler. We will use it for Setting up React for ES6. Luckily I found that Material-UI had similar requirements and was able to browse their code base for inspiration around my own project. 1) React.js JavaScript Library for Building User Interfaces.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |