The MDX Components

Inline remark-math with rehype-katex will show like this: y=mx+by = mx + b


While the same math element in block display will look like this:

∑i=1nf(x)=m⋅xi+b\sum_{i=1}^{n}{f(x)} = m\cdot{x_i} + b

An example of custom sandpack component Spack being called in mdx:


const App = () => {
    // ganti kalimat pada baris di bawah ini
    return <span>Halo cintakuuuuu!</span>
}
      
export default App
Open on CodeSandboxOpen Sandbox

This one is an example of a remark-prism plugin of remark being parsed by react-syntax-highlighter and wrapped in custom component SyntaxHighlight being called in mdx:


TYPESCRIPT
1const App = () => {
2    return <span>Hello!</span>
3}
4
5export default App
6

And last but not least, a d3js component drawing chart (line chart in example below) in svg being called in mdx:



An example of Entity Relationship Diagram using MermaidJS in document.


erDiagram CAR ||--o{ NAMED-DRIVER : allows CAR { string registrationNumber PK string make string model string[] parts } PERSON ||--o{ NAMED-DRIVER : is PERSON { string driversLicense PK "The license #" string(99) firstName "Only 99 characters are allowed" string lastName string phone UK int age } NAMED-DRIVER { string carRegistrationNumber PK, FK string driverLicence PK, FK } MANUFACTURER only one to zero or more CAR : makes

And below is an example of table using AgGrid inside mdx component



Avatar of Johanes Indra Pradana Pao

Johanes Indra Pradana Pao is a Business Analyst Senior Supervisor with over a decade of experience turning data into insights. With a knack for creating financial models and machine learning magic, Pao has a history of solving complex problems—like bridging data gaps during a major ERP overhaul.

When he’s not mastering the art of data, Pao is focused on family, especially his son, who always takes precedence over work. Pao enjoys sharing his Programming and Excel knowledge and thrives in the office, where he gets to dive into data science and technology. Surviving catholic school is just one of his many skills, but balancing work and family is his real talent.

His tech stack includes Python, TypeScript, Rust, Excel, TensorFlow, and a few programming languages he’s still trying to pronounce correctly.

If you find his writings mind-blowing, sensational, and earth-shattering—especially if they save you from a spreadsheet meltdown—feel free to donate here. He’s in the middle of a ‘loan’ from his wife, and he promises this will help him pay it back!

Speak Your Mind (or Don't)
This post has no comment yet.