SwiftySites | Syntax Highlighting

After overcomming the first big challenge of implementing Markdown support I found out rather quickly that this did not include any type of syntax hightlighting.

All pre blocks were rendered with no color and the code block info string was largely ignored by my basic stylesheet.

Once again I turned to Apple and noticed they were using highlight.js to generate the code blocks used in DocC.

I decided to customize my download to include only the languages I would need for this blog. I also picked one of the many color schemes they have available.

To put it to the test what better way than including a chunk of the code used to generate this exact page with SwiftySites. Lo and behold the coloring magically appears.

main.js

let homePage = Page("Home Page", path: "/") { """
_Some markdown here…_
"""

let pageTemplate = BasicSite.templateA { site, page in """
<!doctype html>
<html lang="en">
    …
    <title>\(site.title)</title>
    …
    <main>\(page.content)</main>
    …
</html>
""" }

BasicSite(
    SiteConfig(title: "SwiftySites"),
    contentA: [homePage],
    templates: [pageTemplate]
).render()

Now having inspected a DocC-generated site I have noticed that Apple is using a custom language definition for highlight.js. Since the code is obfuscated I couldn't extract it to incorporate into this site. Still the default Swift definition is decent enough and all of the other languages render nicely.