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.
There's https://www.npmjs.com/package/steem-content-renderer by @wise-team and @mahdiyari seems to be working on a fork for Hive https://github.com/mahdiyari/hive-content-renderer
Seems like abandoned, how do you tackle this problem at Travelfeed?
hive-content-renderershould 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:
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;
We have one here, been using it in Ecency/Esteem for over a year now: https://www.npmjs.com/package/@esteemapp/esteem-render-helpers
@emrebeyler Hi, there! Sorry for the random comment on an 10 months old post. I am just searching for people who are interested in usability, UX, behavior or just care about the Users. Your post match this criteria, so I wanna invite you to this UX/UI design community. It is not yet a community, but I hope we can gather more people interested in the topic. Thanks!
Good post