Hilighting Swift Code In Publish

If you've made it this far I'll assume you've seen a code snippet or two on this site. Unless of course, this is the first article you've visited.

If its the former then you'll notice that all the code snippets (especially the Swift ones) have syntax hilighting to them. This post aims to show you how I did it.

A bit of CSS here and there

Code hilighting on the web generally starts with some css and this was no different. I started off by defining some code html tag specific style in my theme's CSS.

.inline {
background-color: #eee;
border-radius: 3px;
font-family: courier, monospace;
padding: 0 3px;
}

pre {
margin-bottom: 1.5em;
background-color: #1a1a1a;
padding: 16px 0;
border-radius: 16px;
}

pre code {
font-family: monospace;
display: block;
padding: 0 20px;
color: #a9bcbc;
line-height: 1.4em;
font-size: 0.95em;
overflow-x: auto;
white-space: pre;
-webkit-overflow-scrolling: touch;
}

pre code .keyword {
color: #e73289;
}

pre code .type {
color: #8281ca;
}

pre code .call {
color: #348fe5;
}

pre code .property {
color: #21ab9d;
}

pre code .number {
color: #db6f57;
}
pre code .string {
color: #fa641e;
}

pre code .comment {
color: #6b8a94;
}

pre code .dotAccess {
color: #92b300;
}

pre code .preprocessing {
color: #b68a00;
}


With the exception of the custom .inline general class I declared, I used the example css file John Sundell provided in his Splash HTML repository as a starting point. The next parts are pretty swift specific 😈

Integrating the Splash Publish plugin

In order to get true Swift syntax hilighting I used a ready made plugin created by John that had further syntax specific logic for the Swift language.

To start, all I had to do was add the plugin as a dependency in my Package.swift file. It ended up looking something like this.

// swift-tools-version:5.1

import PackageDescription

let package = Package(
    name: "Hggzgithubio",
    products: [
        .executable(name: "Hggzgithubio", targets: ["Hggzgithubio"])
    ],
    dependencies: [
        .package(url: "https://github.com/johnsundell/publish.git", from: "0.1.0"),
        .package(url: "https://github.com/johnsundell/splashpublishplugin", from: "0.1.0")
    ],
    targets: [
        .target(
            name: "Hggzgithubio",
            dependencies: ["Publish", "SplashPublishPlugin"]
        )
    ]
)

Updating the site generator steps

Last but not least, I had to apply this plugin in the lifecycle of the site's generator function in my main.swift file.

To do this I referred to the base steps for generating a site manually on the Publish repository but made sure to add the splash plugin as well.

I also made sure to import the SplashPublishPlugin in the same file.

import SplashPublishPlugin
try Hggzgithubio().publish(using: [
    .installPlugin(.splash(withClassPrefix: "")),
    .addMarkdownFiles(),
    .copyResources(),
    .sortItems(by: \.date, order: .descending),
    .generateHTML(withTheme: .hggz, indentation: .tabs(1)),
    .generateRSSFeed(including: [.posts]),
    .generateSiteMap()
])

And there you have it. I had Swift (and general) code syntax hilighting upon refreshing my site!

I hope this helps anyone else embarking on the server side Swift journey via Publish.