hoakley General, Macs, Technology

Publishing code in WordPress articles

In the six years since I started to publish articles here, one feature I’ve been searching for is a good way to present source code. This article is the ultimate gamble: I’m going to explain how to do this, and demonstrate how well it works. So if it all goes horribly wrong, please don’t laugh. This demo is based on a single tool, the cheap app Codye, from the App Store, and aimed at anyone with a WordPress blog; it may well be suitable for other blogging systems too.

codye01

I edit my source code, written in Swift, in Apple’s Xcode, which provides syntactic colouring and tabbing which makes it much easier to read. What I want to embed in an article is a single boxout which preserves this styling and layout, and keeps the contents as text which can be copied and pasted. Until now, I’ve had to make do with a JPEG image of the code for reading, and the contents set as Code for the reader to copy.

To bring that code over to Codye, I simply copy it from Xcode.

codye02

Codye supports a long list of languages and themes. I’ve set the former to Swift, and the latter to Xcode, but changed the font to Courier at 12 points. I then pasted the code into the view on the right, where it’s tastefully formatted for checking.

codye03

Select the Export command at the left, then HTML as the format. From the three icons above select the one on the right, which copies the HTML to the Clipboard.

When pasted into your favourite text editor (BBEdit in this case) you can see the HTML consists of two main sections, a <style> at the start, and <pre><code> which follows and contains the formatted source code.

codye04

The next task is to add the Style to your WordPress design.

Log in to your WordPress site and select Design, then Customize. Click on the Additional CSS item at the foot of the Customizer’s menu.

Paste the Style section from Codye’s output into the text view there to add the required styles to your site. Then work your way back to your site management page.

codye05

codye06

You can also export from Codye in other useful formats, such as PNG. The code above is what you then insert into the article. It looks great, but sadly the reader can’t select and copy the code from it. This is what the PreCode from Codye looks like:

    func doReadNoCache(url: URL) -> Double {
        var theTime: Double = -1.0
        var theStart: UInt64 = 0
        var theEnd: UInt64 = 0
        do {
            if #available(OSX 10.15.4, *) {
                theStart = mach_absolute_time()
                let theData = try NSData.init(contentsOf: url, options: NSData.ReadingOptions.uncached)
                theEnd = mach_absolute_time()
                let theSize = theData.count
                if theSize < 1 {
                    theEnd = theStart
                }
            } else {
                theStart = mach_absolute_time()
                let theData = try NSData.init(contentsOf: url, options: NSData.ReadingOptions.uncached)
                theEnd = mach_absolute_time()
                let theSize = theData.count
                if theSize < 1 {
                    theEnd = theStart
                }
            }
            theTime = self.machToSecs(ticks: (theEnd - theStart))
        } catch {
            
        }
        return theTime
    }

I hope that’s a huge improvement.

Yes, Codye also has support for styling Objective-C, AppleScript, and many other popular languages.