Skip to main content

How to Format Code on Blogger Using Syntax Highlighter (v 3.0.83) Part 1

Whether you code for a living, write technical documentation, or have a nerdy blog, you'll want to have a pretty way to display code in your blogs. Syntax highlighting, like how an IDE highlights markup and code, can be done in JavaScript and CSS, when rendering to the browser. In 5-30 minutes, you could be quickly styling code blocks like a professional!

We'll be using Syntax Highlighter, in this blog. Of course, alternatives are available, but won't be covered. Feel free to explore your options.

Using CloudFlare

  1. Navigate to Blogger.
  2. Go to Theme, and click Edit HTML
  3. Scroll to the bottom of the html, just before the body end tag. Copy the following markup into the end of the body element. 
    <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js' type='text/javascript'/>

<!-- Add your choice of theme, here. -->

<!-- Add your choice of syntax brushes, here. -->

<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
  4. Add a theme from CloudFlare. For example, if you want the default theme, use the following: 
    <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css' rel='stylesheet' text='text/css'/>
  5. Then, add syntax brushes from CloudFlare for the programming languages you typically use. For example, this blog uses the "xml" brush to highlight html markup, throughout the post: 
    <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' type='text/javascript'/>
  6. Click "Save Theme"
  7. When writing your blog, use the pre element to wrap your code, and add the brush class to it. For customization, like highlighting lines, take a look at configuration. Also, make sure to html encode your code (like &lt; in place of <, below). 
    <pre class="brush: xml">
&lt;!-- ... ---&gt;
</pre>

Building Our Own

Follow the directions, here. Or, if those are too complicated, I'll be writing a step-by-step guide, in a future post.

Labels:

Comments

Post a Comment

Popular posts from this blog

Book Review: The Art of Invisibility

Big Brother is certainly watching you, as George Orwell predicted in his book 1984 . If you're like most folks I know, you've been lulled into antipathy with silencing arguments like "if you've got nothing to hide, you've got nothing to fear"[ 1 ], or push it from your mind to avoid your feelings of powerlessness. Truth be told, you're not completely powerless, but building your privacy is a difficult feat. In Kevin Mitnick 's book,  The Art of Invisibility , he teaches you the effort it takes to grow your anonymity in today's world of digital surveillance. He starts with the basics - finding a portal to the digital world that isn't connected to you. Then he teaches you how to use that portal to gain a foothold of an anonymous identity on the Internet. He teaches you how recognize what would jeopardize linking that anonymous identity to your true identity. His primary audience are those who are interested in personal privacy for it's ow...
Post a Comment
Read more

Starting on Cybersecurity Path

I was accepted to a graduate program in cybersecurity. I've worked in the computing field for over two decades - starting in information technology moving to software development. Growing up the movies Wargames and Hackers inspired me to enter the computing field. I was too frightened of getting into trouble to follow  David  or Dade 's path. I envied their intelligence and ingenuity. The demand for cybersecurity has been growing in the past decade or so, and due to that I became aware of a legal path to learning the tricks of my childhood heroes.
Post a Comment
Read more