ardu source code in HTML format

Hi everyone, ? am sory to ask this. but ? have to :grin: I need the HTML format of my arduino source code to integrate it into my blog page with a scrollbar any one can help me about this?

? use the copy as HTML feature of the ardu IDE but it seems like this

http://barisdanacioglu.jimdo.com/elektronik/arduino-dersler-projeler/deneme/

how can ? modify the HTML code to obtain a scrollbar for long codes

how can ? modify the HTML code to obtain a scrollbar for long codes

Getting a scroll bar requires you to put the HTML created by the IDE into a container that has a fixed size.

But how can ? fix the size of the container?

Fanastron: But how can ? fix the size of the container?

The IDE won't help you do that. You'll need to find the appropriate HTML and CSS.

This forum has plenty of examples of what you want to do. You just have to look at the source of a post using the code tags.

H? James

I do what u say, but here is the result

http://barisdanacioglu.jimdo.com/elektronik/arduino-dersler-projeler/deneme/

while the original one is like this

http://arduino.cc/forum/index.php/topic,78797.0.html ( first post on the page )

I copy and pass the following part of the page source code

Code:
#include "LPD8806.h" #include "SPI.h"

int clockPin = 2; // Clock pin
int dataPin1 = 3; // Sweep 1
int dataPin2 = 4; // Sweep 2
int dataPin3 = 5; // Sweep 3
int dataPin4 = 6; // Sweep 4
int dataPin5 = 7; // Sweep 5
int dataPin6 = 8; // Sweep 6
int dataPin7 = 9; // Sweep 7
int dataPin8 = 10; // Sweep 8
int dataPin9 = 11; // Sweep 9
int dataPin10 = 12; // Sweep 10
int allSweeps = {3,4,5,6,7,8,9,10,11,12};

// Set the first variable to the NUMBER of pixels. 32 = 32 pixels in a row
// The LED s1s are 32 LEDs per meter but you can extend/cut the s1
LPD8806 s1 = LPD8806(14, dataPin1, clockPin); // Sweep 1 7 segments 14 "pixels" pin 3
LPD8806 s2 = LPD8806(14, dataPin2, clockPin); // Sweep 2 7 segments 14 "pixels" pin 4
LPD8806 s3 = LPD8806(14, dataPin3, clockPin); // Sweep 3 7 segments 14 "pixels" pin 5
LPD8806 s4 = LPD8806(14, dataPin4, clockPin); // Sweep 4 7 segments 14 "pixels" pin 6
LPD8806 s5 = LPD8806(14, dataPin5, clockPin); // Sweep 5 7 segments 14 "pixels" pin 7
LPD8806 s6 = LPD8806(14, dataPin6, clockPin); // Sweep 6 7 segments 14 "pixels" pin 8
LPD8806 s7 = LPD8806(14, dataPin7, clockPin); // Sweep 7 7 segments 14 "pixels" pin 9
LPD8806 s8 = LPD8806(14, dataPin8, clockPin); // Sweep 8 7 segments 14 "pixels" pin 10
LPD8806 s9 = LPD8806(14, dataPin9, clockPin); // Sweep 9 7 segments 14 "pixels" pin 11
LPD8806 s10 = LPD8806(14, dataPin10, clockPin); // Sweep 10 7 segments 14 "pixels" pin 12

void setup() {
  // Start up the LED strips
  s1.begin();
  s2.begin();
  s3.begin();
  s4.begin();
  s5.begin();
  s6.begin();
  s7.begin();
  s8.begin();
  s9.begin();
  s10.begin();
 
  // Update the strips, to start they are all 'off'
  s1.show();
  s2.show();
  s3.show();
  s4.show();
  s5.show();
  s6.show();
  s7.show();
  s8.show();
  s9.show();
  s10.show();
}

void loop() {
 
 rainbowAll(10);
 
}

[quote author=Fanastron link=topic=79030.msg597623#msg597623 date=1321385018]
I do what u say, but here is the result

No, you didn't.

Web browsers have no idea what "style=code" means, unless you tell it.

Every (modern) web page loads a stylesheet along with the HTML. The stylesheets for the forum define what "code" means and how to display it. You need to take the code section of the forum's stylesheet (and potentially other pieces of CSS that match) and create your own stylesheet. You can either a) add it to your exist css file, b) create a new one, or c) put it between "style" tags in the HTML's head.

You should be able to get by with something like this:

<code style = "max-height: 400px; overflow: scroll"><pre>
#include &quot;LPD8806.h&quot;
#include &quot;SPI.h&quot;

int clockPin = 2; // Clock pin
int dataPin1 = 3; // Sweep 1
int dataPin2 = 4; // Sweep 2

...

void loop() {
  rainbowAll(10);
}
</pre></code>

The element marks the content as computer code, and the

 element tells the web page to preserve the formatting (indents, line breaks, etc.). The style attribute declares three things:

  • the the element should be rendered as its own block rather than inline with the text (important so that you can give it dimensions like height),
  • that the height will be no larger than 400 pixels (or whatever value you set it to) but can be smaller if the code is short, and
  • that the box should have a scrollbar.

wooowow thanks to everyone
I got it XD I use the following code

<div style="height:120px;width:590px;overflow:scroll;">

....
    write your ardu HTML code here
....

</div>

here is my new blog post with scrolled long source code XD

http://barisdanacioglu.jimdo.com/elektronik/arduino-dersler-projeler/seven-segment-display-ile-masa-saati/

have a nice day!