# Flows.nodered Rendering Differently than npmjs or GH

**URL:** https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839
**Category:** General
**Created:** [4 October 2021 14:42 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839 "2021-10-04T14:42:06Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![crxporter](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/crxporter/32/25734_2.png) [@crxporter](https://discourse.nodered.org/u/crxporter)
#### Post date: [4 October 2021 14:42 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/1 "2021-10-04T14:42:06Z")

</div>

We've recently pushed an update to our readme file and the markdown for `readme.md` is being processed differently on [flows.nodered.org](http://flows.nodered.org) compared to npmjs or github. On flows.nodered it is processed as a full-page 2 column document. We would expect it to look more like it does on npmjs and github.

Is this a thing we should fix in our readme.md file or is it a thing which should be looked at in the inner workings of the nodered website?

Links to the 3 views of the same markdown file:

> **[node-red-contrib-homekit-bridged](https://flows.nodered.org/node/node-red-contrib-homekit-bridged)**
>
> Node-RED nodes to simulate Apple HomeKit devices.

> **[node-red-contrib-homekit-bridged](https://www.npmjs.com/package/node-red-contrib-homekit-bridged)**
>
> Node-RED nodes to simulate Apple HomeKit devices.

> **[GitHub - NRCHKB/node-red-contrib-homekit-bridged: Node-RED Contribution -...](https://github.com/NRCHKB/node-red-contrib-homekit-bridged)**
>
> Node-RED Contribution - HomeKit Bridged : Node-RED nodes to simulate Apple HomeKit devices. - GitHub - NRCHKB/node-red-contrib-homekit-bridged: Node-RED Contribution - HomeKit Bridged : Node-RED no...

@Shaquu (flagging our main dev)

---

<div class="post-metadata">

### Author: ![Shaquu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shaquu/32/9701_2.png) [@Shaquu](https://discourse.nodered.org/u/Shaquu)
#### Post date: [4 October 2021 14:44 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/2 "2021-10-04T14:44:44Z")

</div>

@knolleary if you or your team could point us to the instructions how to resolve that it would be great.  
Also, if you could link repo which is handling flows.nodered at the moment then I could look myself as well.  
Please keep it in mind that GitHub markdown engine is very limited, so we cannot play with CSS too much in there.

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [4 October 2021 16:12 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/3 "2021-10-04T16:12:40Z")

</div>

> [@crxporter](#):
>
> Is this a thing we should fix in our readme.md file or is it a thing which should be looked at in the inner workings of the nodered website?

It depends how urgent it is to get resolved. The quickest fix under your control is to modify your readme.

If you identify the specific difference in the generated markdown, that would certainly help.

Last time I checked (which was a while ago) neither github nor npm have published their markdown renderer - nor do we want to maintain our own. So we use the `marked` markdown engine as it's one of the more "standards" compliant.

> <https://github.com/node-red/flow-library/blob/master/routes/nodes.js#L131>

---

<div class="post-metadata">

### Author: ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)
#### Post date: [4 October 2021 16:34 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/4 "2021-10-04T16:34:31Z")

</div>

If you're referring to how the image is not letting text wrap around it, seems that removing the `vspace="500"` attribute from the image does the trick. I tested it out using marked and it seems to work [Marked markdown demo](https://marked.js.org/demo/?text=%23%23%23%20%3Cimg%20src%3D%22https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F48475009%3Fs%3D200%26v%3D4%22%20alt%3D%22NRCHKB%20Logo%22%20height%3D%2220%22%2F%3E%20node-red-contrib-homekit-bridged%0A%20%20%0A%23%20HomeKit%20all%20the%20things!%0A%0A%23%23%23%23%20Do%20you%20need%20setup%20help%3F%20Have%20a%20great%20idea%3F%20Want%20to%20shoot%20the%20breeze%20with%20fellow%20users%3F%20%5BJoin%20us%20on%20our%20Discord%20server!%5D(https%3A%2F%2Fdiscord.gg%2FuvYac5u)%0A%0A%23%23%23%20%3Cimg%20src%3D%22https%3A%2F%2Fgithub.com%2FNRCHKB%2FNRCHKB.github.io%2Fraw%2Fmaster%2Fstatic%2Fimages%2Fpresentation%2Fdemonstration.gif%22%20alt%3D%22NRCHKB%20Demonstration%22%20align%3D%22right%22%2F%3E%20About%20this%20Contrib%0A%0AThis%20is%20a%20collection%20of%20nodes%20which%20can%20be%20used%20to%20imitate%20HomeKit%20devices%20inside%20of%20Node-RED.%20Messages%20coming%20into%20these%20nodes%20are%20able%20to%20set%20device%20states%20and%20status%20in%20Apple%27s%20iOS%20and%20MacOS%20Home%20apps.%20Commands%20from%20Home%20apps%20(or%20Siri)%20will%20be%20passed%20from%20these%20nodes%20into%20your%20Node-RED%20flows.%0A%0A%23%23%23%20Easy%20Install%0A%0AIf%20you%20have%20Node-RED%20already%20installed%2C%20the%20recommended%20install%20method%20is%20to%20use%20the%20editor.%20To%20do%20this%2C%20select%20%60Manage%20palette%60%20from%20the%20Node-RED%20menu%20(top%20right).%0AThen%20select%20%60Install%60%20tab%20in%20the%20palette.%20Search%20for%20and%20install%20this%20node%20(%60node-red-contrib-homekit-bridged%60).%0A%0A%23%23%23%20Docker%20Install%0A%0AYou%20can%20also%20pull%20a%20%5Bdocker%20image%5D(https%3A%2F%2Fgithub.com%2FNRCHKB%2Fnode-red-contrib-homekit-docker)%20containing%20everything%20needed%20to%20get%20started.%0A%0A%23%23%23%20Getting%20Started%0A%0A%5B **Example%20flows** %5D(https%3A%2F%2Fnrchkb.github.io%2Fwiki%2Fexamples%2F)%20For%20a%20quick%20start%2C%20we%20recommend%20checking%20out%20the%20flows%20which%20are%20included%20with%20the%20plugin%2C%20they%20can%20be%20imported%20using%20the%20Node-RED%20hamburger%20menu%20after%20install.%20%0A%0A%5B **Documentation%20home%20page** %5D(https%3A%2F%2Fnrchkb.github.io%2Fwiki%2Fintroduction%2Fquick-start%2F)%20For%20more%20instructions%2C%20information%20about%20how%20things%20work%2C%20and%20detailed%20examples%20(including%20various%20real%20life%20examples%20from%20the%20community).%0A%0A%5B **Discord** %5D(https%3A%2F%2Fdiscord.gg%2FuvYac5u)%20Again%2C%20one%20of%20us%20is%20on%20Discord%20every%20day%2C%20always%20ready%20to%20help!%0A%0A%3Cp%20align%3D%22center%22%3E%0A%20%20%3Ca%20href%3D%22https%3A%2F%2Fdiscord.gg%2FuvYac5u%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fdiscordapp.com%2Fapi%2Fguilds%2F586065987267330068%2Fwidget.png%3Fstyle%3Dbanner2%22%20alt%3D%22NRCHKB%20Discord%22%2F%3E%0A%20%20%3C%2Fa%3E%0A%3C%2Fp%3E%0A%0A%3Cp%20align%3D%22center%22%3E%0A%20%20%3Ca%20href%3D%22https%3A%2F%2Fgithub.com%2FNRCHKB%2Fnode-red-contrib-homekit-bridged%2Factions%2Fworkflows%2Fpublish.yml%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fgithub.com%2FNRCHKB%2Fnode-red-contrib-homekit-bridged%2Factions%2Fworkflows%2Fpublish.yml%2Fbadge.svg%22%20alt%3D%22Release%20publish%22%2F%3E%0A%20%20%3C%2Fa%3E%0A%3C%2Fp%3E&options=%7B%0A%20%22baseUrl%22%3A%20null%2C%0A%20%22breaks%22%3A%20false%2C%0A%20%22extensions%22%3A%20null%2C%0A%20%22gfm%22%3A%20true%2C%0A%20%22headerIds%22%3A%20true%2C%0A%20%22headerPrefix%22%3A%20%22%22%2C%0A%20%22highlight%22%3A%20null%2C%0A%20%22langPrefix%22%3A%20%22language-%22%2C%0A%20%22mangle%22%3A%20true%2C%0A%20%22pedantic%22%3A%20false%2C%0A%20%22sanitize%22%3A%20false%2C%0A%20%22sanitizer%22%3A%20null%2C%0A%20%22silent%22%3A%20false%2C%0A%20%22smartLists%22%3A%20false%2C%0A%20%22smartypants%22%3A%20false%2C%0A%20%22tokenizer%22%3A%20null%2C%0A%20%22walkTokens%22%3A%20null%2C%0A%20%22xhtml%22%3A%20false%0A%7D&version=master)

Looks like both GH and NPM remove this attribute in the actual HTML.

---

<div class="post-metadata">

### Author: ![Shaquu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shaquu/32/9701_2.png) [@Shaquu](https://discourse.nodered.org/u/Shaquu)
#### Post date: [4 October 2021 16:42 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/5 "2021-10-04T16:42:34Z")

</div>

This one [GitHub - github/markup: Determines which markup library to use to render a content file (e.g. README) on GitHub](https://github.com/github/markup) for github markup engine?

---

<div class="post-metadata">

### Author: ![crxporter](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/crxporter/32/25734_2.png) [@crxporter](https://discourse.nodered.org/u/crxporter)
#### Post date: [5 October 2021 00:46 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/6 "2021-10-05T00:46:44Z")

</div>

@knolleary it's not especially urgent, we will probably take away the `vspace=500` attribute in this case for a quick/easy fix. But I thought it would be good to raise the question here because while all 3 sites use the same source file, only one of them is not like the others. Since so much development happens on GH and NPM for nodered plugins, it is probably ideal for all 3 to render the markdown very similar to each other.

I'll leave it to @Shaquu to continue the conversation on rendering engines, since that's over my head.

Thanks, all!

---

<div class="post-metadata">

### Author: ![Shaquu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shaquu/32/9701_2.png) [@Shaquu](https://discourse.nodered.org/u/Shaquu)
#### Post date: [5 October 2021 15:43 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/7 "2021-10-05T15:43:13Z")

</div>

As said we have removed `vspace` and it works now.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bfb2e966e4d4bc5f53a605a5ead2687227e2d80f.jpeg)

As mentioned I have also noticed that GitHub and npmjs were removing that parameter during markdown sanity checks.

Thanks!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 December 2021 15:43 UTC](https://discourse.nodered.org/t/flows-nodered-rendering-differently-than-npmjs-or-gh/51839/8 "2021-12-04T15:43:20Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
