Skip to content

Instantly share code, notes, and snippets.

@jodersky

jodersky/index.html

Last active October 6, 2018 20:43
Show Gist options
  • Save jodersky/94a9048cddb6eb349fb22447d1c61c3c to your computer and use it in GitHub Desktop.
Save jodersky/94a9048cddb6eb349fb22447d1c61c3c to your computer and use it in GitHub Desktop.
Download ZIP
Minimal CSS to format code as if it were displayed in a terminal
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
.term {
background-color: rgba(43,43,43,0.99);
color: rgb(169,183,198);
padding: 1em;
border-radius: 0.5em;
display: block;
counter-reset: term-line;
overflow: auto;
max-width: 60em;
}
.term > * {
font-family: Hack, monospace;
margin-top: 0;
margin-bottom: 0;
}
.term::before {
content: ' \25cf \25cf \25cf';
font-size: 1em;
background-image: linear-gradient(
to right,
#f22, #f22 30%,
#ff2 30%, #ff2 66%,
#2f2 66%, #2f2
);
color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.term > :hover {
color: rgb(248,248,248);
}
.term > :first-child {
margin-top: 1em;
}
.code > ::before {
counter-increment: term-line;
content: counter(term-line, decimal-leading-zero);
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgb(100,100,100);
color: rgb(169,183,198);
box-sizing: border-box;
padding-right: 0.5em;
margin-right: 0.5em;
}
.shell > ::before {
content: '$ ';
color: rgb(169,183,198);
}
.term {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div class="term code" onclick="copy(this)">
<pre>package org.example</pre>
<pre></pre>
<pre>case class Container(x: Int, y: String)</pre>
<pre></pre>
<pre>object Container {</pre>
<pre> def fct(c: Container): Unit = ???</pre>
<pre>}</pre>
</div>
<div class="term shell" onclick="copy(this)">
<p>curl https://dl.crashbox.io/debian/key.asc | apt-key add -</p>
<pre>echo &quot;deb https://dl.crashbox.io/debian buster main contrib non-free&quot; \
&gt; /etc/apt/sources.list.d/crashbox.list</pre>
<p>apt update</p>
</div>
<div class="term" onclick="copy(this)">
<pre>plain term
works with "pre" elements</pre>
</div>
<script type="text/javascript">
function copy(parent) {
window.getSelection().selectAllChildren(parent);
document.execCommand("copy");
}
</script>
</body>
</html>
@jodersky
Copy link
Author

jodersky commented Oct 6, 2018

localhost__jodersky_repo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment