Prism highlighting
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
<link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>
<div class="grid">
<div class="content">
<pre><code class="language-javascript">@Component({
selector: "main",
directives: [],
template: `
<button
(tap) = "onTapMe()"
text = "tap me" />
`
})
class MainPage {
onTapMe() {
alert("Hello from Angular 2");
}
// long coment pushing the right column further right !!!
}
</code></pre>
</div>
<div class="column">
</div>
</div>
CSS
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: auto 280px;
width: 500px;
}
.content {
background: tomato;
}
.column {
background: deepskyblue;
}