Supported elements

January 05, 2022 ⦁ 2 min read

Example of different elements from blog post

Unordered list

• first item
• second item with code example
• third item

Ordered list

1. First
2. Second
3. Third

Link

Build with Next.js.

Quote

This is a quote

Code highlighting

Basic

import { useRouter } from 'next/router';
import classNames from 'clsx';
import Link from '../Link';
import styles from './NavigationLink.module.scss';

type Props = React.PropsWithChildren<{ href: string }>;

const NavigationLink = ({ href, children }: Props) => {
  const router = useRouter();
  const isActive = router.asPath === href;

  return (
    <Link
      href={href}
      className={classNames(styles.navigationLink, {
        [styles.active]: isActive
      })}
    >
      {children}
    </Link>
  );
};

With line numbers

import { useRouter } from 'next/router';
import classNames from 'clsx';
import Link from '../Link';
import styles from './NavigationLink.module.scss';

type Props = React.PropsWithChildren<{ href: string }>;

const NavigationLink = ({ href, children }: Props) => {
  const router = useRouter();
  const isActive = router.asPath === href;

  return (
    <Link
      href={href}
      className={classNames(styles.navigationLink, {
        [styles.active]: isActive
      })}
    >
      {children}
    </Link>
  );
};

With highlighted lines

import { useRouter } from 'next/router';
import classNames from 'clsx';
import Link from '../Link';
import styles from './NavigationLink.module.scss';

type Props = React.PropsWithChildren<{ href: string }>;

const NavigationLink = ({ href, children }: Props) => {
  const router = useRouter();
  const isActive = router.asPath === href;

  return (
    <Link
      href={href}
      className={classNames(styles.navigationLink, {
        [styles.active]: isActive
      })}
    >
      {children}
    </Link>
  );
};

With highlighted lines and line numbers

import { useRouter } from 'next/router';
import classNames from 'clsx';
import Link from '../Link';
import styles from './NavigationLink.module.scss';

type Props = React.PropsWithChildren<{ href: string }>;

const NavigationLink = ({ href, children }: Props) => {
  const router = useRouter();
  const isActive = router.asPath === href;

  return (
    <Link
      href={href}
      className={classNames(styles.navigationLink, {
        [styles.active]: isActive
      })}
    >
      {children}
    </Link>
  );
};

To do

HR