Prism.js example

index.html

<div class="title"> Prism.js example </div>
<p class="text"> Javascript: </p>
<pre class="language-js">
<code class="language-js">
  function example(a, b) {
     console.log("example!);
  }
</code>
</pre>
<p class="text"> CSS: </p>
<pre class="language-css">
<code class="language-css">
  .example {
     color: #fff;
  }
</code>
</pre>
<p class="text"> HTML: </p>
<pre class="language-markup">
<code class="language-markup">
  &#60;p&#62; Example &#60;/p&#62;
  &#60;div&#62; Example two &#60;/div&#62;
</code>
</pre>

prism-js-example.markdown

Prism.js example

A Pen by demo on CodePen.

License.

script.js

let js = document.getElementsByClassName("language-js")[0]
  js.style.borderRadius = "20px";
  js.style.marginLeft = "100px";
  js.style.width = "300px";
let css = document.getElementsByClassName("language-css")[0]
  css.style.borderRadius = "20px";
  css.style.marginLeft = "100px";
  css.style.width = "300px";
let html = document.getElementsByClassName("language-markup")[0]
  html.style.borderRadius = "20px";
  html.style.marginLeft = "100px";
  html.style.width = "300px";

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

style.css

body {
  background: #515151;
  overflow: hidden;
}

.title {
  color: #eee;
  font-size: 40px;
  font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
  padding: 20px 20px 0px 20px;
}

.text {
  color: #e0e0e0;
  font-size: 20px;
  font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
  margin-left: 70px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-tomorrow.min.css" rel="stylesheet" />