Contributing to Prism

May 22, 2022 — Simon Jespersen

I've used the excellent Laserwave theme by Jared Jones for many years now in vscode, and I just had to have it as a syntax highlighter for this blog.

My pull request for adding it to Prism has been merged, but as of this writing, the prism-themes package has not been updated. Here is a preview using a piece of the code that generates this blog post:

export default function BlogPost() {
  const { post } = useLoaderData()
  const date = new Date(post.publishedAt).toLocaleDateString('en-US', {
    dateStyle: 'long',
  })
  const mainImage = imageUrlBuilder.image(post.mainImage).width(900).url()

  return (
    <div className='flex min-h-screen flex-col'>
      <Header />

      <Main>
        <article>
          <div className='mt-16 flex items-center space-x-4'>
            <header>
              <H1>{post.title}</H1>
              <p>{date} — Simon Jespersen</p>
            </header>
          </div>

          <DecorationLine className='mb-6 w-1/2 md:w-1/3' />

          <section className='space-y-6'>
            <div className='aspect-w-16 aspect-h-9'>
              <img
                className='h-full w-full object-cover object-center'
                src={mainImage}
                alt='Blog post decoration'
                aria-hidden
              />
            </div>

            <div>
              <ITBPortableText blocks={post.body} />
            </div>
          </section>
        </article>
      </Main>

      <Footer />
    </div>
  )
}

You can view the source of IT Begins on Github.