![]() ![]() And again, purpose of the renderer is to convert text written in Markdown to HTML. Let's get to the setup! How do we render Markdown syntax in React application?īefore adding the syntax highlight we need to define the renderer. Markdown here on Young Developer supports highlighting for dozens of languages. That is why Markdown renderers usually come with a support for syntax highlighting, however which languages are supported and how those language names are written varies from renderer to renderer. While you could place your code inside single backticks (for tag) or triple backticks (for tag), it will have no distinct styling. Code and Syntax HighlightingĬode blocks are part of the Markdown spec, but syntax highlighting isn’t. It is also used in services like note taking apps (e.g. The familiarity of composing in Markdown comes in handy if you want to write a badass README.md file for your open source project on GitHub. You could write “# H1” in your input, and it will return H1 on render. It’s syntax enables you to mark the special areas in your text, which would be converted into specific HTML tags later. In 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.Markdown is an incredible way to write a blog post, especially a technical one. 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. In 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. $ 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. Note: this series is largely based off of Material-UI and how they have configured their documentation site. 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. Luckily I found that Material-UI had similar requirements and was able to browse their code base for inspiration around my own project. I can show code examples of how to use components.I can show what components look like while in use. ![]() ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |