Example of the full syntax.

Full syntax

Text can actually go before the first heading.

It should be understood what it is trying to do though.

Prior to any headings, it lends itself as an a subtitle to the title.

This is the first heading

First heading is a major heading

This is second heading

Second heading is smaller

This is third heading

Some stuff goes here…

Token components…

Again, bold and italics.

A code box:

echo test 123

This is a list:

one
two
three

And another react component:

Code box 1: tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
// 🔥 Super granular and accurate highlighting
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
 
  render() {
    return (
      <Html>
        <Head />
        <body className="bg-zinc-800 text-zinc-200">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Code box 3-A: line numbers

import { useFloating } from '@floating-ui/react';
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Code box 3-B: highlighting

import { useFloating } from '@floating-ui/react';
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Code box 3-C: highlighting WITH line numbers

import { useFloating } from '@floating-ui/react';
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Code example 3: inline highlighting

The result of [1, 2, 3].join('-') is '1-2-3'.

Code example 4: ansi highlighting

this is code title

 
  vite v2.8.6 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx