If you have a blog or website with articles or long text documents, markdown is your friend. It makes authoring documents so much easier and more intuitive than straight HTML. Markdown has a far smaller learning curve than HTML and can easily be taught to non-tech-savvy writers. Markdown editors are also built-in to headless CMSs like Contentful.
In this tutorial I will show you how to take a markdown document, convert it to HTML and then style it using React JS, React-Markdown and SASS.
We will need the following packages for this tutorial:
| Package Name | Description |
|---|---|
| react-markdown | React component to render markdown |
| react-syntax-highlighter | Syntax highlighting component for React using the seriously super amazing lowlight and refractor by wooorm |
| rehype-raw | rehype plugin to parse the tree (and raw nodes) again, keeping positional info okay |
| remark-gfm | remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists) |
| sass | Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more |
So let's begin by installing our dependencies:
npm i react-markdown react-syntax-highlighter rehype-raw remark-gfm sass Next, let's create our markdown rendering component:
import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism' export default function MdPage({ markdown }) { // Override react-markdown elements to add class names const P = ({ children }) => <p className="md-post-p">{children}</p> const Li = ({ children }) => <li className="md-post-li">{children}</li> const H4 = ({ children }) => <h4 className="md-post-h4">{children}</h4> const Hr = () => <hr className="md-post-hr" /> const mdBody = <ReactMarkdown remarkPlugins={[remarkGfm]} // Allows us to have embedded HTML tags in our markdown linkTarget='_blank' // Append target _blank to links so they open in new tab/window components={{ p: P, li: Li, h4: H4, hr: Hr, code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/.exec(className || '') return !inline && match ? ( <SyntaxHighlighter style={a11yDark} language={match[1]} PreTag="div" {...props} >{String(children).replace(/\n$/, '')}</SyntaxHighlighter> ) : ( <code className="md-post-code" {...props}> {children} </code> ) }, }} > {markdown} </ReactMarkdown> return mdBody; } Now let's create our SASS styles:
.md-post { &-p { font-size: 1.1em; } &-li { list-style-type: none; } &-h4 { font-size: 1.5em; color: red; } &-hr { width: 200px; height: 20px; margin: 60px auto; background: radial-gradient(circle closest-side, #d4d4d4 98%, #0000) 0/calc(100%/5) 100%; border: none; } } That's it! It's that simple. You can override any of the HTML elements converted by react-markdown to apply any CSS styles you wish.
I hope you enjoyed this article. For more great information, please visit our Blog.
Top comments (0)