Add GitHub-style syntax highlighting to your website with Ulysses 13 and CSS

I’ve been wanting to add syntax highlighting to my blog for a while now that I’ve been writing regularly about code, so that my code looks more like:

/* Here's some good code */
@media screen and (min-width: 16px) {
  body {
	font-size: 1rem;
  }
}

And less like:

/* Here's some good code */
@media screen and (min-width: 16px) {
  body {
	font-size: 1rem;
  }
}

I’ve been taking code notes and doing most of my writing in Ulysses, a terrific text editing app. Last week I received the beta for its upcoming release, Ulysses 13, which will include improved support for code blocks—namely, its code formatting in Markdown is being brought into line with GitHub-style Markdown. This is awesome for using Ulysses to take code notes and write GitHub gists or manage Readme files, but I discovered it comes with another benefit: if you copy-paste your Ulysses code block as HTML, then you’ll get a ton of span classes automatically generated for syntax highlighting.

Copy Ulysses' new code blocks as HTML for automatic span tags for syntax highlighting

So instead of employing a JavaScript library or a WordPress plugin to do this, you can just write your article or code in Ulysses, copy the whole thing as HTML and paste it into the WordPress text (but not Visual, or rich text) editor to get the HTML side right. And then all you need to do is add your colors to your WordPress theme or website CSS.

I might change these, but for now I’m using GitHub’s colors and font-family, so Rawkblog code posts should look very familiar.

.code-highlighted {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* GitHub font stack */
}

.syntax-tag, 
.syntax-entity {
  color: #22863a; /* green */
}

.syntax-keyword { 
  color: #d73a49; /* red */
}

.syntax-constant {
  color: #005cc5; /* blue */
}

.syntax-comment {
  color: #6a737d; /* grey */
}

What still needs work

Ulysses has support for tagging the code I usually write—HTML, CSS, and PHP—but not yet for Sass, which means Sass variables and so on are going to look a little funky, and the span tags for those will need a hand-edit to get the colors right. Still, for every day use, I’m really excited about this, and looking forward to making my code here look more readable and familiar.

As this new version of Ulysses is still in Beta, I’ll be sending the team a note to add Sass support. Keep an eye out for Ulysses 13 to land in the coming weeks.

Update, June 2018: Ulysses 13 has been released and has support for Sass! Ulysses has also published its guide to code blocks. Happy highlighting.

You can purchase/subscribe to the Ulysses app on ulyssesapp.com.