Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Beautify Source Codes In Your Posts With Prism Syntax Highlighter For Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Beautify Source Codes In Your Posts With Prism Syntax Highlighter For Blogger

Beautify Source Codes In Your Posts With Prism Syntax Highlighter For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,018 views

Here’s another feature that some of you might like to incorporate in to your Blogger site especially if you show a lot of code snippets in your posts articles, it’s a syntax highlighter based on a plugin developed by Prism. This is a nice and helpful feature to have because it makes CSS, JavaScript, and HTML codes easier to read by assigning different font colors to tags, classes, and functions. Plus, it comes in three different themes!

So for today’s post I’ll be featuring the tutorial by Aumkar Thakur of LordHTML, which showcases the plugin’s capability. You can check out his demo.

To use it in Blogger is easy, just follow the instructions below:

  • Go to your Blogger dashboard and head over to “Template
  • Click on “Edit HTML
  • By using “Ctrl+F”, look for the <head> tag
  • Copy and paste the following code before it:
<link href='https://www.opendrive.com/files/MV8yNTEwMTMyX1RRcTlS/lord%20html%20prism-default.css' rel='stylesheet'/>
<script src='https://www.opendrive.com/files/MV8yNTEwMTMzX0ZKbVdJ/lord%20html%20prism-default.js' type='text/javascript'/>
  • Save the template and you’re done,

Now to be able to use the feature, all you have to do while you’re creatingyour post (on HTML mode) is enclose the source code (your snippet) inside the tags with the appropriate classes.

To highlight HTML code

<pre class='language-markup'>
<code class='language-markup'>
Your HTML code/snippet goes here</pre>
</code>

To highlight CSS code

<pre class='language-markup'>
<code class='language-markup'>
Your CSS code/snippet here</pre>
</code>

To highlight JavaScript code

<pre class='language-markup'>
<code class='language-markup'>
Your JavaScript code/snippet here</pre>
</code>

Hope you enjoy using this feature!

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. kinh te says:


    Your HTML code/snippet goes here

    do you no :(

  2. Fabulous, what a weblog it is! This blog gives useful facts to us, keep it
    up.

    • Coder Safari says:

      Commenting in own site doesn’t increase the reputation.Fake post all the content are others.Useless.

      Post published by max are only awesome..no these nonsense guys are posting unnecessary post

  3. Very nice post. I just stumbled upon your
    blog and wished to say that I’ve really enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and
    I hope you write again very soon!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here