Engineering

Enabling Syntax highlighting in Squarespace

To enable syntax highlighting, I decided to add highlight.js to DOM of each post.

I referred to this article.
Then, I inserted following code into header.

<style type="text/css">
  pre.hljs {
    font-size: small;
    margin: 0;
  }
  div.hljs {
    border-radius: 4px;
  }
  code {
    border-radius: 4px;
  }
</style>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/swift.min.js"></script>
<script>
Y.on('domready', function () {
  Y.all('pre code').each(function () {    
    hljs.highlightBlock(this.getDOMNode());
  });
  Y.all('pre.source-code').each(function () {    
    hljs.highlightBlock(this.getDOMNode());
    this.ancestor('div').addClass('hljs');
  });
});
</script>

Testing Syntax Highlighting

func abc() {}
class Foo {
  func foo() {
  }
}
protocol Bar {
}
func abc() {}
class Foo {
  func foo() {
  }
}
protocol Bar {
}
class Foo {}