Code display using Prismjs

With line numbers plugin

$(function() {
    "use strict";
    $("#div1").resizable();
    $("#div2").resizable();
    $("#topmenu").resizable();

    $("#topmenu").resize(function() {
        $("#div2").height($("#parent").height() - $("#topmenu").height());
        $("#div1").height($("#parent").height() - $("#topmenu").height());
    });

    $("#div1").resize(function() {
        $("#div2").width($("#parent").width() - $("#div1").width());
    });

    $("#div2").resize(function() {
        $("#div1").width($("#parent").width() - $("#div2").width());
    });

    $(window).resize(function() {
        $("#div2").width($("#parent").width() - $("#div1").width());
        $("#div1").height($("#parent").height() - $("#topmenu").height());
        $("#div2").height($("#parent").height() - $("#topmenu").height());
    });
});

 

	#parent {
	position: absolute;
	height: 100vh;
	margin: 0;
	padding: 0;
	width: 98%;
}

#div1 {
	position: relative;
	display: block;
	float: left;
	width: 50%;
	background-color: #A2A;
	overflow: auto;
	
}

#div2 {
	display: block;
	background-color: #BBB;
	overflow: auto;
}

#topmenu {
	position: relative;
	width: 100%;
	height: calc(98vh /8);
	overflow: auto;
	
}

.content {
	margin: 10px;
	height: 100%;
	width: 100%;
	
}

body {
	overflow: hidden;
}

html {
	overflow: hidden;
}

.scale {
    position:absolute;
    height:30px;
    margin:0;
    padding:0;
    width:100%;
    left: 0;
    bottom: 0;
    z-index: 1000;
}
.vscale {
    position:absolute;
    height:100%;
    margin:0;
    padding:0;
    width:30px;
    left: 0;
    top: 0;
    z-index: 1000;

}