Implement Code Highlight at PeakD + Hive.Blog and other Frontends

avatar

We use the largest frontends on the Hive blockchain every day to write our posts. A large portion of users are increasingly using code to get certain formatting to customize the look of a post on the frontend. When working with code, be it MarkDown or HTML to get desired formatting, confusion can arise quite quickly. So-called code highlights can help here by displaying the code in color and thus simplifying the management of the code within the code editor. A current example in the following screenshot, which I have created in Photoshop once sensible, so you can see how easy the navigation can be with highlighted code.

code-highlighting.gif
In the screenshot I just took a snapshot of my last article and added it to an example of Code-Highlight. (Animation)

To the owners of the front ends

Herewith a call to the owners or those who develop on the frontends to think once whether code highlights should be used for improvement to produce articles on Hive. Happy to discuss this in the comments.

PeakD @asgarth + @jarvie
Ecency @good-karma
Leofinance @leofinance @khaleelkazi
and last but not least the Main Frontend
Hive.Blog @blocktrades @quochuy @mahdiyari

What open source solutions are there to implement Code Highlight?

Well... You have to consider which WYSIWYG (What u see is what u get) editor is currently used in the frontend to see if there is native support for code highlight or if you have to add code highlight manually.

In the case of PeakD I found out in the code that the editor "mavoneditor" is used and here "highlight.js" could be used. Info: https://developpaper.com/vue-markdown-editor-mavoneditor-and-highlight-code-highlight/

LeoFinance also use MavonEditor... I cant figure out what Editor is used in the Hive.Blog Frontend... and dont know what Ecency is using.

I'd just like to raise the thought if it would be possible in your frontends to highlight code in the editor. That would make some things easier :) Thanks

PS: Even Discord handle Code Highlighting...

image.png

image.png

Vote for my Hive Witness

U can vote for my Witness using Hive Keychain here: https://vote.hive.uno/@louis.witness

image.png

Vote for my Hive Engine Witness

Vote for my Witness on Hive-Engine using Primersion Tool: https://primersion.com/he-witnesses Enter your Username and search for louis.witness

development hivedev peakd markdown html code hive blog community palnet
0
0
0.000
10 comments
avatar

Do you like the highlight implementation on https://hivean.com/?
e.g. this post
It was going to be merged to hive.blog a long time ago but not sure what happened.
There was a discussion about highlights adding considerable size to the front-ends and making the loading times longer but I think that's negligible considering browser caches.

0
0
0.000
Reply
avatar

Yea, its nice. When i try to create a new Post and enter Basic HTML / Markdown Code in the Editor its not colored. But inside your Post you have some nice Code-Highlights for e.g. JS, that looks nice. I would like to see Code Highlight when creating a Post to make it more readable and easier to use. It may help people aswell that not much understand Code.

Thanks for the Quick answer!

0
0
0.000
Reply
avatar
(Edited)

That's implemented by @quochuy and it's his website. I think the editor part was forgotten or the implementation wasn't complete yet.
He was busy upgrading react and other libraries on the condenser recently. Created an issue to not forget #184

0
0
0.000
Reply
avatar

Yes, somewhere a long time ago I had seen that they were working on an implementation of Code Highlights. I'd really like to see a code highlight on preview/post instead of code highlight when posting and creating code inside a <code></code> field. Anyway... it would be great if some work is done here :) Thanks

0
0
0.000
Reply
avatar
(Edited)

It was decided not to continue with the code highlight and use Gist embed instead.

See an example here (scroll down the post):
https://hive.blog/hive-139531/@quochuy/hiveauth-client-library

0
0
0.000
Reply
avatar

Oh right. It makes sense.
Still don't you think we can have both of them? Github is a centralized company and IIRC they banned developers from certain countries a few years ago.

0
0
0.000
Reply
avatar

I think the decision was made because the code highlight library was very large

0
0
0.000
Reply
avatar

You should relaunch a discussion on MM

0
0
0.000
Reply
avatar

Congratulations @louis88! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 43000 HP as payout for your posts, comments and curation.
Your next payout target is 44000 HP.
The unit is Hive Power equivalent because post and comment rewards can be split into HP and HBD

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

We have finished upgrading our website
Our Hive Power Delegations to the April Power Up Month Winners
Feedback from the May 1st Hive Power Up Day
0
0
0.000
Reply
avatar

Code Highlights would be awesome. I find it challenging to keep an overview visually. If I could write my posts in a more structured way, I guess I could enjoy creating content even more! Thanks @louis88 ! 😊

0
0
0.000
Reply