Small Basic Forum: Code Blocks

Small Basic Forum: Code Blocks

In this article, I will explain how to use Nonki Takahashi's Code Block Interpreter to make code blocks in forums. When importing and running SKC235-1 in the SB UI, you should be greeted with this window:
 

So first, you copy/paste your code into the 'Paste source code below' box. The default options are pretty good, and unless you know what you're doing, I would keep them at their current values. I often click 'Preview' just to be sure that it looks good and that no big bug happened (I've never seen one occur yet, though =^) ) . So after doing that, you can click the 'OK' button. After it finishes processing your code, you should see a giant string of HTML. Those new to programming, don't freak out! It should look something like this.


So, basically, just copy all of that. Then comes the harder part. Putting it into your forum post. Everything you see in web browsers is probably run in HTML or other markup languages. This is your code block in HTML. To use this HTML code, you go to the forum you wanted to post on, and when you're posting, you'll probably see this:


Pushing this will allow you to edit the HTML of your post. In this case, we push it. This is what the HTML of a short post may look like:


You see where the </p> is? Careful, we don't want the <p>! After that </p> is where we put our code block. So just paste, press 'Update,' and you should see your code block. Ta-Da!

NOTE:

If it gets scrunched up like this, and you don't want that, you can go back to the Code Block Generator and make the 'Max Snippet Width' higher by about 100 to 150.


NOTE:

I wouldn't check the 'Display Line Numbers' box because if you do that, it will count the line numbers as part of the code in the end result. So then, others could end up having to erase all the line numbers after they paste into SB. That would be bad.

See Also

 

Leave a Comment
  • Please add 8 and 4 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Ed Price - MSFT edited Revision 11. Comment: White space tweak around the first image. Added a tag. Great job on updating the images!

  • Nonki Takahashi edited Revision 10. Comment: removed link to deleted image and changed HTML image icon  

  • Ed Price - MSFT edited Revision 6. Comment: Added the "See Also" section

  • Ed Price - MSFT edited Revision 4. Comment: Font size per style guidelines

Page 1 of 1 (4 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Helpful,

    I found using the online editor fairly painful (unable to scroll preview and sometimes crash on save) so I write everything in an offline editor (VS 2012 Express for Web) using the standard paragraph settings p, h2, h3 etc and just past the total HTML back in.

    Only used the online editor to load images, then copied the image html into my offline editor to check.

    Also used the code block html pasted into my offline editor as I wrote it.

    The code block formatter also works for extensions.

  • Add both of these tags "Small Basic, en-US" to have your article appear in the list below

    social.technet.microsoft.com/.../default.aspx

    I added the en-US

    Also see Nonki's wiki entry here

    social.technet.microsoft.com/.../14220.small-basic-how-to-format-a-code-block.aspx

  • I cannot see any of the images either. Thanks for the article, Math Man!

  • Ed Price - MSFT edited Revision 4. Comment: Font size per style guidelines

  • Ed Price - MSFT edited Revision 6. Comment: Added the "See Also" section

  • Sorry!! It enlarged all of the images for some strange reason. So I guess that all the images will have to be huge. That online editor is a MAJOR pain to work with. Will they ever work on it?

  • Nonki Takahashi edited Revision 10. Comment: removed link to deleted image and changed HTML image icon  

  • Math Man, what's the pain with the Editor? Images?

  • Ed Price - MSFT edited Revision 11. Comment: White space tweak around the first image. Added a tag. Great job on updating the images!

Page 1 of 1 (9 items)