Standards and HIVE markdown

in #condenserlast month (edited)


"Standards" by XKCD


Once upon a time, one developer at Steemit inc. decided to add some custom flavors to the the official Markdown syntax. One widely used example is that you can just paste image URLs into the post body, and they will be converted into an img HTML element, automatically.

One can argue that this is a very good usability thing for the end-users, but these kinds of custom flavors come with its own problems. Since users are expecting this behavior in everywhere, other HIVE interfaces also needs to implement the "Condenser flavored Markdown".

And guess what, it's not really modular, so you can't just use it as a package, you need to pull the related parts from the Condenser, manually.

We need a unified "Hive-Flavored-Markdown" package for Javascript (also preferably with other popular programming languages) so that every interface uses a common library to handle the differences.

Sort:  

Seems like abandoned, how do you tackle this problem at Travelfeed?

hive-content-renderer should make the same HTML output as condenser. It's not just a fork. It's a complete code rewrite in javascript.

great news! any updates on the browser version?

It's easy enough to add. I'll probably do it this week.

will be waiting for this :)

Just updated the readme on the git repository with CDN:

https://cdn.jsdelivr.net/npm/hive-content-renderer/dist/hive-content-renderer.min.js

Not fully tested but should work.

Abandoned but still working since the Condenser logic didn't change much. I'm currently using steem-content-renderer with some additional tweaks. The bundle-size is quite large though, so I use it on the server-side and save the parsed and sanitised output in our database, on the client-side it's only loaded for the editor preview. The server-side code is here https://github.com/travelfeed-io/tf-content-renderer, there's a second package that parses that code to react components https://github.com/travelfeed-io/tf-static-blog/tree/master/helpers/tf-react-parser.

I'm still maintaining full compatibility with Condenser markdown, but the default editor on TravelFeed is a block-based WYSIWYG editor with additional features https://travelfeed.io/@travelfeed/how-to-use-the-easyeditor-step-by-step-guide that are saved as stringified json in html. The json parameter of a div element is parsed out by Condenser, so only the placeholder is shown on Condenser but on TravelFeed the json is parsed instead. For example, that's how it looks like for an image gallery:

<div json='{"type":"imageGallery","data":{"images":[{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092715584Z-16.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092717590Z-4.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092719752Z-7.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092716918Z-23.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092716114Z-17.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092720265Z-5.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092722618Z-29.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092718251Z-30.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092719252Z-2.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092724328Z-1.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092720988Z-25.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092728224Z-15.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092725907Z-28.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092729067Z-26.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092726778Z-11.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092725145Z-22.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092722822Z-24.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092724480Z-14.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092729891Z-10.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092730110Z-13.jpg","width":4000,"height":2250},{"url":"https://img.travelfeed.io/invisusmundi%2F20200428T092731724Z-12.jpg","width":4000,"height":2250}],"style":"masonry"}}'><p><em>Image galleries are not supported by your current frontend. View this post on TravelFeed.io for the full experience.</em></p><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092715584Z-16.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092717590Z-4.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092719752Z-7.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092716918Z-23.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092716114Z-17.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092720265Z-5.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092722618Z-29.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092718251Z-30.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092719252Z-2.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092724328Z-1.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092720988Z-25.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092728224Z-15.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092725907Z-28.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092729067Z-26.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092726778Z-11.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092725145Z-22.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092722822Z-24.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092724480Z-14.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092729891Z-10.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092730110Z-13.jpg" /></center><center><img src="https://img.travelfeed.io/invisusmundi%2F20200428T092731724Z-12.jpg" /></center></div>

This is very much needed.

We NEED syntax coloring for code.

Indeed! I've been mentioning about it too when someone bring up markdown topic. More options and css options if possible :D

that would be awesome

Adding math text through LaTeX would be a plus too.

a necessity

That is a great idea, and that way when I want something to be added, maybe I can find a developer that can make an update to it, like adding a few more fonts or font size choices.

Hoping these two can be added;

  • More fonts options (size, color, font type)
  • More formula options (math, code, references/bibliography)

We have one here, been using it in Ecency/Esteem for over a year now: https://www.npmjs.com/package/@esteemapp/esteem-render-helpers