All rights are reserved by Niteesh Kumar.. Theme images by Storman. Powered by Blogger.

Followers

Total Pageviews

Blog Archive

Follow by Email

Translate

Sunday, 22 January 2017

how to highlight code syntax in blogger

As we can see that there is no special syntax in blogger by which we can highlight the syntax of a code.It is quite easy to do so.we can do this by just inserting few lines of codes in our template html code.You can go through this step by step guide-


1-Open your blogger dashboard and go to template section


 
Here you will see two options customize and Edit HTML.

 Click on the Edit HTML.


2-Copy the script given below-


 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- END INCLUDE SyntaxHighlighter Components -->

<!-- INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<!-- END INCLUDE BRUSHES -->
<!-- INIT SyntaxHighlighter -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

3-Paste the code in the HTML of your template just above </head> tag

   
   Click on save template-





4-After saving template open your post editor and open HTML-

  
   After opening the HTML section of your code enclose your code with the given tags-
<pre class="brush:language name(html) in this case"><----your code's HTML----></pre>
  

5-Save the code and publish the post and you will see that- 

open your post in your blog and see the changes-

12 on: "how to highlight code syntax in blogger"
  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi, i am using this way, but if my websites turn on https, it doesn't work. it only work on http. can you help me please?

    ReplyDelete
    Replies
    1. Change all links on http:// to https:// in your theme

      Delete
  3. Thank you @KC B for the comment.
    https is a secure gateway and google does not allow third party scripts in secure gateway.So it is not working.
    Go to setting in dashboard and make https redirects no in basic settings.
    and your site will always open on http and this will work.

    ReplyDelete
  4. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. website development agency

    ReplyDelete
  5. Thankyou for this blog its really interesting and informative, but there is some errors
    Which need to be recorrect by owner. See i also have some good blogs related to
    Technical services, you can check on my website.

    Avast Login
    garmin.com/express
    avg.com/retail
    bullguard support number

    ReplyDelete
  6. I would like to thank you because your site’s blog is very informative and very knowledgeable. I shared your site with my friends because they can take information from your site. I found some sites relate your site Check link Below...
    Thank you..

    Avast Login
    garmin.com/express
    avg.com/retail
    bullguard login
    mcafee.com/activate

    ReplyDelete
  7. This is working only for http blogger and not working for https blogger. Is there any additional setup required for https bloggers?

    ReplyDelete
  8. The TomTom is the most feature-packed, best connected, and smartest navigation device on the market, packing a number of features which help it compete with your smartphone.
    tomtom.com/getstarted | tomtom get started | www.tomtom.com/getstarted | tomtom update

    ReplyDelete
  9. It is not working for me . I want to use java brush and included the same in my themes. But it is not working

    ReplyDelete


  10. AVG antivirus is a prominent virus protection program among the world of software . As many hackers and data stealers are waiting for the user’s mistake, they can misuse of user’s identity and other data.
    www.avg.com/retail |
    avg.com/retail

    ReplyDelete
  11. You are very cool! I dont suppose I have read something similar to this before. So nice to search out somebody with authentic applying for grants this subject. Totally a helpful project for bringing new things for the Sourcecode.

    ReplyDelete