Code Highlighting

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we’ll specify Consolas and Monaco ahead of the browser-defined monospace font.

console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

.banner {
  width: 750px;
  height: 420px;
}

.banner image {
  width: 100%; 
  height: 100%;
}

button {
  @apply absolute top-3 right-3 inline-flex cursor-pointer items-center justify-center rounded-md border border-[#fff2] bg-[#0003] opacity-0 shadow-xs outline-0 transition select-none hover:bg-[#0004];

  svg {
    @apply m-2 size-5;
  }

  .check {
    @apply opacity-0 transition-opacity;
  }

  &.copied {
    @apply bg-[#0005] opacity-100;

    &::before {
      @apply border-r border-[#fff2] p-2 px-2.5 text-sm font-medium content-['Copied!'];
    }

    .check {
      @apply opacity-100;
    }
  }
}

import { Layout } from '#components'

export default () => (
  <Layout title="Hello world">
    <h1>Hello world</h1> // [!code highlight]
  </Layout>
)