Syntax highlighting on the SteemMakers website

At SteemMakers we try to focus on helping and rewarding makers and DIYers on the Steem blockchain. One of the ways in which we do this is to try and guide readers to the makers' blogs.

Focus on the author

In the enthusiasm of our last update which allows the complete blog posts to be read on the SteemMakers' website we removed the link to the author's blog. It didn't take long for some people to notice this and we prioritized the addition of a header to each article. The author name now links back to the author's blog and we added links to the article on both steemit and busy until we have all functionality integrated. We also show the post date exactly and not as steemit which shows "6 months ago".

Syntax highlighting

A large group of makers end up programming. Be it an arduino, a raspberry pi or some other piece of hardware often they share the code used. We quickly found out that our visualization was not quite appealing which just makes it harder for readers. Several options were investigated and in the end we chose to use highlight.js for this task. On the right you can see the result of this update.

The integration went a little harder than expected. The biggest issue was that the content is fetched from the blockchain and as such not available when the page is loaded while all examples on highlight.js assume this to be the case. This doesn't work well with the MVVM model vue.js is using and to make matters worse the debugger wasn't playing nice. after googling and trying out every possible proposed solution I had to give up and fall back to trigger the debugger via debugger; because VS Code refused to handle the breakpoints.
After lots of fiddling the solution seemed not that complex and I managed to get it working by using a vue.js directive (cfr BlogEntry.vue).
This is an overview of how the different frontends manage to visualize code blocks (note there is some scaling distortion). Only Utopian and SteemMakers make an effort here. It's a pitty steemit doesn't do an effort here.

Live

This is a live test with four languages as in the images above. Have a look at all the articles on the site. There are a lot of examples with code like How to Display Bitmap Images on Nokia Arduino LCD or Raspberry Pi Robots with Python

What will come next?

The article preview needs some updating. After that we'll probably improve the bot.

Help us out

Anyone interested is free to join and help out, all work is available on Github. More information can be found on our website www.steemmakers.com, have a look and join us on Discord!

Utopian proof of work: commit1, commit2.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---