Quick tutorial CSS tip: How to show source code the easy way
Tags: css, tricks, tutorials
Published: 2020-11-24 00:42:01

---
title: Quick tutorial CSS tip: How to show source code the easy way
published: true
description: Using display block on script and style blocks is a simple way to make HTML tutorials easier.
tags: CSS,tricks,tutorials
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5hlvwao00tukjg1x6x4r.jpg
---
Sometimes when you build a demo HTML document and you want to display the source code of the script in it. The problem is that often your script and what you show gets out of sync when you hard-code it into your docs. 

One way would be to load the script via `fetch()` and display it and there are myriads of packages that do that for you.

A super simple way to do the same though relies on you embedding the script inside the body of the document. Once you do that, you can use CSS to set its `display` to `block` and `white-space` to `pre` and voilà: embedded source code:

```CSS
script {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
}
```
![Demo of this trick](https://dev-to-uploads.s3.amazonaws.com/i/yx2md3bu0wyz8gqpuzen.png)

Two things to remember though: script can be long and this basic CSS would also display script blocks without content that point to a file with a `src` attribute. 

You can fix that with a `not()` selector, setting a `height` and `overflow:scroll`:

```CSS
script:not([src]) {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 5em;
}
```

![Not selector with overflow to only show inline scripts](https://dev-to-uploads.s3.amazonaws.com/i/30jpcfcbfu5c8c43soni.png)

You can even tell your readers what's going on here by setting the display of the `script` element to `relative` and use generated content with a `position` of `fixed`. Giving it some padding and margins to display it over the box makes it stand out. 

```CSS
script:not([src]) {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 15em;
  position: relative;
}
script:not([src])::before {
  content: "Source code (JavaScript):";
  background: orchid;
  width: auto;
  display: block;
  position: fixed;
  padding: 2px 5px;
  margin: -1em 0 0 -0.5em;
}
```
![Adding a description to the code block](https://dev-to-uploads.s3.amazonaws.com/i/psdi1w7h19w21l2icsxa.png)

## Sweet, but what about CSS source code?

If you put the style block into the body, you can also style it. This is not where it should be, but in a tutorial, why not? All you need to do is to add `style` to the `script` selector. 

```CSS
script:not([src]),style {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 5em;
  position: relative;
}
```
If the style block is the first element in the document, it needs some margin. And if you don't want to use the same text to display it, it makes sense to add a different before setting:
```CSS
style {
  margin: 2em 0 1em 0;
}
style::before {
  content: "Source code (CSS):";
  background: orchid;
  width: auto;
  display: block;
  position: fixed;
  padding: 2px 5px;
  margin: -1em 0 0 -0.5em;
}
``` 
![Displaying Style Blocks](https://dev-to-uploads.s3.amazonaws.com/i/veutpk1jm4p3lsy08om6.png)

## Here be dragons: making things editable 

OK, here is where it gets wild. If you add a `contenteditable="true"` attribute to your style block, you can even allow readers to change the settings live and play with them. 

![Contenteditable enabled allows for live editing](https://dev-to-uploads.s3.amazonaws.com/i/t9bo1ei2e83qr5igv1t7.gif)

Whilst this is cool and all, it is not a good idea to put out into the wild without any filtering server-side scripts, as an editable block also allows attackers to include any JavaScript to steal credentials and override other scripts on your server. I did use this in HTML slidedecks in the past with the result of getting my server hacked. So, better not to go that way…

If you want to know more about the demo page shown here, it is part of my [CanvasShift.js](https://github.com/codepo8/canvasshift.js) script on GitHub and there is a detailed [blog post](https://christianheilmann.com/2020/11/23/shifting-an-image-with-canvas/)