Syntax highlighting

Adding syntax highlighting in Markdown file

Inline code

Inlined syntax highlighting in Markdown:

Filename

Display filename.

app/layout.tsx
type LayoutProps = {

  children: ReactNode

}



export default function Layout({ children}: LayoutProps) {

  return (

    <html lang="en">

      <body>

        <main>{children}</main>

      </body>

    </html>

  )

}

Line numbers

Display line numbers.

typescript
1
type Status = 'idle' | 'loading' | 'success' | 'error';

2


3
const [status, setStatus] = useState<Status>('idle');

Highlighting

Highlighting lines.

javascript
function lorem(ipsum, dolor = 1) {

  return dolor

}



function ipsum(lorem, dolor = 1) {

  const sit = lorem == null ? 0 : lorem.sit

  dolor = sit - amet(dolor)

  return sit ? consectetur(lorem) : []

}

Highlighting tokens inside a line.

typescript
const [count, setCount] = useState(0)

Diff

Diff syntax highlighting.

javascript
function lorem(ipsum, dolor = 1) {

  const sit = ipsum == null ? 0 : ipsum.sit

-
  dolor = ipsum - sit

+
  dolor = sit - amet(dolor)

  return sit ? consectetur(ipsum) : []

}

Callout

Add a short message in the code block.

javascript
const lorem = ipsum(dolor, sit)

const [amet, consectetur] = [0, 0]

hey yo
lorem.adipiscing((sed, elit) => {

  if (sed) {

    amet += elit

  }

})

Collapse

Default collapsed.

javascript
  const sit = ipsum == null ? 0 : 1

  dolor = sit - amet(dolor)

  return sit ? consectetur(ipsum) : []

}



}

Collapse with line numbers and highlighting lines.

javascript
-
1
-
2
  const sit = ipsum == null ? 0 : 1

-
3
  dolor = sit - amet(dolor)

-
4
  return sit ? consectetur(ipsum) : []

-
5
}

+
6
+
7
  const sit = ipsum == null ? 0 : 1

+
8
  dolor = sit - amet(dolor)

+
9
  return sit ? consectetur(ipsum) : []

+
10
}

Code with tabs

Group code blocks into tabs.

1
function lorem(ipsum, dolor = 1) {

2
  const sit = ipsum == null ? 0 : ipsum.sit

3
  dolor = sit - amet(dolor)

4
  return sit ? consectetur(ipsum) : []

5
}