CRTL+C

So I've been thinking about doing an update to this blog, and something that's been bugging me since the start is, displaying code nicely.

Up until now, I've used Carbon, which is very pretty but also quite time-consuming, but not anymore! Blog, meet Prism, Prism, meet blog. 👋 Now I get to focus more on the writing part of my articles and just paste code that I'm going to use, straight into Contentful.

Being a developer I get to write steal a lot of code, and I guess this is my way of contributing a bit to our community by making sure, every bit of code that's being displayed on this blog is fully copy-pasteable. ⌨

So, a bit about implementation?

I hardly think this is going to surprise anyone, but npm install prismjs and you're halfway there. Then what's left, is up to you because there are some different approaches. I chose to download a theme from Prism and then modify it to look similar to the theme I've been using when using Carbon.

But, Prism is only going to help out with syntax highlighting, and since I've been using Carbon I've been spoiled by the looks of it. So I tried my best to come up with a similar result.

I wanted that cute, mini-window-style look.

• I used a .png file and put it as background-image on every <pre> element, as the top bar of the 'window' UPDATE: Just plain css.
• And yeah the rest is just some border-radius and a box-shadow lol.

Super advanced stuff. ✨

Here's the result:

import foo from 'bar';

const showOffSyntaxHighlight = async (str) => {
  const { someRes } = await foo(str);
  return someRes.result;
}

I also added some simple transitions on link-hovers on startpage, not quite satisfied with that yet though but still a small improvement.

See you soon!