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.
1.1 KiB
1.1 KiB
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 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;
}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.