DEV Community

Cover image for A Clean Code Box
Imagineee
Imagineee

Posted on • Updated on

 

A Clean Code Box

Have you ever thought of a beautiful way to document your code?
Well I have got a simple way to do it!

here is how it will look:
code box
Very simple but clean and pleasant to look at

If you are looking for the code, add this to your css:

pre {
    padding: 30px;
    background-color: #f5f2f2;
    border-radius: 10px;
    display: inline-block;
}
code {
    padding: 10px;
    background-color: #141414;
    color: white;
    display: block;
    border-radius: 10px;
    box-shadow: 10px 10px 20px grey, -10px -10px 20px white, 5px 5px 5px black inset;
    text-shadow: 5px 5px 5px black, -2px -2px 2px #212121;
}
Enter fullscreen mode Exit fullscreen mode

If you are lazy to insert this css, insert this in your html:

<!--Deperected-->
<link rel="stylesheet" href="https://imagineeeinc.github.io/api/cdn/css/codebox.css">
<!--New from a new source-->
<link rel="stylesheet" href="https://eureka-imagineee-server.github.io/code-snips/css/codebox.css">
Enter fullscreen mode Exit fullscreen mode

and for the html add this:

<pre><code>
-->your code goes here<--
</code></pre>
Enter fullscreen mode Exit fullscreen mode

You can obviously hook it up to a syntax highlighter like highlight js to make it lot cooler and you can always edit the code for your own needs

See the Pen Code Box

Top comments (1)

Collapse
 
gouravkhunger profile image
Gourav Khunger

Awesome! Thanks for this :)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.