I want to put this type of code viewer on my web page. How can I do it?
I want to put this type of code viewer on my web page. How can I do it?
I do not know how they generate the code on that particular page but that "viewer" is nothing more than html and css code like this:
pre {
background: #262720;
-webkit-border-radius: 10px;
border-radius: 10px;
font-family: Consolas,sans-serif;
padding: 8px;
font-size: .95em;
color: #fff;
overflow: auto;
width: 100%;
}
pre .kw1, pre .me1 {
color: #00d6ff;
}
pre .sy0 {
color: #f92772;
}
pre .br0 {
color: #aaa;
}
pre .st0 {
color: #fff8ab;
}<pre> <span class="kw1">var</span> app <span class="sy0">=</span> angular.<span class="me1">module</span><span class="br0">(</span><span class="st0">'formApp'</span><span class="sy0">,</span> <span class="br0">[</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span>
app.<span class="me1">controller</span><span class="br0">(</span><span class="st0">'MainCtrl'</span><span class="sy0">,</span> <span class="kw1">function</span> <span class="br0">(</span>$scope<span class="br0">)</span> <span class="br0">{</span>
$scope.<span class="me1">formData</span> <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
</pre>You can use highlight.js , a plugin designed to recognize source code and format it appropriately.
$(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});.snippet .hljs {
background-color: #262720;
color: #fff;
}
.snippet .hljs .hljs-keyword {
color: #00d6ff;
}
.snippet .hljs .hljs-string {
color: #fff8ab
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<pre class="snippet">
<code class="javascript">
var app = angular.module('formApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.formData = {};
});
</code>
</pre>This is not exactly what you put in your example since highlight.js what it recognizes is javascript which is the language as such but can be easily customized to your liking.
Check the style guide and the language guide .