Posting Source Code on WordPress

I’ve tried several different ways of formatting soruce code on my blog using WordPress.

Originally in my earlier posts I just used ‘<pre>’ and ‘<code>’ HTML tags.

<pre><code>#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")</code></pre>

This worked but didn’t look very interesting.

#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")

I also tried using the ‘[sourcecode]’ tag. Note – This is in square brackets not angled brackets like the ‘<pre>’ tag.

[sourcecode language="python"]
#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")
[/sourcecode]

This highlights the source code and (optionally) numbers the lines of code, but the large font size means that unless the code has very short lines you need to use the horizontal scroll bar which I wanted to avoid.

#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")

At this point I gave up for a while and decided that to get exactly the results I wanted I was going to have to format the source code using HTML, which is very time-consuming, though I do really like the results. For now I have not entirely given up on formatting my pages using HTML, but I’m going to have to write some sort of script to do it for me first!

In the meantime I decided to see what would happen if I embedded the ‘[sourcecode]’ tag inside a ‘<div>’ tag if I specified the same attributes that I used when formating the source code using HTML.

<div style="border-color:#d2d0ce; border-style:solid; border-width:1px;
border-radius:5px; background:#f7f7f7; padding:10px; line-height:133%;
font-family:monospace; white-space:nowrap; overflow:auto; font-size:10pt;
color:#696969;">[sourcecode language="python"]
#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")
[/sourcecode]</div>

The result wasn’t exactly what I wanted, unfortunately only some of the attributes specified in the ‘<div>’ tag were applied to the source code, others like the background colour and line spacing were ignored.

#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")

I decided to just remove the superfluous attributes and turn off the line numbers to maximize the line length (which with this theme works out at about 78 characters if you specify a 10 point font).

<div style="border-color:#d2d0ce; border-style:solid; border-width:1px; 
padding:3px; border-radius:5px; font-size:10pt;">
[sourcecode language="python" gutter="false"]
#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")
[/sourcecode]</div>

It is a shame I can’t control the font colour as being able to use a different colour for source code in the listing above would allowed me to highlight the HTML markup.

However, this does give me something close to what I wanted, and is much easier to produce!

#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")

If you don’t want the border then the markup is even simpler.

<div style="font-size:10pt;">[sourcecode language="python" gutter="false"]
#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")
[/sourcecode]</div>

#!/usr/bin/python
import sys, os
for _arg in sys.argv[1:]:
  try:
    with open(_arg, 'r') as _file:
      for _line in iter((_file.readline),""):
        print _line,
  except IOError as _err:
    sys.stderr.write(os.path.basename(sys.argv[0]) + ": " + _arg +
    ": " + _err.strerror + "\n")

For more information about formatting your source code in wordpress see https://en.support.wordpress.com/code/posting-source-code/.

Advertisements
This entry was posted in Programming, Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s