DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Top comments (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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.