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 < and >
- 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
Post a Comment