Highlight Code in Google Slides or Google Docs

<!DOCTYPE html> <html lang="en"> <head> <meta name="google-site-verification" content="WYTMhMcF3-A699qfC5ptJOc129LyQv3bRALCS1FgYD8" />  <script src="https://gumroad.com/js/gumroad.js"></script>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="./app.css"> <link rel="canonical" href="https://codeshighlight.com/" /> <link rel="apple-touch-icon" sizes="128x128" href="/images/icon128.png"> <link rel="icon" type="image/png" sizes="48x48" href="/images/icon48.png"> <link rel="icon" type="image/png" sizes="16x16" href="/images/icon16.png">  <meta property="og:type" content="website"> <meta property="og:url" content="https://codeshighlight.com/"> <meta property="og:title" content="Highlight Code in Google Slides or Google Docs"> <meta property="og:description" content="Highlight Code in Google Slides or Google Docs"> <meta property="og:image" content="./images/CodesHighlight_Cover.png">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://codeshighlight.com/"> <meta property="twitter:title" content="Highlight Code in Google Slides or Google Docs"> <meta property="twitter:description" content="Highlight Code in Google Slides or Google Docs"> <meta property="twitter:image" content="./images/CodesHighlight_Cover.png"> <title>Highlight Code in Google Slides or Google Docs</title> <meta name="title" content="Highlight Code in Google Slides or Google Docs"> <meta name="description" content="Highlight Code in Google Slides or Google Docs"> </head> <body> <header class="hero container-fluid position-relative"> <div class="hero__content container"> <div class="fixed-nav-container"> <nav class="hero-nav position-relative container mx-auto px-0"> <ul class="nav w-100 list-unstyled align-items-center p-0"> <li class="hero-nav__item"><a href="/"><img class="hero-nav__logo" src="./images/CodesHighlight.svg" change-src-onscroll="./images/CodesHighlight.svg" alt="our logo"></a><span class="mx-2"></span></li> <li id="hero-menu" class="flex-grow-1 hero__nav-list hero__nav-list--mobile-menu ft-menu"> <ul class="hero__menu-content nav flex-column flex-lg-row ft-menu__slider animated list-unstyled p-2 p-lg-0"> <li class="flex-grow-1"> <ul class="nav nav--lg-side flex-column-reverse flex-lg-row-reverse list-unstyled align-items-center p-0"> <li class="flex-grow-1"> <ul class="nav nav--lg-side flex-column-reverse flex-lg-row-reverse list-unstyled align-items-center p-0"> <li class="hero-nav__item"> <a href="#Pricing" class="btn btn-primary"> Get 50% Off <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path> </svg> </a> </li> </ul> </li> <li class="hero-nav__item"><a href="https://codeshighlight.com/affiliates" class="hero-nav__link">Affiliates</a></li> <li class="hero-nav__item"><a href="#Pricing" class="hero-nav__link">Pricing</a></li> <li class="hero-nav__item"><a href="#Features" class="hero-nav__link">Features</a></li> </ul> </li> </ul><button close-nav-menu="" class="ft-menu__close-btn animated"> <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"></path> <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"></path> </svg> </button> </li> <li class="hero-nav__item d-lg-none d-flex flex-row-reverse flex-grow-1 flex-lg-grow-0"><button open-nav-menu="" class="text-center px-2"><i class="fas fa-bars"></i></button></li> </ul> </nav> </div> <div class="hero__body text-center col-lg-11 px-0 mx-auto"> <h1 class="hero__title mb-3"><span style="color: #fd67c6;">Highlight Code </span>in<span style="color: #fee700;"> Google Slides </span>or<span style="color: #4fe0f7;"> Google Docs</span></h1> <p class="col-lg-9 hero__paragraph mb-5">馃敟 One click solution to free yourself from the pain of including highlighted code in Google Slides and Google Docs</p> </div> <div class="hero__img-container col-lg-11 mx-auto p-0 my-5"> <div style="position: relative; padding-bottom: 56.25%; height: 0; z-index: 999; border-radius: 20px;"><iframe src="https://www.loom.com/embed/c0ed38fa19d848e3bab484329c8efb99?hide_owner=true&hide_speed=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> <svg class="form-dots-svg form-dots-svg--top-left"> <defs> <pattern id="pattern" media="(min-width: 992px)" width="19" height="19" viewBox="0 0 40 40" patternUnits="userSpaceOnUse" patternTransform="rotate(90)"> <rect id="pattern-background" x="0" y="0" width="400%" height="400%" fill="transparent"></rect> <circle cx="20" cy="20" r="4" fill="currentColor" stroke="currentColor" stroke-width="0"></circle> <circle cx="20" cy="20" r="0" fill="currentColor" stroke="currentColor" stroke-width="0"></circle> </pattern> </defs> <rect fill="url(#pattern)" height="100%" width="100%" y="0" x="0"></rect> </svg><svg class="form-dots-svg form-dots-svg--bottom-right"> <defs> <pattern id="pattern" width="19" height="19" viewBox="0 0 40 40" patternUnits="userSpaceOnUse" patternTransform="rotate(90)"> <rect id="pattern-background" x="0" y="0" width="400%" height="400%" fill="transparent"></rect> <circle cx="20" cy="20" r="4" fill="currentColor" stroke="currentColor" stroke-width="0"></circle> <circle cx="20" cy="20" r="0" fill="currentColor" stroke="currentColor" stroke-width="0"></circle> </pattern> </defs> <rect fill="url(#pattern)" height="100%" width="100%" y="0" x="0"></rect> </svg> </div> <div id="Features"></div> </div> </header> <script src="https://unpkg.com/tua-body-scroll-lock"></script> <script> var showDropdown = function (e) { e.currentTarget.classList.add("hero-nav__item--show-dropdown") }, hideDropdown = function (e) { e.currentTarget.classList.remove("hero-nav__item--show-dropdown") }, toggleDropdown = function (e) { e.currentTarget.classList.toggle("hero-nav__item--show-dropdown") }; function setupDropdowns(n) { document.querySelectorAll(".hero-nav__item--with-dropdown").forEach(function (e) { var o, t; n.matches ? ((o = e.classList).contains("hero-nav__item--dropdown-left") && o.contains("hero-nav__item--dropdown-right") || (t = e.getBoundingClientRect().width, e.querySelector(".dropdown").style.transform = "translateX(calc(-50% + " + t / 2 + "px))"), e.addEventListener("mouseenter", showDropdown), e.addEventListener("mouseleave", hideDropdown), e.querySelector(".hero-nav__link").removeEventListener("click", toggleDropdown)) : (e.removeEventListener("mouseenter", showDropdown), e.removeEventListener("mouseleave", hideDropdown), e.querySelector(".dropdown").style.transform = "", e.addEventListener("click", toggleDropdown)) }) } var mediaQuery = window.matchMedia("(min-width: 992px)"); setupDropdowns(mediaQuery), mediaQuery.addListener(function (e) { var o; setupDropdowns(e), e.matches && ((o = document.querySelector("#hero-menu")).style.height = "", bodyScrollLock.unlock(o)) }); var heroMenu = document.querySelector("#hero-menu"); window.current function closeMenuAndGoTo(o) { document.querySelector("#hero-menu").classList.toggle("ft-menu--js-show"); var e = document.querySelector("#hero-menu"); if (e.style.height = "", bodyScrollLock.unlock(e), "#" === o || !document.querySelector(o)) return !1; setTimeout(function () { var e = document.querySelector(o); /* window.scrollTo({ top: 0 }) */ window.scrollTo({ top: e.offsetTop, behavior: "smooth" }) }, 250) } document.querySelector("[close-nav-menu]").onclick = function (e) { heroMenu.classList.toggle("ft-menu--js-show"), bodyScrollLock.unlock(heroMenu) }, document.querySelector("[open-nav-menu]").onclick = function (e) { heroMenu.classList.toggle("ft-menu--js-show"), heroMenu.style.height = window.innerHeight + "px", bodyScrollLock.lock(heroMenu) }, document.querySelector("#hero-menu").querySelectorAll("[href*='#']").forEach(function (o) { o.onclick = function (e) { e.preventDefault(), closeMenuAndGoTo(o.getAttribute("href")) } }); var nav = document.querySelector(".hero-nav"); window.onscroll = function (e) { var o = document.querySelector("[change-src-onscroll]"); window.scrollY > nav.getBoundingClientRect().height ? (nav.classList.contains("hero-nav--is-sticky") || (window.logoSrc = o.getAttribute("src"), o.setAttribute("src", o.getAttribute("change-src-onscroll")), o.setAttribute("change-src-onscroll", logoSrc)), nav.classList.add("hero-nav--is-sticky")) : 0 === window.scrollY && (nav.classList.contains("hero-nav--is-sticky") && (window.logoSrc = o.getAttribute("src"), o.setAttribute("src", o.getAttribute("change-src-onscroll")), o.setAttribute("change-src-onscroll", logoSrc)), nav.classList.remove("hero-nav--is-sticky")) }; </script>  <div class="block-8-scr space-between-blocks"> <div class="container position-relative"> <div class="row px-2 align-items-center flex-column-reverse flex-lg-row">  <div class="col-lg-6 my-5 my-lg-0 p-lg-5 text-center"> <div class="block-8-scr__img-container position-relative"> <div style="position: relative; padding-bottom: 56.25%; height: 0;"> <img class="block-8-scr__img w-100" src="./images/DraculaTheme.png"> </div> </div> </div>  <div class="col-lg-6 position-relative mt-4 mt-lg-0"> <h2 class="block__title mb-3">馃敟 30+ Hand-Picked Themes</h2> <p class="block__paragraph block__paragraph--big mb-0">Codes Highlight offers the best themes on the market! Whether you love light or dark themes, we got you covered.</p> </div> </div> </div> </div>  <div class="block-8-scr space-between-blocks"> <div class="container position-relative"> <div class="row px-2 align-items-center flex-column-reverse flex-lg-row">  <div class="col-lg-6 position-relative mt-4 mt-lg-0"> <h2 class="block__title mb-3">馃敟 196+ Programming Languages</h2> <p class="block__paragraph block__paragraph--big mb-0">Codes Highlight supports large language categories and even various other markups and syntaxes.</p> </div>  <div class="col-lg-6 my-5 my-lg-0 p-lg-5 text-center"> <div class="block-8-scr__img-container position-relative"> <div style="position: relative; padding-bottom: 56.25%; height: 0;"> <img class="block-8-scr__img w-100" src="./images/ComputerLangauges.png"> </div> </div> </div> </div> </div> </div>  <div class="block-14 container-fluid" id="Pricing"> <div class="container text-center"> <div class="block-14__header col-lg-10 mx-auto text-center px-0"> <h2 class="hero__title mb-3">Buy Once, <span class="highlight">Use Forever!</span></h2> <p class="col-lg-7 mx-auto block__paragraph">Get Lifetime Updates For One-Time Payment. Codes Highlight Is Good For All Kind Of Developers, Startups, Product Makers And More!</p> </div> <div class="row justify-content-center"> <div class="col-lg-4 mb-5 mb-lg-0 px-0"> <div class="plan-card plan-card--recommended text-center">  <p class="discount mt-3 mb-0 d-flex align-items-center justify-content-center"> <span class="discount__old-price mx-2">$38</span> <span class="discount__percentage mx-2">50% off</span> </p> <p class="plan-card__price my-2">$18</p> <span class="plan-card__duration">ONE TIME PAYMENT</span> <ul class="plan-features list-unstyled mt-5 mb-0"> <li class="plan-features__li"><span><i class="plan-features__icon fas fa-check mx-1"></i></span><span class="mx-1">Works On Google Slides And Google Docs</span></li> <li class="plan-features__li"><span><i class="plan-features__icon fas fa-check mx-1"></i></span><span class="mx-1">Free Lifetime Updates</span></li> <li class="plan-features__li"><span><i class="plan-features__icon fas fa-check mx-1"></i></span><span class="mx-1">Use On Unlimited Projects</span></li> <li class="plan-features__li"><span><i class="plan-features__icon fas fa-check mx-1"></i></span><span class="mx-1">30-day Money-back Guarantee</span></li> </ul> <div class="mt-5 flex-grow-1 d-flex flex-column-reverse"> <a href="https://codeshighlight.gumroad.com/l/codeshighlight/50off?wanted=true" class="btn btn-primary px-5 mx-auto" style="display: flex; align-content: center; align-items: center;"> <span class="mx-1"> Buy Forever <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path> </svg> </span> </a> </div> </div> </div> </div> <div class="mt-3"><a onclick="$crisp.push(['do', 'chat:open'])" class="mb-lg-0 mx-1 mx-lg-2" style="color: white" href="#!">Have Questions? Open Live Chat<span class="mx-1"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path> </svg> </span> </a></div> </div> </div>    <div class="block-40"> <div class="container">  <div class="block__header col-lg-9 col-xl-9 mx-auto text-center mb-5"> <h1 class="block__title" style="color: #fd67c6;">Frequently Asked Questions</h1> </div> <div class="row px-2 justify-content-center"> <div class="col-lg-8"> <div class="content-block"> <h4 class="content-block__title highlight">How do I purchase a license for my entire team?</h4> <p class="content-block__paragraph">We love to help all teams, just contact us about the quantity you need and we will try to give you the most suitable price as possible.</p> </div> </div> <div class="col-lg-8"> <div class="content-block"> <h4 class="content-block__title highlight">Are there any plans for new features?</h4> <p class="content-block__paragraph">Definitely! We will release updates on a regular basis after we know what most users want to see next. Send us your request on email or live chat.</p> </div> </div> <div class="col-lg-8"> <div class="content-block"> <h4 class="content-block__title highlight">What is your refund policy?</h4> <p class="content-block__paragraph">If you're unhappy with your purchase for any reason, we offers a 30-day money-back guarantee. Just contact us about what goes wrong and we'll refund you in full.</p> </div> </div> </div> </div> </div> <div class="block-44"> <div class="container"> <div class="row flex-column flex-md-row px-2 justify-content-center"> <p class="block-44__sections flex-grow-1"> <a class="highlight" href="https://codeshighlight.com/terms-and-conditions">Terms and Conditions</a> | <a class="highlight" href="https://codeshighlight.com/privacy-policy">Privacy Policy</a> | <a class="highlight" href="mailto:codeshighlight@gmail.com">Contact Us</a> </p> <p class="block-44__sections"> 漏 2021 Codes Highlight. <a class="highlight" href="https://frontendor.com/" target="_blank">Site Powered by Frontendor</a> </p> </div> </div> </div> <script> function GoTop() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } /* if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { document.body.style.backgroundImage = "none"; }*/ </script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"></script> <script> const lazyLoadInstance = new LazyLoad({ elements_selector: "img[data-src]" }) </script>  <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="90c70417-64f3-4855-8b67-f588a3b38acd";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script> </body> </html>

CINXE.COM

Highlight Code in Google Slides or Google Docs