highlight.js Dark+ theme

by kontrach

HTML

<code><pre>
<r>import</r> { <v>User</v> } <r>from</r> <s>'./model'</s>;
<r>import</r> { <v>UserService</v> } <r>from</r> <s>'./user.service'</s>;

<r>export</r> <k>class</k> <t>AppComponent</t> {
  <v>user</v>: <t>User</t>;
  <k>constructor</k>(<k>private</k> <v>userService</v><span class="fragment fade-in">: <t>UserService</t></span>) { }
  <k>async</k> <fN>onInit</fN>(): <t>Promise</t>&lt;<t>void</t>&gt; {
    <k>this</k>.<v>user</v> = <r>await</r> <k>this</k>.<v>userService</v>.<fN>getUser</fN>(<n>1</n>);
  }
}



interface Person {
  name: string;
  age: number;
}

interface Teacher extends Person {
  canTeach: true;
}

interface Driver extends Person {
  canDrive: true;
}

const person = {
  name: 'hello',
  age: 22
};

type Employee = Teacher | Driver;
type DrivingInstructor = Teacher & Driver;

@Component({ selector: 'my-component' })
class AppComponent implements OnInit {
  constructor(private userService: UserService) {}
  onInit(is: boolean): void {
    return userService.getUser().then(setUser);
  }
}

function setUser(resp: Responce) {
  window.user = resp.json();
}

function Component(s): any {}

type ReadonlyEmployee = Partial&lt;Employee&gt;;
</pre></code>

CSS

t,
t::selection,
.type {
  color: #4EC9B0;
}

k,
k::selection,
.keyword {
  color: #569CD6;
}

v,
v::selection,
.vars {
  color: #9CDCFE;
}

fN,
fN::selection,
.fnName {
  color: #DCDCAA;
}

r,
r::selection,
.reserved {
  color: #C586C0;
}

re,
re::selection,
.reg-exp {
  color: #D16969;
}

s,
s::selection,
.string {
  color: #AF695D;
  text-decoration: none;
}

c,
c::selection,
.comment {
  color: #558B3A;
}

n,
n::selection,
.number {
  color: #B5CEA8;
}

body {
  background: #1E1E1E;
  font-size: 1.5em;
  color: white;
}

/* @keyframes fade-in {
  0% {
    display: inline-block;
    opacity: 0;
    max-width: 0;
  }
  25% {
  }
  50% {
    max-width: auto;
  }
  75% {
  }
  100% {
    opacity: 1;
  }
} */

.fade-in {
  opacity: 0;
  max-width: 0;
  display: inline-block;
  /* transition: all 2s; */
  transition: opacity 0.75s linear, max-width 0.75s linear; /*  animation-name: fade-in;
  animation-duration: 2s;
  animation-direction: reverse; */
}

/* The element to apply the animation to */

.fade-in.visible {
  opacity: 1;
  max-width: 999px;
  /* display: inline-block; */
}

JavaScript

const find = s => document.querySelector(s);
const fr = find('.fragment');

document.addEventListener('click', (e) => {
  fr.classList.add('visible');
});

document.addEventListener('dblclick', (e) => {
  fr.classList.remove('visible');
});