This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
1.1 KiB
26 lines
1.1 KiB
2 years ago
|
The `Code` component simplifies displaying code with line numbers and letting people copy the code to their clipboard. It will get the code from a URL, wrap it in a `<pre><code>..</code></pre>` block, and then convert each line to an inner `<span>` so it will receive a line number using CSS.
|
||
|
|
|
||
|
|
The CSS that makes this magic happen is:
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code data-language="css">
|
||
|
|
pre code span::before {
|
||
|
|
counter-increment: line;
|
||
|
|
content: counter(line);
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0 0.3rem;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
border-right: 1px solid var(--color-inactive);
|
||
|
|
min-width: 3ch;
|
||
|
|
text-align: right;
|
||
|
|
color: var(--color-inactive);
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}</code></pre>
|
||
|
|
|
||
|
|
This uses the `::before`` selector to add a line number counter to the front of each span, and then create a thin line. This is why you can use your mouse to select the lines of code but the _line numbers_ won't be selected (even if some browsers show you they are being selected).
|
||
|
|
|
||
|
|
To make it easier on people it will also just copy the code when you click on it and then do a `Toast` alert.
|