Embed and Execute code snippets, beautifully

A code viewer/editor with a built sandbox for web languages

 

  • Lightweight (~27kb)
  • 100+ supported languages
  • Multiple code blocks via tabs
  • 17 customizable options
  • Built-in sandbox
  • Fully brandable
  • Customizable settings menu
  • Light & dark themes
  • Code embedding from URL
  • HIDPI ready
  • Based on Cloud9 Ace Editor
  • jQuery plugin

Light Theme

Simple Code Highlighting

Embedding a single JavaScript code snippet.

function sayHello()
{
    console.log("Hello from Mivhak!");
}
                    

Collapsed Code

You can also hide your code initially behind a "Show Code" button. Once clicked, the code will be expanded.

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i];
    return maxval;
}
                    

Custom Accent Color

You can customize Mivhak to match the colors of your brand. Since Mivhak implements its own scrollbars, you can also control their color.

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i]; // Just a long comment to show the bottom scrollbar (turn off wrap lines)
    return maxval;
}
                    

No top bar

To make things simple, you can hide the top bar and show only the code itself.

// Some cool code goes here...
                    

Remote code embedding

You can embed code from a remote URL by using the miv-source attribute.


                

Line Marking/Highlighting

Highlight selected lines and ranges with a straightforward syntax. For example, 3, 5-7.

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i]; // Just a long comment to show the bottom scrollbar (turn off wrap lines)
    return maxval;
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i]; // Just a long comment to show the bottom scrollbar (turn off wrap lines)
    return maxval;
}
                    

Line Numbers with a Custom Starting Line

Show line numbers, and optionally specify a custom starting line.

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i];
    return maxval;
}
                    

Live Code Previewing

Add a live preview to your code by using the miv-runnable="true" attribute. Turn your code into a sandbox by adding the miv-editable="true" attribute.


                    

                    
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,100|Montserrat:400,700|Catamaran:400,100' rel='stylesheet' type='text/css'>
<h1>CLICK & DRAG</h1>
<div id="container"></div>
<div id="reset">RESET</div>
                    
var paint = false,
    counter = 0;

$('#container')
  .mousedown(function(){
    paint = true;
  })
  .mouseup(function(){
    paint = false;
  })
  .mousemove(function(e){
    if(paint){
    W = $('#container').width();
    H = $('#container').height();
    x = e.pageX;
    y = e.pageY;
    X = Math.floor(x/W * 100);
    Y = Math.floor(y/H * 100);
    r = Math.floor(Math.random() * 90);
    counter = (counter < 360) ? counter+1 : 0;
    h = counter;
    //h = Math.floor((X+Y) * 360 / 200);
    $('#container').append('<div class="postit" style="top:'+y+'px;left:'+x+'px;background:hsla('+h+',100%,50%,0.1);transform:rotate('+r+'deg)"></div>');
    }
  });
$('#reset').click(function(){
  $("#container").empty();
});
                    
*,
*::after,
*::before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body {
  perspective: 2000px;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Roboto';
  font-weight: 300
}
h1{
  font-familt:'Catamaran';
  font-weight:100;
  text-align:center
}
#container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.postit{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:5%;
  transform:rotate(0deg);
  margin:-50px 0 0 -50px;
}
#reset{
  position:absolute;
  bottom:3px;right:3px;
  height:30px;
  line-height:30px;
  padding:0 10px;
  color:#fff;
  background:rgba(0,0,0,0.5);
  z-index:100;
  cursor:pointer;
}
                    

Dark Theme

Basic Example

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Hello World</h1>
        <p>Hi</p>
    </body>
</html>
                    
function add(x, y) {
    var resultString = "Hello, ACE! The result of your math is: ";
    var result = x + y;
    return resultString + result;
}

var addResult = add(3, 2);
console.log(addResult);
                    
                    body {background: blue}
                    
Caption Text Here....

Line Numbers with a Custom Starting Line

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i];
    return maxval;
}
                    

Line Marking/Highlighting

function max( arr )
{
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i]; // Just a long comment to show the bottom scrollbar (turn off wrap lines)
    return maxval;
    var i = arr.length, maxval = arr[--i];
    while(i--) if(arr[i] > maxval) maxval = arr[i]; // Just a long comment to show the bottom scrollbar (turn off wrap lines)
    return maxval;
}
                    

Spread the word about Mivhak.js!