Code previews are one of the features WordPress sucked. At least, in their default Block Editor (aka. Gutenberg). Let’s say that you’re writing a C program which commonly uses preprocessor tags such as #include, and for some reason WordPress automatically puts that into a clickable link because it recognize that as a tag instead.

But the problem doesn’t stop there. As you might already know, this site heavily uses a monospace font, because we’re proud to not just write, but also print() in programming languages. But, when it comes into embedding inline code snippets, they might not be clearly visible on our site because, you know, most of our content is already in monospace.

This is why we decided to treat inline code the same way as bold text , ’cause again, we’re bold enough to print()! If you’re reading our posts through our RSS feeds or your favorite browser’s Reader View, you can still see the differences between texts which are meant to be inline code and the ones written in bold.

But wait, there’s one more! Longer code previews, now powered by this specific WordPress plugin as well as Highlight.js, will render beautifully on this website. Light or dark, SYSTEM or root, they’re still beautiful to see on supported browsers. Firefox users will need to wait for a while since the support for blurred backgrounds (specifically CSS’ backdrop-filter) are still under development.

The code behind this wizardry is based on a lesser-known CodePen demo by Reinhart himself, which you can check out below. The goal behind it is just to define a better, glass-based Card component style for dark user interfaces, trying to be as futuristic as possible.

And this time, we decided to use a modified version of Atom‘s (infamous) One Light and One Dark color schemes. And Reinhart has written a dedicated blog post about his affection with Atom. That love, however, was start to tear apart as editors such as Visual Studio and Kate gain more features and advantages than a humble IDE like Atom.

Try it yourself

Well, that’s the end of our announcement. If you would like to see how that beautiful, futuristic code preview look on your device here’s a simple Hello, World program written in plain old C language. Thanks and have a nice day!

`#include <stdio.h>

void say(char c){
  printf("%c", c);
}

int main(int argc, char *argv[]){
  printf("%c", 72),
  printf("%c", 'e'),
  int i;
  for (i = 0; i < 2; i++){
    printf("l");
  }
  puts("o,");
  char sentence[7] = ['W', 'o', 'r', 'l', 'd', '!', '\n'];
  for (i = 0; i < 7; i++) say(sentence[i]);
  return 0;
}
`
<small id="shcb-language-1"><span>Code language:</span> <span>C++</span> <span>(</span><span>cpp</span><span>)</span></small>

The post reinhart1010.id Site Update: (Awesome) Code Previews! appeared first on Reinhart Previano Koentjoro.