How to write raw code in WordPress

9 12 2008

As a corollary to one of my previous posts, and after extensive googling to avoid one bloody fastidious problem for one trying to blog about code (the WordPress auto-formatting which will trim your indentation and convert code enclosed between html tags in.. well what’s turns out to be in reality), I found this guideline by WordPress support which is definitely godsend.

class WizAndChipsCal(QMainWindow):
        def __init__(self, parent = None):
            QMainWindow.__init__(self, parent)
            self.CloseButton.setToolTip("<font color=red size=2><b>" + "Press here to Quit" + "</font></b>")
            #setToolTip accepts HTML tags so we can fancly specify size, colors and more if we want

While WordPress.com doesn’t allow you to use potentially dangerous code on your blog, there is a way to post source code for viewing. We have created a shortcode you can wrap around source code that preserves its formatting and even provides syntax highlighting for certain languages, like so:

Wrap your code in these tags:
[sourcecode language='css']
your code here
[/sourcecode]

Any of the following can be used for the language parameter (using one is required):

  • cpp
  • csharp
  • css
  • delphi
  • html
  • java
  • jscript
  • php
  • python
  • ruby
  • sql
  • vb
  • xml

Code in between the [sourcecode] tags will automatically be encoded for display, you don’t need to worry about HTML entities or anything.

Alex Gorbatchev’s syntaxhighligher Google Code project was used to implement this feature.





How to paste formatted code in WordPress

3 12 2008

WordPress writing tool it’s sometimes rather uncomfortable to use as, in my opinion, lacks of the flexibility to be swiftly usable for blogging.
Changing font size and type you must be done hacking around html code. I heard this is related to the design of each template which forces the usage of a standard type. Although this is logic, I still wonder if it wouldn’t be possible to implement a way to easily select a custom font (even among a limited bunch) directly from the writing interface. Sometimes I just force the font selection via “MS Word or OO Word Processor” paste tool.
More than this font issue a bigger pain in the ass is when trying to post code excerpt within a blog post. When you save or publish your post, WordPress just format and “normalize” the text. Special format or characters used can create a messy result. This is especially true when you must insert Python indented code as, among other things, the spaces will be trimmed off.
Anyway here’s a trick to work this issue out.
Just enable the HTML interface and enclose the code (or any specially formatted text) between <pre> and </pre> tags and this should do the trick.

Python code without <pre> </pre>

class HelloWorldWindow(QtGui.QMainWindow):
def __init__(self, parent = None):
QtGui.QMainWindow.__init__(self, parent)
self.setWindowTitle(“My First Qt Window”)
self.setGeometry(300,300,250,150)
self.setWindowIcon(QtGui.QIcon(“C:/Python26/PyQt/Icon/gadu.png”))
self.setToolTip(“Hello to this Wiz and Chips example!”)
app = QtGui.QApplication(sys.argv)
main_window = HelloWorldWindow()
main_window.show()
app.exec_()

Python code with <pre> </pre>

class HelloWorldWindow(QtGui.QMainWindow):
        def __init__(self, parent = None):
            QtGui.QMainWindow.__init__(self, parent)
            self.setWindowTitle("My First Qt Window")
            self.setGeometry(300,300,250,150)
            self.setWindowIcon(QtGui.QIcon("C:/Python26/PyQt/Icon/gadu.png"))
            self.setToolTip("Hello to this Wiz and Chips example!")
app = QtGui.QApplication(sys.argv)
main_window = HelloWorldWindow()
main_window.show()
app.exec_()

Of course I look forward WordPress introducing some sort of code auto formatting. You can see something like the used by DaniWeb forum (check this thread of mine for an example).