Skip to content

Instantly share code, notes, and snippets.

Created May 23, 2020 23:22
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
"presets": ["next/babel", "@emotion/babel-preset-css-prop"],
"plugins": [
"languages": [
"plugins": ["line-numbers", "show-language"],
"css": false
import React, { Fragment, useEffect, useRef } from "react";
import unified from "unified";
import markdown from "remark-parse";
import slug from "remark-slug";
// import toc from "remark-toc";
import remark2rehype from "remark-rehype";
import highlightCode from "rehype-prism";
import rehype2react from "rehype-react";
import Prism from "prismjs";
const processor = unified()
.use(rehype2react, {
createElement: React.createElement,
Fragment: Fragment,
components: {
pre: (props) => {
return <pre {...props} className={`${props.className} line-numbers`} />;
interface Props {
source: string;
const Markdown: React.FC<Props> = ({ source }) => {
const ref = useRef();
useEffect(() => {
}, []);
return <div ref={ref}>{processor.processSync(source).result}</div>;
export default Markdown;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment