Author Options:

Code embeds from Github display mangled Answered

Embedding a Github gist results in code with random whitespace missing.

To reproduce:
 1. Edit an Instructable.
 2. Click the "add" button, then click "Video".
 3. In the URL field, enter the URL of a Github gist (for example, https://gist.github.com/anonymous/c4286979ded2d927b40a71fdd75038df)
 4. Click "Preview", then "Done".
 5. Save changes to the Instructable, then view it.

The embedded code from Github will be mostly correct, but random whitespace characters will be missing (both leading whitespace and whitespace between words).  In the attached screenshot, the code inside the function is supposed to have 4 leading spaces.  The function signature should also read "static int pad_open" instead of running everything together.  You can view the original code using the URL above to compare what's being displayed with what's actually showing up.

It's not clear whether this is a bug on the Instructables side or on the Github side.  I don't have any way to debug it from my end, so I thought I'd ask about it here before complaining to Github.

I am using Firefox v52.0.2 on Windows 7 (64-bit).


I poked around using Firefox's development mode, and it looks like this is indeed a problem on the Instructables side.  I inspected the HTML source for the embedded gist and compared it to what I got directly from github (using 'wget' on the command line to fetch the content).  It appears that the Instructables site is doing some sort of post-processing on the results that is removing critical whitespace:
 - Whitespace at the beginning of a line is sometimes deleted.  Lines inside the function in my example should be indented four spaces.  The function's comment block should have all of the star characters lined up vertically; the second row displays correctly, but not the third.
 - Whitespace between words with syntax highlighting gets removed.  The function prototype is missing spaces between "static", "int", and "pad_open".  Whitespace between formatted and non-formatted elements seems to be correct, as is seen after the keyword "struct" on that same line.

If I turn on Firefox's developer tools (Ctrl+Shift+I), I can edit the page's source to add in the spaces that are present in the straight-from-github version but missing in the Instructables version.  When I do this, the gist displays normally.

It feels like something somewhere is trying to compress whitespace in the HTML source in order to save space, but is a bit overzealous and is accidentally eliminating whitespace that's critical for the content to display correctly.

Update 2:

I have recently seen similar problems when using the HTML view in the pro editor to create a formatted code block manually.  If you manually indent code using " ", publish the Instructable, then edit it, you can see that the non-breaking spaces get converted to normal spaces and are then consolidated (which completely ruins the code's alignment).  This further points to the bug being in the code for the editor, and not on the Github side.



2 years ago

I noticed that when you edit an existing project in Instructables that contains code blocks (that were originally inserted as plain text) that HTML tags are added. Thus a code block that had plain text now shows tags and mangles the block.

See image below.


2 years ago

I have updated the bug description with more technical details about the problem.


2 years ago

I have stuff like <Directory "/var/www"> disappearing.


Reply 2 years ago

This is a separate issue. I left a note on the issue that you filed explaining one way to work around it.


2 years ago

Well, you don't use the video button to embed code, you that using HTML.
And instead of trying to get the code into here I would just link to the Github page instead, at least this way users can benefit from possible updates and changes to the code.