steemit / steem-js

Steem.js the official JavaScript library for Steem blockchain
https://www.npmjs.com/package/steem
MIT License
472 stars 225 forks source link

Displaying body content #176

Closed PankhilJain1423 closed 7 years ago

PankhilJain1423 commented 7 years ago

Hello, `var author = 'echozaurora', permlink = 'better-late-than-never-hi';

steem.api.getContent(author, permlink, function(err, result) { console.log(err, result); });`

After getting json responce, we see body object at shown below. Is there any method in steem by which we can convert it again to same way it is written(as we can see in steemit.com pages) or we have to write our own custom method to display this content.

body = "@sykochica @giftedgaia @winstonwolfe\n\nHello Steemit. \n\nhttps://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif\n\n*Giphy gif ^ (I'm not actually a cat... or AM I?!)*\n\nIt's early (at least for me) and I'm rather sleep deprived on account of working and playing videogames too much and sleeping not even remotely enough. So coming to you as a zombie fueled largely by industrial music and mediocre coffee, allow me to introduce myself.\n\n| (My name is Devyn) | ![13734878_10102346291580004_8876844380631102610_o.jpg](https://steemitimages.com/DQmZ1cZpY8env9Kd1eE1TXvRen1iMJB17VYd24Qx1W7U7tx/13734878_10102346291580004_8876844380631102610_o.jpg) |\n| --------------------------- | -------------------------------|\n\nI used to live in Springfield, Missouri... which is where I met the three people I mentioned at the top of this post that told me about this place. However, I\U2019ve spent the past few years entertained by the adventures of Florida Man\U2122 in the general Ft Lauderdale area, where I currently live with my girlfriend and several cats. I work in cybersecurity and the bulk of my days are spent protecting the interwebs from various garbage (mostly DDoS and web application attacks).\n\nAs far as things I'll probably post about, I've got a myriad number of interests and hobbies. As an excuse to play with markdown and display Instagram photos... see the clusterfuck of images below:\n\n|![15443281_10102631502230574_7241403408995451743_o (1).jpg](https://steemitimages.com/DQmcUbcszCdAEz3Et4zdXxGDYCK9AHsxc32SR2C8qBpghfG/15443281_10102631502230574_7241403408995451743_o%20(1).jpg) | ![14289854_10102448185808154_6852336018792447056_o (2).jpg](https://steemitimages.com/DQmeyRpTJ9Zc5qhjXuDvYQ4dXDhpcKeUvNTHL3eyzWZvDLU/14289854_10102448185808154_6852336018792447056_o%20(2).jpg) | ![motodev.jpeg](https://steemitimages.com/DQmRngSmjrFja1A42Di4wjnjowRBavDYDpgpZnuXPr8s18j/motodev.jpeg)\n|-------|--------| -------- | \n| Cats | Space/Astronomy/Telescopes | Motorcycles/Cars\n|![devywhoop.jpg](https://steemitimages.com/DQmUDDXVYbVw1tK8yoTT8N93wMqL3qzaNQyML4X9PEjszrn/devywhoop.jpg)|![sushifashion.jpg](https://steemitimages.com/DQma3cjJZbZgSmquEzWvidUDQLgz7bmwP4zDCqdSU6PwVzP/sushifashion.jpg)|![KerbArwing.jpg](https://steemitimages.com/DQmTeNFRMwmhkJqLEquRGV8bHHwL5f4RFUDDqbs3cE7NLKo/KerbArwing.jpg)|\n| Drones (Tiny Whoop!)| More Cats (Cat Fashion?) | Videogames (KSP ftw)\n|![rasppi.jpg](https://steemitimages.com/DQmRdWRvEMcrE8G2FSkfxys1CtTH5bjyxCoU8Ehm1XZUwfi/rasppi.jpg)|![DJing.jpg](https://steemitimages.com/DQmbzvPkKLppEQ6BUNXfMoPcGdU3KBkHkkTuYPZuz1LgGC8/DJing.jpg)|![DapperSiri.jpg](https://steemitimages.com/DQmRNE8e27h16gSiJMyDYgfhsm3ihx6fdZukEMVbPwuLHb7/DapperSiri.jpg)|\n| Raspberry Pi (Pie?)| DJing | So Many Cats|\n|![lazorz.jpg](https://steemitimages.com/DQme5Tha9rkqXGgVFsMCHQRuqqUUu4kfg3rMTGRnpicy1QG/lazorz.jpg)|![bonsai.jpg](https://steemitimages.com/DQmP1Q9BaSpjseVUoE8JuNBMtGB1U3Taz77DLxBdUBGTZqi/bonsai.jpg)|![mangrovin.jpg](https://steemitimages.com/DQmYG5fJy88X5bkpiq78pC1JDoc4LMP4FUfuHEdyrmRaoHc/mangrovin.jpg)|\n| Lazors | Bonsai | Nature|\n\nBreaking format here, I love to tinker and build stuff. Whether it is working on cars, building computers, drones, I have an engineering mindset and thrive on anything that can engage my creative drive. In that manner, I'm also interested in the creative things other people build (especially when it's just phenomenally innovative) so that's another thing I'll probably get into with future posts. So a last thing I'll mention for now... I'm a totally unabashed Elon Musk fangirl. Here's a video from the first rocket launch I ever watched up close:\n \nhttps://www.youtube.com/watch?v=A2pqR8dARUw\n\nAnd here's a video from the first time SpaceX successfully landed a Falcon 9 (listen to those sonic booms around 1:48!):\n\nhttps://www.youtube.com/watch?v=kTmuF2ewRWs\n\nThis is really only a taste of who I am, but to keep this post from turning into a novel I think I'll wrap it up here. Aside from the Giphy link above, all pics and video from my Instagram and YouTube accounts. I'm looking forward to interacting with the community here, and I'll try to post again soon! <3";

bonustrack commented 7 years ago

This is not part of Steem.js library. You might be interested to use markdown / html parser like this one https://github.com/jonschlinkert/remarkable to render a post.

PankhilJain1423 commented 7 years ago

Thankyou.

dancherb commented 6 years ago

Even with remarkable, the body content is an odd mix of html and markdown and I haven't been able to find a way to consistently parse it. Here's an example of how it looks when parsed with remarkable:

remarkable

Did you find a solution? @PJ1423 @bonustrack

Cengkaruk commented 6 years ago

@dancherb Still got this issue? I solved this by striping all html tags when the format in json_metadata are markdown. So many content are mixed like this, because limitation of markdown and user wanna stay flexible with something like layouting. But there is no Steem client are using WYSIWYG and html as a format, even in Steemit.com and badly rendering mixed markdown with HTML as is. It's look like works fine in user side, but not in our side :(