{"id":42752,"date":"2019-05-29T10:11:06","date_gmt":"2019-05-29T15:11:06","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=42752"},"modified":"2021-08-16T22:21:45","modified_gmt":"2021-08-17T02:21:45","slug":"how-to-add-highlight-js-to-your-website","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/","title":{"rendered":"How To Add highlight.js To Your Website"},"content":{"rendered":"\n

\nIt’s easy to use the highlight.js<\/a><\/i> library to improve code snippets on your website.\n<\/p>\n

\nBasically, highlight.js<\/i> lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. <\/p>\n

\nWe’re going to show you how to include the code library on any page, and how you can do it in WordPress.\n<\/p>\n

How To Add highlight.js<\/i> Scripts With HTML<\/h2>\n

\nYou can easily add the necessary scripts to any HTML page for which you have edit access<\/a>.\n<\/p>\n

    \n
  1. Open your HTML file in a text editor<\/li>\n
  2. Add scripts to head<\/code> section using the provided CDN links:
    <link rel=\"stylesheet\"\n      href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.15.6\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.15.6\/highlight.min.js\"><\/script><\/pre><\/li>\n
  3. Make sure to add the initiation script
    <script>hljs.initHighlightingOnLoad();<\/script><\/pre><\/li>\n
  4. Save your file<\/li>\n<\/ol>\n
    \nNow, highlight.js<\/i> will be able to automatically highlight your various code snippets, but should it fail, you can use a class\nattribute: \n<\/p>\n
    <pre><code class=\"html\"><meta author=\"Joe Example\"><\/code><\/pre><\/pre>\n
    How To Add highlight.js<\/i> Scripts to Your WordPress Site<\/h2>\n
    \nIt’s also very easy to add the highlight.js<\/i> scripts to your WordPress site.\n<\/p>\n
    \nYou’ll basically need to add the scripts to your site’s header. If you’re unfamiliar with editing site code for your WordPress theme files, you can use a plugin.\n<\/p>\n
    \nWe’ll be going the plugin route for this example.\n<\/p>\n
      \n
    1. Log into your WordPress Dashboard<\/a><\/li>\n
    2. Install the Insert Headers and Footers<\/a> plugin<\/li>\n
    3. From inside the plugin, add the above scripts to your header<\/li>\n<\/ol>\n
      \nWell done! You now know how to add the highlight.js<\/i> library to your HTML and WordPress sites. Be sure to leave a comment or question if you have any further difficulties.\n<\/p>\n","protected":false},"excerpt":{"rendered":"
      It’s easy to use the highlight.js library to improve code snippets on your website. Basically, highlight.js lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. We’re going to show you how to include the code library on any page, and how you can do it in WordPress. How Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-42752","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"\nHow To Add highlight.js To Your Website | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add highlight.js To Your Website | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"It’s easy to use the highlight.js library to improve code snippets on your website. Basically, highlight.js lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. We’re going to show you how to include the code library on any page, and how you can do it in WordPress. How Read More >\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-29T15:11:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T02:21:45+00:00\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How To Add highlight.js To Your Website\",\"datePublished\":\"2019-05-29T15:11:06+00:00\",\"dateModified\":\"2021-08-17T02:21:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\"},\"wordCount\":262,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\",\"name\":\"How To Add highlight.js To Your Website | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2019-05-29T15:11:06+00:00\",\"dateModified\":\"2021-08-17T02:21:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Add highlight.js To Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Add highlight.js To Your Website | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/","og_locale":"en_US","og_type":"article","og_title":"How To Add highlight.js To Your Website | InMotion Hosting","og_description":"It’s easy to use the highlight.js library to improve code snippets on your website. Basically, highlight.js lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. We’re going to show you how to include the code library on any page, and how you can do it in WordPress. How Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2019-05-29T15:11:06+00:00","article_modified_time":"2021-08-17T02:21:45+00:00","author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How To Add highlight.js To Your Website","datePublished":"2019-05-29T15:11:06+00:00","dateModified":"2021-08-17T02:21:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/"},"wordCount":262,"commentCount":6,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/","name":"How To Add highlight.js To Your Website | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2019-05-29T15:11:06+00:00","dateModified":"2021-08-17T02:21:45+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-add-highlight-js-to-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How To Add highlight.js To Your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/42752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=42752"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/42752\/revisions"}],"predecessor-version":[{"id":100529,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/42752\/revisions\/100529"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=42752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=42752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=42752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}