Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

23 October 2021

reinhart1010.id Site Update: (Awesome) Code Previews!

Shiftine's profile picture

Shiftine (@shiftine)

Published on Logs of the SYSTEM Updates

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2021/10/23/reinhart1010-id-site-update-awesome-code-previews?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2021/10/23/reinhart1010-id-site-update-awesome-code-previews</a></iframe>
Preview
Cover image for reinhart1010.id Site Update: (Awesome) Code Previews!

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.

https://codepen.io/Reinhart_Previano/pen/ZEYZgPR

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;
}
Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2021/10/23/reinhart1010-id-site-update-awesome-code-previews?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2021/10/23/reinhart1010-id-site-update-awesome-code-previews</a></iframe>
Preview

Reinhart Previano Koentjoro
Reinhart Previano Koentjoro
Citra Manggala Dirgantara
Citra Manggala Dirgantara

A Reinhart company

Products

Company