,

Using Squarespace and Embedding Syntax Highlighted Code with Emacs

,

Squarespace has the ability to syntax highlight the following three source types:

  • html
  • css
  • javascript

in a very workable built in code block in their blogging system.  But, if you use another source type like SystemVerilog or Python you will have to figure out something else to get your source code syntax highlighted on Squarespace.

In the following post on Answers Squarespace, it mentions a method using the javascript helper Prism that can syntax highlight a lot of languages out of the box.  It actually looks really cool.  Sadly, SystemVerilog is not in their list of supported languages.

To handle something like SystemVerilog, or nearly every language, the solution I ended up with was using Emacs with the plugin htmlize.  The idea is that since Emacs already has great syntax highlighting for everything, you can export regions or whole files to raw HTML with that syntax highlighting intact.  You then take the resultant HTML and put it into the Squarespace source block with the code type.

First you will need to install htmlize from the Emacs package manager.

M-x package-install
htmlize

Add the following to your .emacs.d/init.el file and restart:

(setq htmlize-output-type (quote inline-css))

The above will put the CSS style markings inline so that the HTML it generates will individually attribute elements, instead of defining a bunch of CSS types in the "<head></head>" block - which is hard to use in Squarespace.

Now you can select a region of source code in Emacs and then use:

htmlize-region

to export it to HTML.

Take from the output HTML everything between the "<PRE></PRE>" and put it into a Squarespace code source block as HTML.  Check out this link for an example of what SystemVerilog looks like - with the Emacs theme I am using.

As a pro-tip you can select the region you want and run:

M-x rectangular-number-lines

on the region first which adds in numbered lines to the source text and then htmlize to have line numbers embedded too.

References