Flows.nodered Rendering Differently than npmjs or GH

crxporter · 4 October 2021 14:42

We've recently pushed an update to our readme file and the markdown for readme.md is being processed differently on 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:

@Shaquu (flagging our main dev)

Shaquu · 4 October 2021 14:44

@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.

knolleary · 4 October 2021 16:12

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.

github.com

node-red/flow-library/blob/master/routes/nodes.js#L131


      
                          def.types[t].iconUrl = ("/icons/"+id+"/"+t).replace(/ /g,"%20");
                          if (fs.existsSync(__dirname+"/../public/icons/"+def.types[t].icon)) {
                              iconCache[id][t] = path.resolve(__dirname+"/../public/icons/"+def.types[t].icon);
                          }
                      }
                  }
                  def.types[t].hasInputs = (def.types[t].inputs > 0);
                  def.types[t].hasOutputs = (def.types[t].outputs > 0);
                  if (def.types[t].category == "config") {
                      delete def.types[t].color;
                  }
          
                  node.types.push(def.types[t]);
                  //console.log(def.types[t]);
          
              }
          }
          //console.log(node);
          node.readme = node.readme||"";
          
          marked(node.readme,{},function(err,content) {

mdkrieg · 4 October 2021 16:34

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

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

Shaquu · 4 October 2021 16:42

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

crxporter · 5 October 2021 00:46

@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!

Shaquu · 5 October 2021 15:43

As said we have removed vspace and it works now.

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

Thanks!

system · 4 December 2021 15:43

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

Topic		Replies	Views
Node-Red's Website - flows page Core Development	5	388	30 December 2020
Flow library markdown Share Your Nodes	6	481	25 September 2020
Child web pages in flows.nodered.org listings General	3	370	12 August 2019
[Updated] node-red-contrib-static-markdown v0.1.1 Share Your Nodes	6	446	2 November 2020
New Node: node-red-contrib-static-markdown - Now Published v0.0.14 Share Your Nodes	10	1374	6 July 2019

Flows.nodered Rendering Differently than npmjs or GH

Related Topics