Jquery and CSS стиль под IDE

by Denis Tverdokhlebov

HTML

<link href='http://fonts.googleapis.com/css?family=Fira+Mono' rel='stylesheet' type='text/css'>

<h1>Some stuff</h1>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. </p>

<h2>About</h2>
<p>A little about me</p>
<dl>
  <dt>Lorem</dt>
  <dd>Ipsum</dd>
</dl>

<h3>Dolor</h3>
<dl>
  <dt>Lorem</dt>
  <dd>Ipsum Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>sit</dt>
  <dd>Ipsum Donec <b>id elit non mi porta gravida at eget</b> metus.</dd>
</dl>

CSS

* {
  margin: 0;
  padding: 0;
  font: 18px/1.5 "Fira Mono", monospaced;
}
body {
  padding: 2rem;
  color: #F5F7Fa;;
  background: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  color: #A0D468;
  text-transform: lowercase;
  margin-top: 1.5rem;
}
h3 {
  color: #ED5565;
}
h1:before {
  content: "#";
  color: #EC87C0;
}
h2:before {
  content: ".";
}
h1:after,
h2:after,
h3:after {
  content: " {";
  color: #FFFFFF;
}

p {
  color: #656D78;
  color: #CCD1D9;
}
p:before {
  content: "/* ";
}
p:after {
  content: " */";
}

dt,
dd {
  float: left;
  text-transform: lowercase;
}
dt {
  clear: left;
  color: #4FC1E9;
}
dt:after {
  content: ": ";
}
dl:after {
  content: " }";
  color: #FFFFFF;
  clear: both;
  display: block;
}
dd {
  color: #AC92EC;
  padding-left: 0.5rem;
}
dd:after {
  content: ";";
  color: #FFFFFF;
}

b {
  color: #FFCE54;
}
b:before {
  content: "('";
}
b:after {
  content: "')";
}

/* Indenting */
h2 + p,
h2 ~ dl {
  margin-left: 2rem;
}
h2 ~ dl:after {
  margin-left: -2rem;
}

JavaScript

// Vanilla
;document.addEventListener('DOMContentLoaded', function() {
  var headings = document.querySelectorAll('h1, h2, h3');
  for ( i=0; i<headings.length; i++ ) {
    var t = headings[i].innerHTML;
    headings[i].innerHTML = t.replace(' ', '-');
  }
});