<div id="code_wrap">
  <pre><code class="javascript">
var var1 = "This is Awesome";
var var2 = 12345;
document.innerHTML("Just to show Theme Colors...");

function Vector(x, y) {
    this.x = x || 0;
    this.y = y || 0;
  }

  Vector.prototype.add = function(vector) {
    this.x += vector.x;
    this.y += vector.y;
  }
  
  Vector.prototype.getMagnitude = function () {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  };

  Vector.prototype.getAngle = function () {
    return Math.atan2(this.y,this.x);
  };

  Vector.fromAngle = function (angle, magnitude) {
    return new Vector(magnitude * Math.cos(angle), magnitude * Math.sin(angle));
  };

  function Emitter(point, velocity, spread) {
    this.position = point; // Vector
    this.velocity = velocity; // Vector
    this.spread = spread || Math.PI /* /16 */; // possible angles = velocity +/- spread
    this.drawColor = "#999"; // So we can tell them apart from Fields later
  }
</code></pre>
</div>
/* Cyberpunk Theme *//*
:root {
  --selection: rgba(255, 100, 200, 0.35);
  --background: #242424;
  --text: #ffffff;
  --string: #67fca8;
  --number: #44ead9;
  --title: #9e4ee8;
  --built_in: #ea5452;
  --keyword: #bc368b;
  --function: #e552ea;
  --params: #508be5;
  --comment: #7f7f7f;
}*/

/* Dark Orange Theme */
:root {
  --selection: rgba(224, 146, 58, 0.35);
  --background: #242424;
  --text: #ffffff;
  --string: #67b26d;
  --number: #e8a04e;
  --title: #9e4ee8;
  --built_in: #e25158;
  --keyword: #e5b742;
  --function: #e0923a;
  --params: #508be5;
  --comment: #7f7f7f;
}

pre code {
  display: block;
  overflow-x: auto;
  padding: 10px;
  background: var(--background);
  -webkit-text-size-adjust: none;
}

pre code *::selection,
.hljs::selection {
  background: var(--selection) !important;
}

.hljs {
  color: var(--text);
}

.hljs-string {
  color: var(--string);
}

.hljs-number {
  color: var(--number) !important;
}

.hljs-title {
  color: var(--title) !important;
}

.hljs-built_in {
  color: var(--built_in) !important;
}

.hljs-keyword {
  color: var(--keyword) !important;
}

.hljs-function > .hljs-keyword {
  color: var(--function) !important;
  font-style: italic;
}

.hljs-params {
  color: var(--params);
}

.hljs-comment {
  color: var(--comment);
}
$(document).ready(function() {
  textblock = $("pre code").html();
  var lines = textblock.split("\n");
  lines.splice(0, 1);
  var newtext = lines.join("\n");
  $("pre code").html(newtext);

  $("pre code").each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js