Integrate Syntax Highlighter In Website

Prism 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.

HTML Example

<div class="container">
    <div class="row">
        <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
            <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
            <p class="lead">
                Build responsive, mobile-first projects on the web with the world’s most popular front-end component
                library.
            </p>
            <p class="lead mb-4">
                Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas
                or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt
                components, and powerful plugins built on jQuery.
            </p>
            <div class="row mx-n2">
                <div class="col-md px-2">
                    <a href="/docs/4.4/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3"
                        onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get
                        started</a>
                </div>
                <div class="col-md px-2">
                    <a href="/docs/4.4/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3"
                        onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 4.4.1');">Download</a>
                </div>
            </div>
            <p class="text-muted mb-0">
                Currently v4.4.1
            </p>
        </div>
    </div>
</div>
            

CSS Example

#languages {
        column-count: 4;
    }
        #languages > h1 {
            margin-top: 0;
            column-span: all;
        }
        #languages label {
            display: block;
            padding: .2em;
        }
        #languages label[data-id="javascript"] {
            border-bottom: 1px solid #aaa;
            padding-bottom: 1em;
            margin-bottom: 1em;
        }
        #languages .unavailable {
            color: #aaa;
        }
        #languages input {
            margin-right: .7em;
        }
    
    #examples > section {
        display: block;
        margin: auto;
        max-width: 900px;
    }
        #examples h3 {
            margin: 1em 0 0.3em;
        }
    ul {
        padding-left: 40px;
    }

JavaScript Example

var each = _.each = _.forEach = function (obj, iterator, context) {
            if (obj == null) return;
            if (nativeForEach && obj.forEach === nativeForEach) {
                obj.forEach(iterator, context);
            } else if (obj.length === +obj.length) {
                for (var i = 0, l = obj.length; i < l; i++) {
                    if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
                }
            } else {
                for (var key in obj) {
                    if (_.has(obj, key)) {
                        if (iterator.call(context, obj[key], key, obj) === breaker) return;
                    }
                }
            }
        };

For usage and more details Click Here