How to Style Markdown in Next.JS Using React-Markdown and SASS
Markdown is the preferred language for creating content for blogs and websites because it is simpler and easier to learn than HTML. In this tutorial, I'll show you how to format your markdown as HTML in React and then style it with SASS.

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.
Comments (0)
Join the discussion and share your thoughts on this post.
No comments yet
Be the first to share your thoughts!