Posting code frustrations

Either I’m missing something or posting code snippets on WordPress sites is just not easy–or, at least, I haven’t yet stumbled upon the trick of it.  So far, I’ve posted PowerShell and Python code snippets and I’ve used the CodeColorer plugin to jazz up the snippets a little.  Initially, this worked fine with my PowerShell snippets:

(I’m wrapping my code with the CodeColorer syntax [ccn lang=”powershell” width=”600″] )

However, Python depends heavily on tabbing to denote if statements, for loops, and so forth and this adds another level of complexity to the snippets you post.  In HTML, to properly preserve tabs and spacing in your code, you generally have to turn the pre tag.  So, for my Python snippets, I turned to both the CodeColorer plugin and the SyntaxHighlighter TinyMCE Button to wrap my snippets in appropriately styled “pre” tags and get this:

1
2
3
4
5
6
7
8
#the old surround-the-string-with-parentheses technique

qry1 = ('SELECT fname ' +

        ',lname ' +

        ',job_title ' +

        'FROM people')



curs.execute(qry1)

curs.fetchall()

(Here, I’m wrapping my snippet with this: <pre class=”brush: python; gutter: true; first-line: 1″>[ccn lang=”python” width=”600″])

What in the world is going on with the large gray box around my code?  It appears to be a background style setting connected to the pre tag, complements of the stylesheet my theme uses. Fortunately, WordPress has a custom CSS feature, so I should be able to overwrite this behavior.

It took me a few attempts, but this is custom CSS I came up with: .preforcode pre {background: transparent}

To implement my custom class, I wrapped my “pre” tag with a div, like so (note that I think all that brush…python stuff that the SyntaxHighlighter TinyMCE Button places in the class attribute of the pre tags is nonsense, so I just removed the attribute altogether):
<div class=”preforcode”><pre>[ccn lang=”python” width=”600″]

1
2
3
4
5
6
7
8
#the old surround-the-string-with-parentheses technique

qry1 = ('SELECT fname ' +

        ',lname ' +

        ',job_title ' +

        'FROM people')



curs.execute(qry1)

curs.fetchall()

Sweet! That gray box is gone! The padding around my snippet is still there: I guess that kind of makes my snippet pop out, but I might now have to mess around with that a little and eventually add any modifications I come up with to my custom CSS. At any rate, at least the snippet looks better so, going forward, hopefully my code snippets will look a little more appealing.