Implement Fancy Code Block

Implement Fancy Code Block in Next.js

MDX Markdown Code Editor React Next.js Frontend Development Web Development

May 1, 2022Nov 30, 20253 min

Fancy Code Block

Line Number

Enable line number line="true":

Copy Button

Disable copy button nocopy="true":

Lines Highlight

Set highlight lines lines="2,5,8-10,12,14..16,19,22...25,29":

Code Title

Show code title title="Awesome Code":

Live Code

Live code editor live="true":

Live code editor <Editor> ```tsx Some code``` </Editor>:

Language

Markup Code

CSS Code

TypeScript Code

LLM Basic Notes

Technical notes on Large Language Model (LLM): covering generative AI fundamentals, ChatGPT principles, scaling laws and emergent abilities, LangChain toolchain, AI Agent orchestration patterns, guardrails, and MCP servers

Implement Fancy MDX

Implement Fancy MDX in Next.js