"Highlight js Label Auto Detect Language Mode"
Bootstrap 4.0.0 Snippet by agiltriono

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> </head> <body> <div class="container"> <pre><code>$(document).ready(function() { // jquery code });</code></pre> <pre><code>.hljs{display:block;width:100%;overflow-x:auto;padding:0.5em;background:#F0F0F0} .hljs,.hljs-subst{color:#444} .hljs-comment{color:#888888} .hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold} .hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000} .hljs-title,.hljs-section{color:#880000;font-weight:bold} .hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060} .hljs-literal{color:#78A960} .hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300} .hljs-meta{color:#1f7199} .hljs-meta-string{color:#4d99bf} .hljs-emphasis{font-style:italic} .hljs-strong{font-weight:bold}</code></pre> </div> </body> </html>
.container{display:block;position:relative;margin:1em auto;padding:20px;max-width:900px!important;background:#607D8B} .hljs{display:block;width:100%;overflow-x:auto;padding:0.5em;background:#ffffff} .hljs,.hljs-subst{color:#444} .hljs-comment{color:#888888} .hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold} .hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000} .hljs-title,.hljs-section{color:#880000;font-weight:bold} .hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060} .hljs-literal{color:#78A960} .hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300} .hljs-meta{color:#1f7199} .hljs-meta-string{color:#4d99bf} .hljs-emphasis{font-style:italic} .hljs-strong{font-weight:bold} pre{position:relative} .languages{transition:all 200ms ease-in} .languages{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0} .languages{position:absolute;display:inline-block;padding:6px 12px;font-size:16px;font-family:'Roboto',sans-serif;font-weight:bold;margin-top:2px;margin-right:2px;line-height:20px;color:#FF5722;opacity:0;right:0;white-space:nowrap;vertical-align:middle;cursor:none;pointer-events:none;background-color:#FFEB3B;border-right:1px solid #e4d337;border-bottom:1px solid #e4d337;border-radius:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;z-index:1} .languages:hover,.languages:focus{color:#333;background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)} pre:hover .languages{opacity:1}
$(document).ready(function(){$("pre code").each(function(c,e){hljs.highlightBlock(e)})}),$(document).ready(function(){$("pre code").each(function(c){var e=$(this),o=e.attr("class").replace("hljs ","");l="<span class='languages' title='Clipboard'>"+o+"</span>",e.before(l)})});

Related: See More


Questions / Comments: