DEV Community

Cover image for Quick tutorial CSS tip: How to show source code the easy way
Christian Heilmann
Christian Heilmann

Posted on

Quick tutorial CSS tip: How to show source code the easy way

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:

script {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
}
Enter fullscreen mode Exit fullscreen mode

Demo of this trick

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:

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

Not selector with overflow to only show inline scripts

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.

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;
}
Enter fullscreen mode Exit fullscreen mode

Adding a description to the code block

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.

script:not([src]),style {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 5em;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

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:

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;
}
Enter fullscreen mode Exit fullscreen mode

Displaying Style Blocks

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

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 script on GitHub and there is a detailed blog post

Discussion (7)

Collapse
indieveed profile image
Aleksandr

an editable block also allows attackers to include any JavaScript to steal credentials and override other scripts on your server

How does it work? I mean how is it different from just executing JS code in devtools console? Unless you save this edited scripts and serve them to other users you should be fine, shouldn't you?

Collapse
charles66982918 profile image
charles hollins

Very great ways. Thanks

Collapse
phongduong profile image
Phong Duong

Great tip. Thank you for sharing

Collapse
geraldcarrill17 profile image
Gerald Carrillo

This post is helpful truly! I really appreciate the efforts you have made to include the information. Thank you so much.

Collapse
lilyben04 profile image
Lily Ben

This article is genuinely useful! Many thanks for sharing.

Collapse
davidjo24054760 profile image
David Johnson

Great read! While I do agree with you about what you said, you've explained everything quite clear!