Skip to main content

Code Syntax Highlighting on Blogger using Prismjs

Prismjs is developed by Lea Verou. It is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.Today, we will see how to use the prismjs on blogger to highlight our codes. It very easy and step by step process to follow:
  1. Goto to this link and get the personalized links for prismjs or simply copy the links given below:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-coy.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
  2. Goto Theme > Edit HTML and paste the links before the closing </head> section as shown below:
  3. Default prism.min.js file contain the functionality to highlight the code for only HTML, CSS and JS code. If you wish to use other language to highlight, you have to paste the link for that language support. Link for other language are also available at this link. For example if you wish to highlight the code for C language, you have tho paste the link before the closing head section and after default prism.min.js link. See the image below:
Labels:

Comments

  1. Unknown10 August 2018 at 19:33

    Thanks for all those examples, very appreciated! I think it would be very greate if we could have an example with the html5Mode(true) for the pushState feature and FoodMe would be a good app for that.
    angularjs training in chennai
    devops training in chennai

    ReplyDelete
  2. priya rajesh17 August 2018 at 14:31

    Excellent and useful blog admin. Thanks for taking time to share this examples.
    Angular 5 Training in Chennai | Angularjs Training in Chennai | ReactJS Training in Chennai

    ReplyDelete
  3. cynthiawilliams11 September 2018 at 14:16

    Hi admin,
    This is what I have looked for. Your blog gives lots of information to me.
    ReactJS Training center in Chennai | Learn React

    ReplyDelete
  4. indhumati19 September 2018 at 16:11

    I have gone through your blog, It was very much useful for me and because of your blog, Also I gained many unknown information, kindly post more like this , Thank You.
    Angularjs Training in Chennai
    Angularjs Training

    ReplyDelete
  5. Unknown4 October 2018 at 12:24

    Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area. We are providing AngularJS training in Velachery.

    For more details: AngularJs training in velachery

    ReplyDelete
  6. arunsharma8 October 2018 at 19:02

    Marvelous and fascinating article. Incredible things you've generally imparted to us. Much obliged. Simply keep making this kind out of the post.

    angularjs training in chennai

    ReplyDelete
  7. Ucup Timposu21 March 2019 at 20:05

    thank bro

    ReplyDelete
  8. Vicky Ram2 April 2019 at 12:41

    Really very nice blog information for this one and more technical skills are improve,i like that kind of post.

    Education
    Technology

    ReplyDelete
  9. Malcom Marshall21 January 2020 at 20:04

    This comment has been removed by the author.

    ReplyDelete
  10. subha6 March 2020 at 12:00

    This comment has been removed by the author.

    ReplyDelete
  11. subha6 March 2020 at 12:05

    Very good blog, this blog shares lot of new informations.
    PHP Training in Bangalore
    PHP Training in Chennai
    PHP Classes in Bangalore
    Best PHP Training Institute in Bangalore
    PHP Course in Bangalore
    AWS Training in Bangalore
    Data Science Courses in Bangalore
    DevOps Training in Bangalore
    Spoken English Classes in Bangalore
    DOT NET Training in Bangalore

    ReplyDelete
  12. shreekavi9 March 2020 at 17:27

    Great article. Thanks for sharing Such a worthy information....
    Selenium Training in Chennai
    Selenium Training in Bangalore
    Selenium Training in Coimbatore
    Best Selenium Training in Bangalore
    Selenium Course in Bangalore
    Selenium Training Institute in Bangalore
    selenium training in marathahalli
    Software Testing Course in Chennai
    Hacking Course in Bangalore

    ReplyDelete
  13. nayar25 May 2021 at 19:57


    Get inspired by your blog. Keep doing like this....
    Spoken English Classes in Bangalore
    Spoken English Classes in Pune
    spoken english centre in Hyderabad
    English Speaking Course in Gurgaon

    ReplyDelete
  14. shreekavi28 July 2021 at 19:34

    Nice blog! Thanks for sharing this valuable information
    IELTS Coaching in Hyderabad
    IELTS Coaching in Bangalore
    IELTS Coaching in Pune
    IELTS Coaching in Gurgaon
    IELTS Coaching in Delhi

    ReplyDelete
  15. bruce wayne19 October 2021 at 17:11

    Great blog.thanks for sharing such a useful information
    Salesforce CRM Training in Chennai

    ReplyDelete
  16. Manikandan20 October 2021 at 14:42

    Great blog. Thanks for sharing such a useful information. Share more.
    Pytest Online Course
    Pytest Online Training

    ReplyDelete
  17. nazeeb1 March 2022 at 15:26

    This post is so helpfull and informative.keep updating with more information...
    Angular JS Framework
    AngularJS Concepts

    ReplyDelete
  18. Anonymous2 June 2022 at 19:23

    maltepe beko klima servisi
    pendik alarko carrier klima servisi
    kadıköy toshiba klima servisi
    üsküdar bosch klima servisi
    beykoz arçelik klima servisi
    ataşehir samsung klima servisi
    çekmeköy mitsubishi klima servisi
    ümraniye beko klima servisi
    beykoz lg klima servisi

    ReplyDelete

Post a Comment

Popular posts from this blog

Automatic Slashing the Date Input using Angularjs

We define a directive that will automatically slash the input field as user typein the date. The directive have following capabiltiy: The directive will append slash '/' when input field has 2 or 5 characters. The input will accept only 10 characters (dd/mm/yyyy). Validity of date provide will not be checked. When the backspace is pressed it will remove the last two character if last character is slash. Otherwise it will remove last character from the input field. The input will not accept characters other than numbers (0 to 9). Let's jump into the code. We will use bootstrap for awesome look: HTML Code: <div class="container" ng-app="myApp" ng-controller="myAppCtrl"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <form class="form-horizontal"> <h4 class="bg-primary">Auto Slashing Date using Angularjs Directive</h4> <div class=...
5 comments
Read more

Conversion between Date String and Timestamp using Angularjs Directive

Let me ask you one question. Can a veiwValue and modelValue have same value into a different format? The answer is YES . Here we will see how it can be possible. We will see it through a simple example that converts date string (viewValue) into timestamp (modelValue). We will use a text box to enter a date string (dd/mm/yyyy) and convert it into timestamp that will be stored into model value. The trick is that we will use $parsers to convert the date string into the timestamp and $formatters to change the timestamp stored in modelValue to date string that will be shown on text input. Let's see the codes first: HTML Code: <h4>Date to Timestamp</h4> <div class="form-group"> <label for="date1" class="col-sm-3 control-label">Date1 VeiwValue:</label> <div class="col-sm-3"> <input type="text" id="date1" class="form-control" name="date1" ng-model="ob...
1 comment
Read more