Hampir semua platform modern saat ini yang saya tahu jika berhubungan dengan Rich Document pasti menggunakan Markdown. Ghost, Github, Slack, Leanpub, dan seterusnya. Bahkan article yang sedang kamu baca saat ini ditulis dengan format Markdown, karena memang format ini sangat mudah di-parsing dan sangat flexible bahkan HTML bisa kita embed di dalamnya.

Salah satu spec dari Markdown adalah Code Block yang biasanya direpresentasikan sebagai <pre />: Preformatted Text Elemement jadi apa yang kita tulis didalam tag tersebut akan dirender seadanya bahkan empty whitespace / tab. intinya kita bisa menggunakan <pre /> untuk me-representasikan coding.

React Markdown

Salah satu library yang terkenal jika ingin merender Markdown didalam React Component adalah React Markdown dan API dari library ini sangat lengkap Demo React Markdown dan salah satunya yang akan dibahas pada article ini adalah renderers. dengan renderers kita dapat menentukan custom renderer untuk spesifik block.

yarn add react-markdown
1
2
3
4
5
6
7
8
9
import ReactMarkdown from 'react-markdown';

const App = () => {
  const markdown = // markdown here

  return (
    <ReactMarkdown source={markdown} />
  )
}

React Syntax Highlighter

Kita akan menggunakan library React Syntax Highlighter sebagai custom rendering dari Code Block

yarn add react-syntax-highlighter

implementasinya lumayan sederhana, kita hanya perlu membuat component yang me-return ReactSyntaxHighlighter dan menerima props language dan value. library ini support Prism dan Highlightjs as theme provider out of the box, dibawah contoh ketika saya menggunakan highlightjs dengan theme androidstudio

1
2
3
4
5
6
7
8
9
10
11
12
import SyntaxHighlighter from 'react-syntax-highlighter';
import { androidstudio } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

export const CodeBlock = (props) => {
  const { language = null, value } = props;
  return (
    <div className="my-10">
      <SyntaxHighlighter showLineNumbers language={language} style={androidstudio}>
        {value}
      </SyntaxHighlighter>
    </div>
  );

selanjutnya kita tinggal apply component CodeBlock sebagai custom renderer.

1
2
3
4
5
6
7
8
9
10
11
import ReactMarkdown from 'react-markdown';

import { CodeBlock } from '@components/CodeBlock';

const App = () => {
  const markdown = // markdown here

  return (
    <ReactMarkdown source={markdown} renderers={{code: CodeBlock}} />
  )
}

Selesai.