This page is a test, but might help.

I originally was using this page to help me to try out new layout styles and techniques. But it ended up having information which might be useful to others, so it’s published rather than being internal only.

I would like to use the various plug-ins and in particular a code formatter to allow me to paste code samples easily. However at the price WordPress wants for a business site (to be able to use plug ins) that’s not going to happen for a while.

Also found out you can’t do custom CSS without paying for the upgrade. So let’s try some inline CSS. Messy and a bit hard coded, but if it makes for easier reading/entering.

Here’s Example 1:

#define LED 2 //Define blinking LED pin
int count =0;

void setup() 
{
  pinMode(LED, OUTPUT); // Initialize the LED pin as an output
  Serial.begin(74880);         // Start the Serial communication to send 
                               // messages to the computer
  delay(100);
  Serial.println("\n");

  Serial.println("i am alive\n");
  Serial.println("\n");
  Serial.println("starting loop \n");
}

char buffer[80];
// the loop function runs over and over again forever
void loop()
{
  sprintf(buffer,"loop   %d\n",count);
 
  Serial.print(buffer);
  count++;
  digitalWrite(LED, LOW); // Turn the LED off by making the voltage LOW
  delay(5000); // Wait for half a second
  digitalWrite(LED, HIGH); // Turn the LED off by making the voltage HIGH
  delay(100); // Wait for half a second
  Serial.println("Test printing two hyphens --");
}

In the above case, I have switched to custom HTML block rather than paragraph, and around the sample code I have wrapped a <pre> and a <code> HTML nodes. In the pre node I have also explicitly specified the colour, the background and the font. Thus the actual block (when editing actually looks like this):

&LTpre style =”background: #202020; color: #20FF20; font: 16px Monaco; padding: 20px;”> &LTcode>

 
#define LED 2 //Define blinking LED pin
int count =0;

void setup() 
{
  ...  rest of code example ...

  Serial.println("Test printing two hyphens --");
}

&LT/code>&LT/pre>

Yes I had to do a few more setting to make the above example, but it shows where the pre and code blocks need to be added to make the earlier example. Note that I hard coded the colours as I find RGB codes easier to adjust as I would like. Again not so good for support and sitewide changes, but for me it’s still easier at this point.

Note the above shows the test with two hyphens. I did this as earlier examples formatting makes it run into one. i.e. in text here two “-” together look like this –. Great here it looks okay. In other cases it didn’t.

Note Block. I like my notes to appear as white on blue, but it’s a pain doing that all the time by the controls.

Right I think these blocks look a lot more consistent and perhaps more importantly I can use them for (the code especially) making it easier to read.

If I come up with better ways of doing this, I will update the page accordingly.