Zzhljs - Beauty code with highlightjs and clipboardjs

This script will help highlight the syntax of the code and quickly copied using the clipboard.

Features

1. 146 languages and 66 styles (live demo)
   
2. automatic language detection
   
3. multi-language code highlighting
   
4. quickly copied using the clipboard

Demo

How to set up?

Goto ACP >> Display >> General >> overall_header

Find:

Code:

<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

And added below it, the code:

Code:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>
/* Zzhljs - http://devs.forumvi.com */
dl.codebox:not(.spoiler) dt {
    display: none;
}
dl.codebox:not(.spoiler) dd {
    border: 0 none;
    background: #f8f8f8;
    position: relative;
    max-height: 100%;
}
.clipboard {
    display: block;
    color: #333;
    position: absolute;
    right: 4px;
    top: 4px;
    background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
    border: 1px solid #D5D5D5;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out 0s;
    opacity: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-appearance:none;
    cursor: pointer;
}
.clipboard.check-circle {
    background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
    background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
    opacity: 1;
}
.clipboard:hover {
    background-color:#ddd;
    border-color:#ccc;
}
.hljs {
    background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
    max-height: 100%;
    margin: 0;
}
.codebox:not(.spoiler) {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
    var $code = $("code");
    if ($code.length) {
        hljs.configure({
            useBR: true
        });
        $code.each(function (i, block) {
            hljs.highlightBlock(block);
        });

        function fallbackMessage(action) {
            var actionMsg = '';
            var actionKey = (action === 'cut' ? 'X' : 'C');

            if (/iPhone|iPad/i.test(navigator.userAgent)) {
                actionMsg = 'No support!';
            } else if (/Mac/i.test(navigator.userAgent)) {
                actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
            } else {
                actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
            }

            return actionMsg;
        }

        function afterClipboard(ele) {
            setTimeout(function(){
                ele.className = 'clipboard clipboard';
            }, 400);
        }

        var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');

        [].forEach.call(snippets, function (snippet) {
            snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
        });

        var clipboardSnippets = new Clipboard('[data-clipboard]', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });

        clipboardSnippets.on('success', function (e) {
            e.clearSelection();
            e.trigger.className = 'clipboard check-circle';
            afterClipboard(e.trigger);
        });

        clipboardSnippets.on('error', function (e) {
            e.trigger.className = 'clipboard exclamation-triangle';
            afterClipboard(e.trigger);
            alert(fallbackMessage(e.action));
        });
    }
});
</script>

Save the template, done.

Note

No support phpBB2 version.

Credits

Icons from FlatIcon.
Javascript plugin HighlightJs and ClipboardJs.
This tutorial was written by Zzbaivong.