Pages

Sunday, May 3, 2020

Blogger Syntax Highlighting (Again)

I was working on a blog post with Kotlin and noticed SyntaxHighlighter had no brush for Kotlin, not even V4.  Given that, and the popularity of highlight.js, I've decided to switch to that. You just gotta add something like this in the <header> of your Blogger template.
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css' rel='stylesheet'/>-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/androidstudio.min.css' rel='stylesheet'/>
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/atom-one-dark.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/agate.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/darcula.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/rainbow.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/railscast.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/solarized-dark.min.css' rel='stylesheet'/>-->
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/zenburn.min.css' rel='stylesheet'/>-->
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/autohotkey.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/bash.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/c-like.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/c.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/clojure.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/cpp.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/csharp.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/css.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/dockerfile.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/dos.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/fsharp.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/java.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/javascript.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/go.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/groovy.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/markdown.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/nsis.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/pgsql.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/plaintext.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/powershell.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/properties.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/python.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/ruby.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/scala.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/scss.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/sql.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/typescript.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/vbscript.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/xml.min.js'/>
<script charset='UTF-8' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/yaml.min.js'/>
<scrpt>hljs.initHighlightingOnLoad();</script>

There are many other languages and styles available. And as with SyntaxHighlighter, you need to escape < with &lt; and > with &gt.
Then you put your code inside
<pre><code class="kotlin"></code>

</pre>
or
<pre><code class="lang-kotlin">

</code></pre>
or
<pre><code class="language-kotlin">

</code></pre>

No comments:

Post a Comment