Source Code Window in Instructable Page


it's my first time to write an instructable. I wanna add a few lines of source code to demonstrate in a page. I saw many people has done that.I searched in google but couldn't find it. I think perhaps it should be something like HTML format.

Anyone could help? Thanks very much!


sort by: active | newest | oldest

<pre> should work

penguin007 (author)  bravoechonovember15 months ago

It works. Thanks.

Downunder35m5 months ago

That should work - if the editor does not mess it up:


Scrollbox: <textarea style="width: 600px; height: 300px;" rows="20" readonly="readonly" name="code" cols="75">Enter Code Here</textarea>

Without the quotes, replace Enter Code Here with your own code.
I gave up requesting these features from the editor :(

penguin007 (author)  Downunder35m5 months ago

Thanks very much. I tried your code, it looks like below in the first picture: black background no scrollbar on the right. But I would like the style in the second picture: white background and scrollbar on the right.


Did you switch to the html mode of the editor and replace the Enter Code with some of your own code?
Not 100% sure it will work from the standard editor but if it does it should give you the look to the right.
Any difference when you try what Bravoechonovember suggested?

penguin007 (author)  Downunder35m5 months ago

Thanks, it works!

I added the html tag, then it works! The source code is below:

Scrollbox: <textarea style="width: 600px; height: 300px;" rows="20" readonly="readonly" name="code" cols="75">pPart = pidValue.proportionalValue * angleErrorNew;
iPart += pidValue.integralValue * angleErrorNew;
dPart = pidValue.derivativelValue * (angleErrorNew - angleErrorOld);</textarea>

Thanks a lot! Problem solved.