How do I insert a code viewer on my page?


I want to put this type of code viewer on my web page. How can I do it?

asked by jonathan 21.05.2016 в 23:19

3 answers


To integrate javascript code, html, php, css, etc ... there are many js libraries, I would recommend link

I hope it's what you're looking for.

answered by 22.05.2016 / 19:15

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>
answered by 21.05.2016 в 23:29

You can use highlight.js , a plugin designed to recognize source code and format it appropriately.

$(function() {
  $('pre code').each(function(i, block) {
.snippet .hljs {
  background-color: #262720;
  color: #fff;
.snippet .hljs .hljs-keyword {
  color: #00d6ff;
.snippet .hljs .hljs-string {
  color: #fff8ab
<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>
<pre class="snippet">
<code class="javascript">
  var app = angular.module('formApp', []);
  app.controller('MainCtrl', function ($scope) {
    $scope.formData = {};

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 .

answered by 23.05.2016 в 14:40