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

 By DEV Community - 2020-12-02

Description

Using display block on script and style blocks is a simple way to make HTML tutorials easier. Tagged with css, tricks, tutorials.

Summary

  • Sometimes when you build a demo HTML document and you want to display the source code of the script in it.
  • Giving it some padding and margins to display it over the box makes it stand out.
  • 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.

 

Topics

  1. Frontend (0.18)
  2. UX (0.09)
  3. Mobile (0.06)

Similar Articles

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...