Code block $ prefix
Tags: webdev, css, devtips, frontend
Published: 2019-02-27 12:50:35

---
title: Code block $ prefix
published: true
description: A how-to guide explaining how to add prefixes to code blocks.
tags: webdev, css, devtips, frontend
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0vv8iuxg5bdb1ra01arj.png
---

I use the DigitalOcean community tutorials a lot for examples how to setup up different things in Linux (Nginx, MySQL, firewall, ...)  and would also advice everyone to use them.

About 3 weeks ago I actually noticed something about their code blocks, some of them (containing terminal commands) started with `$`, nothing strange about that right?
Well actually it is because you can't copy it, it will only copy the code after the `$` prefix. An example of this can be found [here](https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-16-04#step-1-install-apache-and-allow-in-firewall).

This caught my interest, I have never noticed this before and couldn't find any good examples how this was done. So I digged through the page source code and found the magical source code for this little piece of art.

It is actually a combination of some good old HTML combined with a little CSS magic. I will try to explain the different parts and at the end show a working JSFiddle example.

**HTML**
The HTML part is actually pretty simple. It is the normal code block syntax with an unordered list in it. This example shows a code block with multiple lines but of course if you only want a one-line code block you can do the same with only one list item (`<li>`).

```html
<pre>
	<code>
		<ul class="prefixed">
    		<li class="line">sudo apt-get update</li>
    		<li class="line">sudo apt-get install apache2</li>
    		<li class="line">sudo apache2ctl configtest</li>
		</ul>
	</code>
</pre>
```

**CSS**
I will split this part up into smaller sections.

This first part is only used to reduce the spacing between each list item. Nothing special about it.

```css
pre .prefixed {
    white-space: normal;
    margin: 0;
}
```

Okay now we are getting to the first important part. `list-style-type` is used to remove the default list item style: `•`

```css
pre .line {
    list-style-type: none!important;
}
```

This last part is used to actually add the `$` prefix in front of the code block. The first part is to make sure that a user can't copy it. The margins are used to add a little spacing around the prefix, of course can be adjusted how you like.
The most important part is `content: "$";`, this adds the prefix that we want to all the lines above.

```css
pre .line::before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    content: "$";
    margin-right: 10px;
    margin-left: 5px;
}
```

**Bonus**
I wanted to add this as a little bonus.
It is also possible to add different prefixes to each line without needing to make a different CSS style for each.
Add the `prefix` attribute, with any value that you like.

```html
<li class="line" prefix="$">sudo apt-get install apache2</li>
```
In the last CSS block replace `content: "$";` with this. It will get the attribute value and use that as the prefix instead.

```css
content: attr(prefix);
```

{% jsfiddle https://jsfiddle.net/2ds89evp/ result,html,css %}

_This was my first time giving a coding tutorial so I hope you like it. Any feedback is of course welcome._