pengenalan markdown dan mdx

2022-06-29 15:1300

Pengenalan

Barangkali disini sering banget kalo buat repository di git ada sebuah file yang bernama README.md ya betul itu adalah markdown bahasa yang banyak digunakan oleh para developer untuk menulis berbagai jenis konten, seperti posting, blog, dan dokumen.

sebagai contoh

## Ini adalah judul
saya adalah ridwan [Ridwan](https://ridwan.id)

maka akan menghasilkan dokumen html

<h2>Ini adalah judul</h2>
<p>saya adalah ridwan <a href="https://ridwan.id">Ridwan</a></p>

Menulis dengan Markdown terasa seperti menulis teks biasa, dengan sedikit detail ekstra untuk menyusun konten Anda. Inilah sebabnya mengapa Markdown banyak digunakan oleh pengembang untuk menulis dokumentasi dan artikel.

Menulis dokumen dengan markdown akan terasa seperti nulis text biasa atau plain text, untuk membuat dokumen rich format maka perlu effort yang lebih besar dalam menyusun konten.

ketika suatu konten memerlukan sebuah widget atau html yang interaktif maka di sinilah MDX dibuat.

MDX adalah bahasa yang memungkinkan hal ini karena memungkinkan Anda untuk menggunakan JSX dalam markdown.

Apa itu MDX?

Sebelum kita membuat komponen dasar mdx, mari kita bicara sedikit tentang apa itu MDX dan apa yang bisa kita lakukan dengannya.

Penting untuk mengenal Markdown dan JSX sebelum membahas dengan MDX karena MDX ini adalah kombinasi dari kedua nya.

MDX syntax

kita bisa mengembed sebuah componen JSX atau react kedalam mdx kemudian kita bisa mengimport nya langsung

import Image from 'next/image';

<Image src="/images/avatar.jpg" width="300px" height="300px" />

maka akan menghasilkan output di halaman ini

di v2 dari MDX ini memungkinkan untuk menulis ekspresi di MDX, seperti yang Anda lakukan di JSX. Contoh sederhananya adalah sebagai berikut:

# Hello world

coba 1 + 1 hasil nya = {1+1}

maka akan menghasilkan coba 1 + 1 hasil nya = 2

selain itu juga kita bisa membuat sebuah sintak seperti dibawah ini

### Top Ten Languages in {new Date().getFullYear()}

{
  ['Java', 'JavaScript', 'Python'].map((language, i) => (
    <li key={'key-' + i}>{language}</li>
  ))
}

maka akan menghasilkan output seperti dibawah ini:

Top Ten Languages in 2024

  • Java
  • JavaScript
  • Python

Implementasi membuat sebuah komponen

disini kita coba membuat sebuah komponen yang akan di simpan kedalam sebuah components

Skill.tsx
import cn from 'classnames'
import { useEffect, useState } from 'react'

type Language = {
  name: string
  percent: number
}

type Stack = {
  category: string
  color:
    | 'orange'
    | 'sky'
    | 'blue'
    | 'gray'
    | 'indigo'
    | 'red'
    | 'lime'
    | 'cyan'
    | 'violet'
    | 'slate'
  languages: Language[]
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const progressColor = {
  orange: 'from-orange-600 to-orange-300',
  slate: 'from-slate-600 to-slate-300',
  sky: 'from-sky-600 to-sky-300',
  blue: 'from-blue-600 to-blue-300',
  gray: 'from-gray-600 to-gray-300',
  indigo: 'from-indigo-600 to-indigo-300',
  red: 'from-red-600 to-red-300',
  lime: 'from-lime-600 to-lime-600',
  cyan: 'from-cyan-600 to-cyan-300',
  violet: 'from-violet-600 to-violet-300',
}

export const Skill: React.FC<{ stack?: Array<Stack> }> = ({
  stack = [
    {
      category: 'Backend',
      color: 'orange',
      languages: [
        { name: 'PHP', percent: 90 },
        { name: 'MySQL', percent: 50 },
      ],
    }
  ],
}) => {
 const [mounted, setMounted] = useState<boolean>()
  useEffect(() => setMounted(true), [])

  if (!mounted) {
    return <span>Loading...</span>
  }
  return (
    <div className="grid md:grid-cols-2 md:gap-14 sm:grid-cols-1 sm:grap-4 w-full">
      {stack.map((category, i) => (
        <div key={'category-' + i}>
          <h4 className="mb-5 font-medium">{category.category}</h4>
          {category.languages.map((lang, k) => (
            <div className="flex items-center" key={'lang-' + k}>
              <div className="flex-auto w-40">{lang.name}</div>
              <div className="flex-auto w-full">
                <div className="w-full rounded-full h-2 dark:bg-gray-900">
                  <div
                    style={{ width: lang.percent + '%' }}
                    className={cn(
                      'bg-gradient-to-r',
                      `from-${category.color}-600`,
                      `to-${category.color}-300`,
                      'rounded-full h-2'
                    )}
                  ></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}

export default Skill

kemudian kita bisa mengimport nya dan mempassing sebuah properti ke dalam komponen tersebut

### Contoh dalam markdown
import Skill from './components/Skill.tsx';

<Skill stack={[
    {
      category: 'Backend',
      color: 'slate',
      languages: [
        { name: 'PHP', percent: Math.ceil(Math.random() * 100) },
        { name: 'GoLang', percent: Math.ceil(Math.random() * 100) },
        { name: 'MySQL', percent: Math.ceil(Math.random() * 100) },
      ],
    }
  ]} />

ketika dijalan kan atau di render hasil nya seperti dibawah ini:

Contoh dalam markdown

Backend

PHP
GoLang
MySQL

untuk lebih detail mengenai mdx silahkan buka situs nya MDX js

Kesimpulan

kita bisa berkreasi membuat sebuah konten atau berita yang interaktif. dengan mengembed atau import suatu komponen JSX ke dalam sebuah markdown. tapi sangat berhati hati ketika embed sebuah komponen. jangan sampai user lain bisa melakukan editing sebuah file.

Terima kasih.

markdownmdxjsx