<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>
<!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>
