<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)})});
