Introduction: Put Your Code in a Box, Properly Indented, on Instructables

When I first wrote code it was on punch cards and you could not indent. Now you can, and code that is not indented is not often worth the effort of reading. In Python if the indentation is not right the code will not run right. Still there is a lot of code published on instructables that is not indented. That is a shame. Fixing it is not hard.

Step 1: Fail

This instructable has been fine in the editor, but viewing on line the editor apparently has made some tweaks to the code and the formatting is now trashed, I have fixed several times but it will not stick. I will look into it and see if I can fix it. Anyone else got some tips. If I cannot fix it I will un-publish it. Continue if you want to imagine that it worked

Step 2: For Example

Here I put in a box and pasted the code in ( and the reader can copy it out, formatted ):


class RunningAve:
    """
    proof and test in some other place
    tuples? no
    for long, could add and subtract from ends

    """
    #TIME    = 0
    #COUNT   = 1

    def __init__( self, length  ):

        self.val_len   = length
        self.ix_now    = 0

        self.values    = [ 0. ] * self.val_len
        self.ave_len   = 0

    # -----------------------------------------------
    def add_val( self, new_val ):

        """
        return new average after adding value
        value should not be a repeat


        """
        self.ix_now += 1

        # instead of this load the whole list with first value ???
        if self.ave_len < self.val_len:
            self.ave_len += 1              # less smooth at begin, but not at 0


        if self.ix_now >= self.val_len:
           self.ix_now = 0

        self.values[self.ix_now] = new_val

        retval =  0.
        for val in self.values:
            retval  += val

        return ( retval/self.ave_len )




Without the box the pasted code looks like this( it could be cleaned up with a lot of manual work for example:

)

class RunningAve:
""" perform running average """

def __init__( self, length ): self.val_len = length self.ix_now = 0 self.values = [ 0. ] * self.val_len self.ave_len = 0 # ----------------------------------------------- def add_val( self, new_val ): """ return new average after adding value value should not be a repeat """ self.ix_now += 1 # instead of this load the whole list with first value ??? if self.ave_len < self.val_len: self.ave_len += 1 # less smooth at begin, but not at 0 if self.ix_now >= self.val_len: self.ix_now = 0 self.values[self.ix_now] = new_val retval = 0. for val in self.values: retval += val return ( retval/self.ave_len )

Some people get around the problem of pasting in code with screen shots, but you cannot scroll these, include more than one screen of code, or let the reader copy formatted code out of the instructable, the box lets you do all of this.

Step 3: Tools and Materials

  • Pro membership ( just write a good instructable that for inscrutable reasons is favored by the site managers and get one free ) You need this to get access to the html editor feature.

Step 4: ​Do It

In the editor put in some of your regular text above and below where you want the boxed indented code, you do not need much text but it is hard to insert before or after the box if you do not do this.

Then press the “</>” icon. This will take you into a mess of HTML for the page. Be careful it is easy to loose your way. Then insert the text in the attached file ( I cannot put it in a box for you to copy because the HTML does not like HTML inside of it - at least as far as I have figured it out, plus the editor likes to change things around. )

Then exit the HTML using the "</>" icon again. You should see the box. Now that you have it you should be able to type in it, cut and paste with it, publish some descent looking code with it. Done.

And Hey! Instructables why not make this easy for everyone.

Comments

author
russ_hensel made it! (author)2016-01-07

I think I got some of my info from https://www.instructables.com/id/How-to-Enhance-You... . It is nice, but if you look at it you can see it is somewhat messed up, probably by the automagic features of the site. Would be so nice if instructables made sure all this stuff worked. It cannot be that hard can it?

author
nodcah made it! (author)nodcah2016-01-07

Yeah I've got to go over it again but thanks for the credit! I used overflow-y, which I believe isn't supported anymore.
I completely agree that Instructables could support way more html without messing up any content. I actually went through all of the useful HTML tags for the ible you linked above and most didn't work

author
SimonM83 made it! (author)2016-03-31

I did this and it really helps make code readable!

https://www.instructables.com/id/Improved-Arduino-Rotary-Encoder-Reading/

Screenshot (39).png
author
grandpayum made it! (author)2016-01-24

why not just post the source files as an attachment?

author
russ_hensel made it! (author)russ_hensel2016-01-24

It separates the code from the discussion of it and is more difficult for the reader to access among other reasons. But attaching all the code is always good. Better if well commented, but rarely seen.

author
russ_hensel made it! (author)2016-01-05

Box is working again, edited, then waited for auto save and quit. Is this it? Not sure what is happening, first it is fine then automagically not. The save button may be part of the problem.

author
ThomasK19 made it! (author)2016-01-05

Ah, that's cool. OTOH: why does the generic editor not allow to paste code where the leading spaces are kept and coding font is used?

author
russ_hensel made it! (author)russ_hensel2016-01-05

Because some site manager thought he/she was clever and did not think that code would be posted?

author
ThomasK19 made it! (author)ThomasK192016-01-05

Most likely. Who would ever post code in a technical instruction?

author
JesusG33k made it! (author)2016-01-04

"puts code in box"

About This Instructable

1,496views

10favorites

License:

Bio: For now see me at: http://www.opencircuits.com/User:Russ_hensel
More by russ_hensel:Tic Tak Power SupplyDifficult Dis-assembly: Taking Things Apart for RepairA Bit Better Bit Holder
Add instructable to: