Show code with syntax highlighting in Blogger

 When showing code examples in a blog, it is nice to have syntax highlighting on the code to increase readability. 

To implement the syntax highlighting in Google Blogger, I use highlight.js

Instructions.

Goto blogger.com

Select Theme

Select Edit Html

find the </head> tag

Insert the following code before the tag.

<!-- code syntax higlight -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

When inserting code into to your posts, use the HTML editor in blogger and insert it like this

<pre><code class="language-XXXX">
..
YOUR CODE HERE
..
</code></pre>

XXXX is the code language

Example with python source


class Application(Gtk.Application):
    """ Main Aplication class """

    def __init__(self):
        super().__init__(application_id='dk.rasmil.Example',
                         flags=Gio.ApplicationFlags.FLAGS_NONE)

    def do_activate(self):
        win = self.props.active_window
        if not win:
            win = MyWindow("My Gtk4 Application", 800, 800, application=self)
        win.present()


def main():
    """ Run the main application"""
    app = Application()
    return app.run(sys.argv)


if __name__ == '__main__':
    main()

        

Extra info

  • If you want to show html code your have to replace all < and > by &#60; and &#62;
  • The online theme editor in blogger is not so good and it can be hard to find the </head> tag, so another option is to backup the theme, edit the .xml file and restore it again.
  • highlight.js support many themes, there can be selected by changing the atom-one-dark value in the stylesheet link in the lines inserted in the blogger theme. Check here for available themes


Comments

Popular posts from this blog

Pimp your Gtk application with CSS

Setup your Fedora Linux 35 using Ansible